役割で色を持つ
色に「赤」ではなく「エラー」と名前を付けておくと、テーマを変えても部品側は1行も変わりません。
図の中身を文字で読む
- 3層で持つと、テーマ切り替えが定義側だけで済む
- 1. 値そのもの（プリミティブ） 2. 役割（セマンティック） 3. 部品（コンポーネント）
- --amber-500: #a8804a --color-accent --button-bg
- 参照してよいのは次の層だけ テーマで差し替えるのはここ 部品だけの例外を許す層
- 同じ役割名のまま、明暗で値が入れ替わる
- 明るいテーマ 暗いテーマ
- 申し込む 戻る 申し込む 戻る
- 本文の文字 本文の文字
- 補助的な文字 補助的な文字
- 部品側のコードは1行も変わらない。 純黒と純白は使わない。彩度も落とす。
ひと目で#
- セマンティックカラー
- 「赤」ではなく「エラー」と名づけた色
- ブランドカラー
- 識別のための色。長いあいだ変えない
- アクセントカラー
- もっとも強く、もっとも少ない面積で使う色。1色に固定する
- ニュートラルカラー
- 地と文字。画面の面積の9割以上を占める
- ダークモード
- 利用者の設定に応じた明暗の切り替え
使い分け#
| こうしたい | 使う色 |
|---|---|
| 押せるものを見分けさせたい | アクセント色。押せるものにだけ使う |
| エラー、警告、成功を伝えたい | セマンティックカラーに、アイコンと文言を添える |
| ブランドを識別させたい | ブランドカラー。ロゴと大きな面 |
| 画面全体の空気を決めたい | ニュートラルに色相を数パーセント含ませる |
| 暗いテーマに対応したい | 役割名はそのまま、定義側の値を差し替える |
間違えやすいところ#
- 飾りにアクセント色を使う押せない要素が押せそうに見える
- 章ごとにアクセント色を変える読者が学んだ規則が効かなくなる
- 見た目で名付ける（
--blue-button-bg）テーマを変えた瞬間に名前が嘘になる - 部品からプリミティブ（
--gray-500）を直接参照するテーマの切り替えができなくなる - ダークモードで色を単純に反転する彩度と階層の設計が崩れる
- 純黒（
#000）と純白を使うにじんで見える。#121212前後にする - ダークモードのコントラストを測らない明るい側で満たしていても、暗い側では満たさない組み合わせがある
ダークモードの3点#
- 純黒を避ける。背景は
#121212前後、文字は純白より少し落とす - 彩度を落とす。暗い背景では高彩度がにじむ
- 階層が逆転する。影ではなく、手前の面ほど明るくする
図の中身を文字で読む
- 暗い地の階層は、影ではなく明度で作る
- ✕ 影で浮かせる ○ 手前の面ほど明るく
- カードのつもり いちばん手前のカード
- 地もカードも #121212 面が明るい＝近い、と読める
- 影は暗い地に沈む。カードの輪郭はどこにもない 地 #121212 → 面 #1e1e1e → 手前 #262626
- 純黒と純白は使わない。背景は #121212 前後、文字は純白より少し落とす。
- 彩度も落とす。明るい地の高彩度をそのまま持ち込むと、暗い地の上でにじむ。
直す例#
架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。
例として、引き継いだ CSS に、警告の赤が3種類ありました。#c0392b が12箇所、#e74c3c が8箇所、red が3箇所。どれも同じ意味のつもりで書かれています。暗い表示に対応しようとした瞬間、2つは地に沈み、1つだけ残りました。値で色を管理していると、切り替える場所が散らばります。
役割名に寄せます。エラーは --color-danger、リンクは --color-accent-text、罫と図形は --color-accent。部品側は役割名だけを見て、16進数は :root と @media (prefers-color-scheme: dark) の2か所にしか置きません。名前が同じまま、値だけ入れ替わる状態にします。
暗い側では反転させません。地は純黒ではなく #121212 前後、彩度は落とし、手前の面ほど明るくします。影は暗い地では見えないので、階層は明度で作ります。
確認する#
- 部品の CSS に16進数の直書きが残っていない
- 明るい側と暗い側の両方で、リンク色を測り直している
- 暗い側の階層が、影ではなく面の明度差で作られている
使えるパターン#
この話が要る場面#
このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。
色を反転させない。役割ごとの変数を2組持ち、暗い地では彩度を10〜20%落とす。
このコードで動いている見本です
暗い地では影が見えない。影の代わりに面の明度を上げて手前を表す。
このコードで動いている見本です
値ではなく役割で持つ。--color-brand-500 ではなく --color-text-muted や --color-surface。
このコードで動いている見本です
色だけで区別しない。アイコンか文言を必ず併用する。色は補助と考える。
このコードで動いている見本です
この場面のほかの困り事と、そのまま貼れる部品は色を決めるにまとめてある。逆引きには全188件。
役割を試す#
この値は作業台で決められます。和文の予約ページに載せて、幅と明暗を替えて確かめてから CSS を持ち帰る: 色と階段
地・文字・アクセント・エラーの4役割を選び、カード上で組み合わせを確かめます。
見出し
本文テキスト。地と文字のコントラストを確かめます。
リンクとアクセント
入力内容を確認してください
この道具は JavaScript で動きます。