コハム

Webクリエイターのコハムが提供する、Web制作に役立つ情報をまとめたブログです。

トップ > CSS > Sassは使わずカラーマネージメント：色の明暗をピュアCSSでコントロールする方法

Sassは使わずカラーマネージメント：色の明暗をピュアCSSでコントロールする方法

CSS

How to Lighten or Darken a Color with Pure CSS

記事は上記記事を意訳したものです。

※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。

色を明るくしたり暗くしたりすることは、UIデザインでよくある使用例です。ユーザーがボタンにホバーしたときに背景色を暗くしたり、アラートの背景にテキスト色のわずかに明るい色合いを使用したりすることがあります。

この記事では、通常のアプローチから始め、外部ツールへの依存を減らし、ネイティブの色形式を使用して目的の効果を達成する方法を見ていきます。

では、始めましょう。

CSSで色を明るくしたり暗くしたりする通常のアプローチ

色を暗くしたり明るくしたりする従来のアプローチの1つは、SASSやSCSSなどのCSSプリプロセッサを使用することです。例えば、SCSSにはlightenとdarkenという関数があり、色とパーセンテージ（明るくまたは暗くする割合）の2つの引数を取ります。

.danger-alert {
  color: red;
  // 同じ色相の明るい背景色
  background-color: lighten(red, 40%);
}

button:hover {
  // ホバー時に背景色を暗くする
  background-color: darken(#eee, 10%);
}

このアプローチは明らかに機能し、これらのプリプロセッサをすでに使用している場合は素晴らしいです。

もう1つのアプローチは、このようなオンラインツールを使用して、同じ色のより暗い変種を手動で見つけ、それをCSSにハードコードすることです。

これらのツールの仕組みは次のとおりです：下の入力ボックスに色のHEX値を入力すると、その色の10バージョンが生成され、それぞれが前のバージョンよりも5%暗くなります。

CSSでネイティブに色の明るさと輝度を変更する

より良いアプローチは、他の形式よりもHSL色形式を使用することです。HSL色形式は、人間にとってより直感的な方法で色を表現します。

HSL形式は3つのパラメータを取ります（不透明度を含めると4つ）：

  • H（色相）：どの色相を使用するか（色相環の0〜359度の範囲）

  • S（彩度）：その色にどれだけの色相を含めるか（0%〜100%の間）
  • L（明度）：色をどれだけ明るくまたは暗くしたいか（0%は完全に暗い、または黒、50%：純粋な色、100%：純粋な白）
  • アルファ（不透明度）：色をどれだけ透明にしたいか（オプション）

色の強度を簡単に調整できることがお分かりいただけたと思います。特定の色相と彩度を選択したら、色の明るいバージョンや暗いバージョンを作成するのは簡単です。3番目のパラメータ（明度）を調整するだけです。

より明るい背景が必要ですか？明度を上げるだけです。より暗い色合いを探していますか？明度を下げます。それだけ簡単です！

例えば、これらの5つの赤色の色合いがHSL形式では明確で理解しやすい値を持っているのに対し、HEX形式では値が完全に予測不可能になる可能性があることを観察してください。

button {
  color: hsl(230, 100%, 50%); /* テキスト色 */
  background-color: hsl(230, 100%, 80%); /* より明るい背景 */
}

CSSでホバー時に色を暗くする

HTMLに明るい赤色のdivがあるとします：

<div class="red"></div>

.red {
    height: 300px;
    width: 300px;
    background-color: hsl(0, 100%, 70%); /* 明るい赤 */
}

カーソルでホバーしたときに背景色を暗くしたい場合、HSL色形式の3番目のパラメータ（明度）を70%から40%に下げるだけです。

.red {
    height: 300px;
    width: 300px;
    background-color: hsl(0, 100%, 70%);
}
/* ホバー時に暗くする */
.red:hover{
    background-color: hsl(0, 100%, 30%);
}

よりスムーズな遷移を行うには、0.5秒のトランジション期間を追加します。

CSSで色を明るくする

CSSで色を暗くするのと同様に、明るくするのも簡単です。HSL色形式の「明度」パラメータを上げるだけです。

/* これから */
div {
  background-color: hsl(0, 100%, 30%);
}

/* これへ */
div:hover {
  background-color: hsl(0, 100%, 60%);
}

CSSで色を明るくしたり暗くしたりするもう1つのアプローチは、CSSの明度フィルターを使用することです。以下は、ホバー時に色を暗くしたり明るくしたりするために上記の例を変更する方法です：

/* これから */
div {
  background-color: hsl(0, 100%, 60%);
}

/* これへ */
div:hover {
  filter: brightness(70%);
}

このコード行は、ホバー時に要素の明度をその最大値の70%に制限します。

CSSでHSLを使用して色をフェードする

HSL色形式の2番目のパラメータである彩度も、UIデザインで非常に便利なツールです。

彩度を上げたり下げたりすることで、要素の色の鮮やかさを変更できます。そして、明度パラメータと組み合わせて調整すると、色の値の設定が驚くほど直感的になります。

例えば、彩度を下げて明度を上げることで、無効なボタンの外観を作成できます。

<div class="container">
    <button>通常のボタン</button>
    <button disabled>無効なボタン</button>
</div>

/* 基本的なスタイルは省略 */

/* チュートリアルのスタイル 👇 */
button {
    background: hsl(240, 100%, 60%);
}

/* 彩度を下げ、明度を上げる */
button:disabled {
    background: hsl(240, 20%, 80%);
}

FAQ

CSSを使用して色を明るくしたり暗くしたりするにはどうすればよいですか？

CSSで色を明るくしたり暗くしたりするには、HSL色形式の「明度」パラメータを調整します。このパラメータは0%（黒）から100%（白）の範囲です。明度の値を増やすと色が明るくなり、減らすと色が暗くなります。 色を暗くしたり明るくしたりする他のアプローチには、SCSS、SCSSまたはLESSなどのCSSプリプロセッサに組み込まれているlightenおよびdarken関数の使用が含まれます。

色の明るさを調整する際に、RGBよりもHSLを使用することの利点は何ですか？

HSLとRGBはどちらも色の明るさを変更するのに使用できますが、HSLは特に明度を調整する際により直感的なアプローチを提供します。「明度」パラメータに直接焦点を当てることで、色をどれだけ明るくまたは暗くするかをより細かく制御でき、デザイン内の色の視覚的な関係を維持しやすくなります。

CSSでホバー時に色を暗くするにはどうすればよいですか？

ホバー時に色を暗くするには、まず要素の宣言でHSL形式のベース色を定義します。次に、:hover疑似クラスのプロパティ宣言で、colorまたはbackground-colorという名前のプロパティを宣言し、HSL色パラメータを使用します。これらの宣言で、3番目のパラメータ（明度）の値を下げます。

©コハム