カラーパターンを作成する

動的に構成可能なカラーパターンを確立する方法の基本的な概要

この投稿では、CSS で複数のカラーパターンを管理する方法について考えたいと思います。デモを試す

デモ

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

カスタム プロパティと calc() を使用してアクセス可能なカラーシステムを作成し、オーサリング エクスペリエンスを最小限に抑えながら、ユーザーの設定に適応するウェブページを作成します。ベースのブランドカラーから、2 つのテキスト カラー、4 つのサーフェス カラー、一致するシャドウのバリエーション システムを構築します。

このガイドでは、まず各カラーパターンのすべての色を事前に定義します。ページの変更には最後まで使用されません。

ブランド

多くの場合、ブランドカラーはすでに確立されており、16 進数または RGB で提供されています。この GUI チャレンジのベースブランド色は #0af です。まず、このカラーシステムの場合、16 進数値を hsl に変換する必要があります。

* {
  --brand: #0af;
  --brand: hsl(200 100% 50%);
}

ブランドカラーを 20% 暗くしたり明るくしたりするには、hsl カラー値の 3 つのチャネルを独自のカスタム プロパティに抽出する必要があります。

* {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;
}

CSS では、これらのカラー プロパティに対して演算を行うことができます。たとえば、calc(var(--brand-lightness) - 20%) を使用して明るさの値を 20% 減らすことができます。これは、CSS が hsl の彩度と明るさを調整することで、すべての色を同じ色相ファミリーに保つことができるため、配色を作成するうえで基本となります。

ライトモード

各カラーバリエーションは、対応するスキームでマークされます。この場合、各バリエーションに -light が追加されます。

ライトモードの最終結果のプレビュー

ブランド

ブランドの色から、計算なしで --brand-hue--brand-saturation--brand-lightness カスタム プロパティを hsl () 関数の中かっこでラップして再ビルドします。

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
}

テキストの色

次に、カラーパターンの基本としてテキストの色が必要です。ライトモードでは、テキストは非常に暗くする必要があります。次の色の明るさが 50% を下回っていることに注目してください。

* {
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
}

--text1-light は、明度 10% で非常に暗いため、100% の高い彩度を維持し、ブランドカラーが暗いダークネイビーから見えます。

--text2-light の場合、1 番目の色ほど暗くなく、セカンダリ カラーであるだけでなく、彩度もはるかに低くなっています。

サーフェスの色

サーフェスの色は、テキストが配置される背景、境界、その他の装飾的なサーフェスです。ライトモードでは、暗い色のテキストとは対照的に、明るい色になります。hsl で明るい色を作成するには、3 番目の明るさの値に高い割合の値を使用します。また、彩度を下げて、明るいグレーが色付きに見えすぎないようにします。

* {
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
}

4 つのサーフェス カラーが作成されました。装飾色には、:focus:hover などのインタラクティブな瞬間や、紙レイヤの外観を作成するために、より多くのバリエーションが必要になる傾向があるためです。このようなシナリオでは、ホバー時に --surface2-light--surface3-light に遷移すると、ホバーするとコントラストが高まります(明るさが 99% から 92% に暗くなります)。

カラーパターン内のシャドウは、それ以上のものではありませんが、効果にリアルな質感を加え、現実味のない黒ベースのシャドウから際立たせることができます。これを行うには、シャドウの色に色相カスタム プロパティを使用し、色相を少し彩度を上げても、非常に暗い色にします。基本的には、非常に暗く、わずかに青みがかったシャドウを作成します。

* {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

--surface-shadow-light は hsl 関数でラップされていません。これは、--shadow-strength 値が結合されて不透明度が作成され、CSS が計算を実行するためにこれらの部分を必要とするためです。詳しくは、ラジアル シャドウのセクションに進んでください。

明るい色をすべて一緒に

ライトの色がどのように作られているかを探す必要はありません。CSS の 1 か所にすべてあります。

* {
  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface-shadow-light: var(--brand-hue) 10% calc(var(--brand-lightness) / 5);
  --shadow-strength-light: .02;
}
ライトの色がすべて揃っている状態のスクリーンショット
CodePen のサンドボックス

ダークモード

ほとんどのブランドは、ダークテーマから始めるのではなく、通常は明るいメインテーマのバリエーションから始めます。一方、ユーザーは夜間など、さまざまなコンテキストでダークモードを選択することがよくあります。これらの要因から、ダークモードでは次の 2 つのことを念頭に置いています。

  1. 通常、ユーザーはこのテーマを使用するときに暗い場所にいるため、暗い場所でテストします。
  2. 色が強すぎるために画面が振動しない程度に、色の彩度を下げる必要があります。

ダークモードの最終結果のプレビュー

ブランド

ライトモードでは、3 つのブランドの hsl カラー チャンネル値が変更なく使用されていましたが、ダークモードでは使用されません。彩度は半分に、明るさは相対的に 50% 低下します。

* {
  --brand-dark: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 2)
    calc(var(--brand-lightness) / 1.5)
  );
}

