カラーピッカー

各形式と、それぞれが適した場面

HEXとrgb()は同じものを別の書き方で表したもので、ディスプレイが発光させる3つのチャンネル値です。正確でどこでも通じますが、ある色が別の色の隣でどう見えるかについては何も教えてくれません。

hsl()は同じ情報を色相、彩度、明度に並べ替えたもので、考えやすく（色相を回して残りはそのままにする）、CSSでパレットを作る標準的な方法になったのはそのためです。hsv()は、多くのグラフィックアプリのカラーピッカーで使われる兄弟分です。

まだ知らないなら覚えておく価値があるのがoklch()です。cmyk()は参考として載せていますが、おおよその値として扱ってください。実際の変換はインク、用紙、出力プロファイルによって変わるからです。ここでの値は標準的な計算式によるもので、大まかな目安には役立ちますが、印刷所に入稿する値としては使えません。

OKLCHが違う理由

HSLの明度はチャンネルの幾何学的な平均であって、色がどれだけ明るく見えるかの尺度ではありません。純粋な黄色と純粋な青はどちらもHSLでは明度50%ですが、目には一方がほぼ白、もう一方がほぼ黒に見えます。そのため、HSLの明度を一定にして作ったパレットはどれもムラが出て、見た目が整うまで1色ずつ手で直すことになります。

OKLCHは知覚的な色空間であるOklabに基づいており、数値上の等しい間隔が、知覚上もおおよそ等しい違いに対応します。色相をまたいで明度を一定にすれば本当に同じ明るさに見え、明度を等間隔に変えれば均一なグラデーションになります。これが、ティントやシェードの生成、アクセシブルな色の組み合わせの作成、そしてRGBで混ぜると中間に現れる濁った灰色なしに2色の間を補間するのに役立つ理由です。

注意点が1つあります。OKLCHはsRGBの色域外の色も表せ、そうした色は一般的な画面ではクリップされて表示されます。これが現れるのは極端な明度で彩度が高い場合で、2つの異なるOKLCH値が同じ色で表示されるという形で影響が出ます。

コントラスト比の読み方

コントラストはWCAG 2の式で計算しています。sRGBのチャンネルを線形化して各色の相対輝度を求め、明るいほうに0.05を足したものを暗いほうに0.05を足したもので割ります。結果は、同じ2色の1:1から、白地に黒の21:1までの範囲になります。

基準値は、AAレベルで通常の本文テキストが4.5:1、大きな文字（おおよそ24px、太字なら19px）とUIコンポーネント、意味を持つグラフィックが3:1、AAAレベルが7:1です。白と黒の両方に対する比を表示しているのは、どちらが必要かはその色を何の上に置くかで決まり、白の上で基準を満たさない色が、黒の上では余裕で満たすことも多いからです。

この式には知られた弱点があり、数値だけを答えとみなさないほうがよいでしょう。暗い背景に明るい文字を置く場合のコントラストを系統的に高く見積もるため、数値上は合格なのに読みづらいダークテーマがあります。また、大きな文字の基準1つを除けば文字の太さや大きさを考慮しないので、合格していても極細の書体は読むのに苦労することがあります。後継の指標であるAPCAはこの両方に対処していますが、まだガイドラインの要件にはなっていません。比率を満たしたうえで、実際に目で見て確かめてください。

アルファと8桁のHEX

HEXは4つ目のチャンネルとしてアルファを持てます。完全な形は#RRGGBBAA、短縮形は#RGBAです。どちらも現在のすべてのブラウザが対応しており、ここでも受け付けます。

これには落とし穴が2つあります。1つ目はチャンネルの順序です。Androidなど一部のプラットフォームはアルファを先頭に置いて#AARRGGBBと書くため、そうしたツールからコピーした値をCSSに貼ると、エラーではなく自信満々に間違った色になります。2つ目はアルファが16進数である点で、不透明度50%は50ではなく80です。最新のrgb(0 0 0 / 50%)という構文なら計算自体が不要で、半年後に読み返してもわかりやすくなります。

色の値が実際に表しているもの

16進数の3つ組は色そのものではなく、ディスプレイへの指示です。#CC0000は「赤チャンネルを最大の80%で、ほかをゼロで光らせよ」という意味であり、見る人が何を見るかは、パネル、そのキャリブレーション、周囲の明るさ、そしてその数値がどの色空間として解釈されるかによって決まります。

断りがなければ、その色空間はsRGBです。1996年に当時のCRTモニターを記述するために標準化され、Webが全員で共有できる前提を1つ必要としたために定着しました。最近のスマートフォンやノートパソコンの画面はsRGBより広い範囲を再現できるので、Display P3のタグが付いた画像は、同じ数値をsRGBとして解釈した場合より鮮やかに見えます。

