動的で構成可能なカラーパターンを確立する方法の基本的な概要
この記事では、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 の色ほど暗くありません。これは、第 2 の色としては適切です。また、彩度も大幅に低くなっています。
サーフェスの色
サーフェス カラーは、テキストが配置される背景、境界線、その他の装飾的なサーフェスです。ライトモードでは、テキストの色が暗い色であるのに対し、これらの色は明るい色です。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%);
}
装飾色は :focus や :hover などのインタラクティブな場面や、紙のレイヤの見た目を作成するために、バリエーションが必要になる傾向があるため、4 つのサーフェス色が作成されました。このようなシナリオでは、ホバー時に --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 は計算を実行するためにピースを必要とします。詳しくは、rad shadow セクションをご覧ください。
明るい色をすべて表示
明るい色の作り方をあちこち探す必要はありません。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;
}
ダークモード
ほとんどのブランドはダークテーマから始まりません。ダークテーマは、通常はライトテーマであるプライマリ テーマのバリエーションです。一方、ユーザーは夜間など、さまざまな状況でダークモードを選択することがよくあります。これらの要因から、ダークテーマでは次の 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;
}
ダークモード
このカラーパターンは、明度と彩度を調整することを目的としています。色相が認識できる程度の彩度を維持しつつ、暗く低コントラストにする意図があるため、コントラスト スコアをぎりぎりクリアする程度にする必要があります。
ブランド
* {
--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;
}
アクセシブルな色
暗いテキストの色セットの最小明度が 65% で、暗いサーフェスの最大明度が 25% であることに注目してください。この 2 つの間には 40% の明るさの余裕があります。ライトモードでは、ライトモードの余白は 55% です。テキストとサーフェスの色の明度の差を 40 ～ 50% 程度に保つと、色のコントラスト比を高く保つことができます。また、スコアが低い場合に調整する微妙なレバーにもなります。
私はこれを「bump bump til ya pass」と呼んでいます。これは、ツールが合格を示してくれるまで明度値を調整する操作です。
このチャレンジで作成された各テーマは、コントラスト スコアに合格しています。暗いカラースキームはコントラストが最も低いですが、それでも最小要件を満たしています。チームの他のメンバーがコントラストの強い色を使いやすくするために、サーフェス色とアクセシブルなテキスト色を組み合わせたクラス名を作成することをおすすめします。
.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);
}
Rad Shadow
テーマは .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-preference、more、less に色相スライダー、ステータス カラー、コントラスト モードを追加しました。デモをご覧ください。