テキストの色

ダークモードでは、テキストの色が明るくなります。次の色は明度の値が高く、白に近づきます。

* {
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
}

サーフェスの色

ダークモードでは、サーフェス色を暗くする必要があります。次の色は明度と彩度が低く、1 つ目のサーフェスが最も暗く 10% です。

* {
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
}

ダークモードでは、シャドウが非常に見えにくくなります。すでにかなり暗い画像をさらに暗くするのは難しいため、これは理にかなっています。その場合は --shadow-strength-dark が便利です。1 つの変数を変更することでシャドウを暗くできます。

* {
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}

シャドウの彩度も確認します。インターフェースを見ると、色はわかりますか?デベロッパー ツールから彩度を削除してみてください。どちらが好みですか?

暗い色がまとまっている

* {
  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5%  20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
}
暗い色のスクリーンショット
CodePen のサンドボックス

暗いテーマ

このカラーパターンは、明度と彩度を調整することに重点を置いています。色相が見えるように十分な彩度が必要ですが、コントラスト スコアはやや暗く、低コントラストにすることを目的としています。

暗いテーマの最終結果のプレビュー

ブランド

* {
  --brand-dim: hsl(
    var(--brand-hue)
    calc(var(--brand-saturation) / 1.25)
    calc(var(--brand-lightness) / 1.25)
  );
}

テキストの色

* {
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
}

サーフェスの色

* {
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
}

* {
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}

すべての色を同時に暗くする

* {
  --brand-dim: hsl(var(--brand-hue) calc(var(--brand-saturation) / 1.25) calc(var(--brand-lightness) / 1.25));
  --text1-dim: hsl(var(--brand-hue) 15% 75%);
  --text2-dim: hsl(var(--brand-hue) 10% 61%);
  --surface1-dim: hsl(var(--brand-hue) 10% 20%);
  --surface2-dim: hsl(var(--brand-hue) 10% 25%);
  --surface3-dim: hsl(var(--brand-hue) 5%  30%);
  --surface4-dim: hsl(var(--brand-hue) 5% 35%);
  --surface-shadow-dim: var(--brand-hue) 30% 13%;
  --shadow-strength-dim: .2;
}
暗い色がすべて表示されているスクリーンショット
CodePen のサンドボックス

アクセシブルな色

暗いテキスト色セットの最小明るさが 65%、暗いサーフェスの最大明るさが 25% であることに注目してください。つまり、明るさの 40% が余裕として確保されます。ライトモードでは、55% の余白があります。テキストとサーフェスの色の明るさの差を 40~50% 程度に保つと、色のコントラスト比を高く保つことができます。また、スコアが低い場合に調整する微妙なレバーにもなります。

これを「パスバンプ バンプ」と呼びます。これは、ツールが合格であることを示すまで、明度の値をバンプする操作です。

Shift+下矢印を押して、合格するまで明るさを下げてコントラストを上げます

このチャレンジで作成された各テーマは、コントラスト スコアに合格しています。暗い配色はコントラストが最も低いですが、最小要件を満たしています。チーム内の他のユーザーが適切なコントラストのある色を使用できるようにするには、サーフェス カラーとユーザー補助対応のテキスト色を組み合わせたクラス名を作成することをおすすめします。

.surface1 {
  background-color: var(--surface1);
  color: var(--text2);
}

.surface2 {
  background-color: var(--surface2);
  color: var(--text2);
}

.surface3 {
  background-color: var(--surface3);
  color: var(--text1);
}

.surface4 {
  background-color: var(--surface4);
  color: var(--text1);
}
薄暗いサーフェスとテキストのペアのスクリーンショット
VisBug の薄暗いサーフェスとテキストのペアのスクリーンショット

ラドシャドウ

テーマは、.rad-shadow というユーティリティ クラスを使用します。このシャドウは、このスムーズ シャドウツールで生成されました。生成されたスニペットを取得し、独自の色と不透明度の計算でカスタマイズしました。これは、各カラーパターン内で調整できるシャドウを作成するためです。