もう1つの微妙な点が数値の中に隠れています。sRGBは線形ではありません。値128は255の半分の明るさではなく、符号化にガンマ曲線が入っていて、人間の視覚がより敏感な暗部に多くの精度を割り当てているからです。だから2つの16進数をチャンネルごとに平均すると、同じ色を線形の空間で混ぜたときより濁った結果になり、コントラストの計算式が演算の前にチャンネルを線形化しているのもそのためです。

1色から使えるパレットを組み立てる

多くのUIパレットは、いくつかの色相をそれぞれ複数の明度段階で表したものです。背景、控えめな面、境界線、抑えた文字色、しっかりした主色、そしてホバーとアクティブ用の暗い色が1〜2段階。1つの色相につき9〜11段階がよく選ばれるのは、1つの定義でライトテーマとダークテーマの両方をまかなえるからです。

うまくいく方法は、各段階の知覚的な明度を色相をまたいで固定し、彩度のほうを変えることです。青の500、緑の500、赤の500は、ページ上で同じ重さに見えるべきです。どれか1つが飛び出していれば、そのスケールは使われるあらゆる場所でちぐはぐに見えます。OKLCHでこれを行えば数値が仕事をしてくれますが、HSLで行えば1色ずつ目で直すことになります。

彩度は端に向かって落としていく必要がたいていあります。非常に明るい色と非常に暗い色は、sRGBの色域内では高い彩度を保てないため、彩度を一定にしたスケールは両端でクリップし、隣り合う2段階が同じ色で表示されてしまいます。

色だけが伝達手段ではない

男性のおよそ12人に1人、女性のおよそ200人に1人が何らかの色覚特性を持ち、最も多いのは赤と緑の区別がつきにくいものです。赤と緑だけで作られたステータス表示はその人たちには見えず、色相だけで系列を分けたグラフも同じです。

対策は色を避けることではなく重ねることです。色に形、アイコン、ラベル、位置を組み合わせます。感嘆符のアイコンと「エラー」という語を伴う赤いメッセージは全員に伝わりますが、赤だけでは大半の人にしか伝わりません。グラフでは凡例より直接ラベルのほうが優れており、色相だけでなく明度も変えておけば、ページを白黒で印刷しても系列を見分けられます。

コントラスト比もここに関わり、確認は安上がりです。文字は4.5:1、UI要素は3:1という基準は、ソフトウェアを調達する多くの組織やアクセシビリティ監査が使っているものです。

ダークテーマは反転ではない

すべての色を裏返すと、どこか間違って感じられるダークテーマになります。理由の多くは知覚にあります。暗い背景の明るい文字はにじんで見えて重く読めるため、同じウェイトでも太く見えます。彩度の高い色は暗い面の上でちらつきます。そして純黒に純白の文字はハレーションを起こし、本文を読むのが疲れるものにします。

一般的な調整は、黒ではなく非常に暗いグレーを使うこと、アクセント色の彩度を落とすこと、黒の上では影が見えないので影よりも明るい面で階層を表すこと、そしてライトテーマとまったく同じにするのではなく文字のウェイトを少し下げることです。

どちらのテーマも個別に確認する必要があります。白の上でコントラスト基準を満たす色が暗い面では満たさない、あるいはその逆ということが頻繁に起きます。ここで白と黒の両方に対する比率を同時に表示しているのはそのためです。

CSSでの色と、その整理のしかた

現在のCSSはこれらの形式をすべてそのまま受け付けます。oklch()も、アルファをスラッシュで書くスペース区切りの構文rgb(0 0 0 / 50%)も使えます。この構文は採用する価値があります。曖昧さなく読めますし、アルファが「誰も暗算できない16進数2桁」ではなくパーセントで書けるからです。

色を整理する息の長い方法は、カスタムプロパティを2層にすることです。1層目はパレットをそのまま名付けます（--blue-500、--grey-900）。2層目は役割を名付けます（--color-text、--color-surface、--color-border、--color-accent）。コンポーネントは役割だけを参照するので、ダークテーマは役割層の再定義であって、各コンポーネントの修正ではなくなります。

比較的新しい2つの機能が可能性を変えました。color-mix()は指定した色空間で2色を指定比率で混ぜるので、ホバー時の色を手で選ばずに基準色から導けます。そして相対色構文を使えば、既存の値の1チャンネルだけを調整して派生色を作れます。どちらもスケールを元の色と同期させ続けるのに役立ち、どちらもHSLよりOKLCHのほうがはるかに考えやすくなります。