動的で設定可能なカラーパターンを確立する方法の基本的な概要
この投稿では、複数のカラーパターンを管理する方法についての考え方を共有します。 使用します。デモをお試しください。
<ph type="x-smartling-placeholder">動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。
概要
カスタム プロパティと calc() を使用して、アクセス可能なカラーシステムを構築します。
作成プロセスを維持しながら、ユーザーの好みに適応できるウェブページを作成
最小限に抑える必要があります。ベースとなるブランドカラーから
テキスト 2 色、サーフェス 4 色、それに合わせたシャドウ。
このガイドではまず、各カラーパターンのすべての色を定義します。 あります。ページの変更が終わるまでは行われません。
ブランド
多くの場合、ブランドカラーは決まっており、
hex または
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% 減らすことができます。これは、責任ある AI の使用を
調整してすべての色を同じ色相ファミリーに維持できるため、
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 番目の色ほど暗くなく、良い色です
セカンダリカラーになり 彩度もかなり低くなります
サーフェスの色
サーフェスの色は、背景、境界、その他の装飾的なサーフェスです。 配置する必要がありますライトテーマでは、これらはライトの色です。 反対に 文字の色は暗くなりますHDR で明るい色を作るには 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%、暗くします）。
影
カラーパターン内のシャドウは際立ったものですが、リアルな雰囲気を演出します 非現実的な黒ベースのシャドウよりも際立たせることができます。タスク この場合、シャドウの色には hue カスタム プロパティを使用します。つまり、 暗くなっています。基本的には、非常に 少し青いシャドウを付けます
* {
--surface-shadow-light: var(--brand-hue) 10% 20%;
--shadow-strength-light: .02;
}
--surface-shadow-light が hsl 関数でラップされていない。これは、
--shadow-strength 値を組み合わせて不透明度と CSS のニーズを作成します
計算を行うために必要です。rad シャドウにスキップ
セクションをご覧ください。
色の組み合わせ
光の色の作り方を調べる必要はありません。 すべて 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;
}
ダークモード
ほとんどのブランドはダークモードで始めず 通常は明るいテーマにしますこれに対して、ユーザーは多くのユーザーが Google Chat の 夜間などさまざまな状況で 予測できるようになりますこれらの要因から、私は 以下の点にご注意ください。
- 通常、このテーマの使用中、ユーザーは暗い場所にいることになるため、 ダークモードです。
- 画面が振動しないように トレーニングできます。
ブランド
ライトテーマでは、ブランドの 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%);
}
サーフェスの色
ダークモードでは、サーフェスの色を暗くする必要があります。以下の色については、 明度と彩度は低く、最初のサーフェスは 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 は、画像を暗くできるため非常に便利です。
シャドウを付けることができます。
* {
--surface-shadow-dark: var(--brand-hue) 50% 3%;
--shadow-strength-dark: .8;
}
シャドウの彩度も確認します。この色は どうなるでしょうか画面の彩度を外して、 devtools どちらをご希望ですか？
暗い色がまとまっている
* {
--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% です。これは明るさの 40% に相当します 間に合います。ライトテーマでは 55% の呼吸スペースがあります オンにします。テキストとサーフェスの色の明度の違いを維持する 40 ～ 50% 程度にすることで、色のコントラスト比を高く維持しながら、 スコアが低い場合に調整します。
私はこれを「パスオーバーまでバンプバンプ」と 呼んでいます 合格と表示されるまで明度の値を使用します。
<ph type="x-smartling-placeholder">このチャレンジで作成された各テーマは、コントラスト スコアに合格しています。暗めのカラーパターンはコントラストが最も低くなりますが、最小要件を満たしています。チームの他のメンバーがコントラストの強い色を使用できるよう、サーフェスの色とアクセス可能なテキストの色を組み合わせたクラス名を作成することをおすすめします。
.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 というユーティリティ クラスを使用しています。この影が生成されました
非常に役に立っています。
できます。生成されたスニペットを使って
独自の色でカスタマイズし
不透明度の計算に使用されます。これは、調整できる影を作るためです。
同じ色で表示されます
そのために、調整するカラーパターンごとに 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 のステータス カラーとコントラスト モード:
demo