ダークモード配色

Dark Mode Palette

色ひとつから50〜950のランプを作り、それを反転させたダークのランプを組にして、対応するトークン同士のコントラストを保ちます。

明るいスケールを鏡写しにしてダークのスケールを導きます。50が950に、100が900に、という具合です。トークンの名前が持つ約束を保てる導き方はこれだけで、ライトモードでWCAGを通った組はダークモードでも同じ比で通り、そのスケールに合わせて書かれた部品は変更が要りません。これは濃淡スケール生成と同じページを、ダークのタブで開いたものです。

🔒 ブラウザの中だけで動きますdark-modepalettethemea11y

基準の色

色

色相と彩度がランプの種になり、明度はどの段階に「あなたが選んだ色」の印が付くかを決めます。

ランプ

実測カーブへの寄せ具合: 100%0 なら 0.97 から 0.25 までの直線で、間隔は均等ですが見慣れません。100% なら、みんながすでに頭の中に持っているカーブと同じになります。色相の移動: 0°Tailwind の系統そのものが色相を動かします。赤は 50 段階の 17° から 950 段階の 26° まで動きます。暗い赤は少し暖かいほうがよく見えるからです。最大彩度: 基準の色から

すべての段階を sRGB 内に収めるオフにすると広色域の段階をそのまま残します。P3 ディスプレイには出せますが、16 進数では表せません。

各段階の明度の目標値はここで決めたものではなく、インストール済みの Tailwind パッケージから測った有彩色の系統の平均です。

ダークモード

ダークのスケールを作る

方式

彩度の減衰: 85%暗い面の上の鮮やかな色は光ってちらつきます。広く塗る色なら、彩度を下げておくのが手堅い判断です。

50 段階が 950 に、100 が 900 に、という具合に入れ替わります。トークン名の意味はそのままで、500 は変わらず中間トーンです。このスケールに合わせて書いたコンポーネントは何も直す必要がありません。

ライト

100

200

300

400

500

600

700

800

900

950

ダーク

100

200

300

400

500

600

700

800

900

950

反転させる理由: トークンの組み合わせのコントラストが保たれます

900 の上の 50: ライト 8.93 · ダーク 12.73
800 の上の 100: ライト 6.68 · ダーク 7.19
950 の上の 200: ライト 11.16 · ダーク 7.19

トークン名の意味がそのままなので、このスケールに合わせて書いたコンポーネントは何も直す必要がありません。

書き出し

接頭辞

:root {
  --brand-50: oklch(97.72% 0.0107 259.81);
  --brand-100: oklch(95.04% 0.0236 259.81);
  --brand-200: oklch(90.55% 0.0458 259.81);
  --brand-300: oklch(84.05% 0.0793 259.81);
  --brand-400: oklch(75.35% 0.1267 259.81);
  --brand-500: oklch(68.27% 0.1677 259.81);
  --brand-600: oklch(59.78% 0.1861 259.81);
  --brand-700: oklch(51.49% 0.1655 259.81);
  --brand-800: oklch(44.61% 0.1391 259.81);
  --brand-900: oklch(39.46% 0.1128 259.81);
  --brand-950: oklch(27.79% 0.0752 259.81);
}

@media (prefers-color-scheme: dark) {
  :root {
    --brand-50: oklch(27.79% 0.0639 259.81);
    --brand-100: oklch(39.46% 0.0959 259.81);
    --brand-200: oklch(44.61% 0.1183 259.81);
    --brand-300: oklch(51.49% 0.1406 259.81);
    --brand-400: oklch(59.78% 0.1582 259.81);
    --brand-500: oklch(68.27% 0.1425 259.81);
    --brand-600: oklch(75.35% 0.1077 259.81);
    --brand-700: oklch(84.05% 0.0674 259.81);
    --brand-800: oklch(90.55% 0.0389 259.81);
    --brand-900: oklch(95.04% 0.0201 259.81);
    --brand-950: oklch(97.72% 0.0091 259.81);
  }
}

ひとつの色相のランプではなく複数の色相が要るときは、配色パレット生成が調和のとれた配色を作ります。ここで出た色にいちばん近い Tailwind のトークンを探すなら、近い Tailwind カラー検索が ΔE で測ってくれます。

使い方

基準の色を入れます
色はひとつです。先に明るいランプを組み立て、そこからダークのランプを導くので、両方が同じ種から出てきます。別々に保守することにはなりません。
方式を選びます
既定は鏡写しで、コントラストの根拠があるのもこれです。暗い側にずらす方式は各段を3つ下へ動かすもので、順序が保たれるので明から暗へのグラデーションが反転しませんが、いちばん暗い段を失います。鏡写しして落ち着かせる方式は、鏡写しに加えて彩度をさらに下げます。
広い塗りには彩度を抑えます
暗い面の上の彩度の高い色は光って揺れて見え、面積が広いほどひどくなります。彩度を下げるのが手堅い判断です。小さなアクセントと文字にしか使わないスケールなら、100%近くのままで構いません。
検証パネルを読みます
鏡写しが有効なら、3組のトークンのWCAG比を両モードで並べて出します。主張するのではなく、目の前で確かめられる形にしたものです。
2つのスケールを一度に書き出します
CSS形式では明るいスケールを`:root`に、ダークのスケールを`prefers-color-scheme: dark`のブロックの中に出すので、テーマ全体が1回の貼り付けで済みます。

よくある質問

手元にある明るいパレットを貼り付けられますか。

ひとまとまりとしては貼り付けられません。このページは色ひとつを受け取って両方のランプを組み立てるので、手で調整した段を持つ既存のパレットを1色ずつ入れても生き残りません。得られるのは規則正しい11段であって、あなたの11段ではありません。規則正しさより既存のパレットのほうが大事なら、トークンをひとつずつ変換して、組ごとにコントラスト比チェッカーで確かめてください。

鏡写しはコントラストを厳密に保ちますか。

近い値は保ちますが、厳密には保ちません。ランプはOKLCHの明度について対称ですが、WCAGのコントラストは相対輝度で計算され、それは明度の線形な関数ではありません。だから比は互いに近い値になり、同じにはなりません。検証パネルが両方の数字を出すので、主張を信じる代わりに、自分の色でその差を見られます。

ダークの背景に純黒を使うべきですか。

たいていは使わないほうがよいです。純黒に明るい文字を載せるとコントラストは最大になりますが、液晶ではそこで生じるにじみのせいで、小さな文字はかえって読みにくくなります。ここのダークの帯を非常に暗い灰色の上でプレビューしているのはそのためです。真の黒が実際に何かを買うのは、電力の面で有機ELのスマートフォンの場合だけです。