各シャドウを並べて配置する

そのために、調整するカラーパターンごとに 2 つの変数(シャドウの色とシャドウの強さ)を作成しました。色は彩度と暗さを調整するためのもので、強度はダーク カラーパターンでシャドウの強さを簡単に上げるためのものです。最終的な結果は次のようになります。

:root {
  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
}

.rad-shadow {
  box-shadow:
    0 2.8px 2.2px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 6.7px 5.3px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .01)),
    0 12.5px 10px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 22.3px 17.9px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .02)),
    0 41.8px 33.4px hsl(var(--surface-shadow) / calc(var(--shadow-strength) + .03)),
    0 100px 80px hsl(var(--surface-shadow) / var(--shadow-strength))
  ;
}

色パターンでシャドウをさらに進化させる場合は、光の方向がデザインのすべてのシャドウで同じになるように、シャドウ角度もデザイン トークンの定数にします。

カラーパターンの使用

色の事前定義が完了したら、次は色をスキームに依存しないプロパティにします。つまり、このカラーパターン プロジェクト内の CSS 作成者は、特定のカラーパターンの値にアクセスする必要はほとんどありません。テーマに沿ったデザインを簡単に作成できるようにしたい。

そのためには、汎用カスタム プロパティのみを使用してカラーパターンを使用する必要があります。これについては後で定義します。これにより、デザイン変数を使用するユーザーは、現在設定されている配色を気にすることなく、サーフェスとテキストの色を使用できます。color: var(--text1-light) の代わりに color: var(--text1) を使用します。色の適応とピボットはすべて、CSS のより上位レベルで行われます。

詳しく説明すると、次のコードブロックのライトモードの接続スタイルは、汎用カスタム プロパティをライトモード固有の色に接続します。これで、var(--brand) のすべての使用でライト ブランドカラーが使用されるようになります。

ライトモード(自動)

:root {
  color-scheme: light;
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

サイトがライトモードになりました。成功の瞬間は、とても楽しいものです。 他のカラーパターンのコンテキストで、事前定義された色を使用する方法をいくつか見てみましょう。

ダークモード(自動)

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --text2: var(--text2-dark);
    --surface1: var(--surface1-dark);
    --surface2: var(--surface2-dark);
    --surface3: var(--surface3-dark);
    --surface4: var(--surface4-dark);
    --surface-shadow: var(--surface-shadow-dark);
    --shadow-strength: var(--shadow-strength-dark);
  }
}

ライトモード

[color-scheme="light"] {
  color-scheme: light;

  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --text2: var(--text2-light);
  --surface1: var(--surface1-light);
  --surface2: var(--surface2-light);
  --surface3: var(--surface3-light);
  --surface4: var(--surface4-light);
  --surface-shadow: var(--surface-shadow-light);
  --shadow-strength: var(--shadow-strength-light);
}

ダークモード

[color-scheme="dark"] {
  color-scheme: dark;

  --brand: var(--brand-dark);
  --text1: var(--text1-dark);
  --text2: var(--text2-dark);
  --surface1: var(--surface1-dark);
  --surface2: var(--surface2-dark);
  --surface3: var(--surface3-dark);
  --surface4: var(--surface4-dark);
  --surface-shadow: var(--surface-shadow-dark);
  --shadow-strength: var(--shadow-strength-dark);
}

暗いテーマ

[color-scheme="dim"] {
  color-scheme: dark;

  --brand: var(--brand-dim);
  --text1: var(--text1-dim);
  --text2: var(--text2-dim);
  --surface1: var(--surface1-dim);
  --surface2: var(--surface2-dim);
  --surface3: var(--surface3-dim);
  --surface4: var(--surface4-dim);
  --surface-shadow: var(--surface-shadow-dim);
  --shadow-strength: var(--shadow-strength-dim);
}

この時点で、作成者は必要に応じて提供されているカラーパターンのジェネリクスを自由に使用できるため、テーマについて心配する必要はありません。

まとめ

私の方法をご覧になったところで、あなたならどうしますか?🙂

アプローチを多様化し、ウェブで構築するすべての方法を学びましょう。Codepen を作成するか、独自のデモをホストして、そのデモをツイートしてください。デモを以下のコミュニティ リミックスのセクションに追加します。

ソース

コミュニティ リミックス - @chris-kruining が、no-preferencemoreless の色相スライダー、ステータス色、コントラスト モードを追加しました。デモ