色まわりのモダンCSSまとめ
カラートークン1つから派生色を作る方法、ライト／ダーク対応、コントラストの自動化を、目的別に並べたガイド。詳しいコードと対応状況は各記事を参照。
1つのブランド色から派生色を作る
- 黒・白・透明を混ぜて濃淡を作る: color-mix() で1つのブランド色からホバー用の濃い色・薄い背景色を作る
- 明るさ・彩度・色相を1つずつ動かす: 相対カラー構文で、色変数の明るさ・彩度・色相をチャンネルごとに調整する
- 透明度だけ変える一番短い書き方: alpha() でカラートークンの薄い背景色を作る
使い分けの目安は、手軽さなら color-mix()、くすませずに明るさだけ変えたいなら相対カラー構文、透明度だけなら alpha()。
混ぜ方・グラデーション
ライト／ダーク対応
コントラスト・アクセシビリティ
- contrast-color() でボタンの文字色を背景に合わせて自動で白か黒にする
- 画像が読み込めない時の alt テキストを contrast-color() で読めるようにする
- 背景色を「文字色」として使う時は conic-gradient(currentcolor) ＋ CanvasText で強制カラーモードに備える