calc()関数とhsl()カラーモデルで色を変化させる

2024-04-02

CSSで色を動的に明るく・暗くする

calc() 関数を使うと、パーセンテージで色を調整することができます。

.box {
  background-color: #f00;
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: calc(#f00 + 10%); /* 10%明るくする */
}

この例では、.box 要素の背景色は、デフォルトで赤 (#f00) です。マウスホバーすると、背景色が 10% 明るくなります。

calc() 関数は、加算だけでなく減算も可能です。

.box {
  background-color: #f00;
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: calc(#f00 - 10%); /* 10%暗くする */
}

hsl() カラーモデルを使うと、色相、彩度、明度を個別に調整することができます。

.box {
  background-color: hsl(0, 100%, 50%); /* 色相: 0, 彩度: 100%, 明度: 50% */
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: hsl(0, 100%, calc(50% + 10%)); /* 明度を10%上げる */
}

この例では、.box 要素の背景色は、デフォルトで HSL カラーモデルの 0 度 (赤)、100% の彩度、50% の明度です。マウスホバーすると、明度が 10% 上がります。

.box {
  background-color: hsl(0, 100%, 50%); /* 色相: 0, 彩度: 100%, 明度: 50% */
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: hsl(calc(0 + 30), 100%, 50%); /* 色相を30度上げる */
}

CSSで色を動的に明るく・暗くするには、calc() 関数と hsl() カラーモデルを使うことができます。これらの方法を組み合わせることで、さまざまな色の変化を表現することができます。

HTML

<div class="box"></div>

CSS

.box {
  background-color: #f00;
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: calc(#f00 + 10%); /* 10%明るくする */
}

/* hsl() カラーモデルを使った例 */

.box {
  background-color: hsl(0, 100%, 50%); /* 色相: 0, 彩度: 100%, 明度: 50% */
  width: 100px;
  height: 100px;
}

.box:hover {
  background-color: hsl(0, 100%, calc(50% + 10%)); /* 明度を10%上げる */
}

このコードを HTML ファイルに保存してブラウザで開くと、.box 要素の色がマウスホバー時に変化することを確認できます。

色相を変化させる

.box:hover {
  background-color: hsl(calc(0 + 30), 100%, 50%); /* 色相を30度上げる */
}

.box:hover {
  background-color: hsl(0, calc(100% - 20%), 50%); /* 彩度を20%下げる */
}

明度と彩度を同時に変化させる

.box:hover {
  background-color: hsl(0, calc(100% - 20%), calc(50% + 10%)); /* 彩度を20%下げ、明度を10%上げる */
}

これらのサンプルコードを参考に、さまざまな色の変化を表現してみてください。

CSSで色を動的に明るく・暗くするその他の方法

filter プロパティを使うと、さまざまなフィルター効果を要素に適用することができます。其中には、色を明るく・暗くする効果もあります。

.box {
  background-color: #f00;
  width: 100px;
  height: 100px;
}

.box:hover {
  filter: brightness(110%); /* 10%明るくする */
}

brightness() 関数以外にも、contrast() や saturate() などの関数を使って、色のコントラストや彩度を調整することができます。

@media クエリを使うと、デバイスや画面のサイズに合わせてスタイルを調整することができます。例えば、モバイルデバイスでは色を明るく、デスクトップでは色を暗くするといった設定ができます。

@media (max-width: 768px) {
  .box {
    background-color: #f00;
  }
}

@media (min-width: 769px) {
  .box {
    background-color: #ccc;
  }
}

この例では、画面幅が 768px 以下の場合は .box 要素の背景色が赤 (#f00)、769px 以上の場合は灰色 (#ccc) になります。

JavaScriptを使うと、より複雑な色の変化を表現することができます。例えば、スクロールに合わせて色を変化させたり、ボタンをクリックした時に色をアニメーションさせたりすることができます。

const box = document.querySelector('.box');

window.addEventListener('scroll', () => {
  const scrollTop = window.pageYOffset;
  const brightness = Math.min(100, scrollTop / 100);
  box.style.backgroundColor = `hsl(0, 100%, ${brightness}%)`;
});