このページの中身

色空間

同じ「明度50%」でも、表記によって見た目の明るさは揃いません。階調を計算で作るなら、揃う表記を選びます。

HSLとOKLCHで同じ明度値の色を並べ、見た目の明るさが揃うかどうかを比較した図
図を大きく見る
図の中身を文字で読む
  • HSL　すべて明度 50%　同じ数値なのに、黄は明るく青は暗く見える
  • 機械的に階調を作ると、色相ごとに明るさが揃わない。コントラスト比も予測できない。
  • OKLCH　すべて L=62%　数値の変化が、見た目の変化とほぼ一致する
  • L を等間隔に置けば、見た目も等間隔になる。ダークモードへの変換も L の反転で済む。
  • どの表記を使うか
  • 確定した色を書き下すとき＝16進数　／　階調を生成・調整するとき＝OKLCH　／　手作業で少し触るだけ＝HSL

ひと目で#

RGB（16進数）
画面の仕組みそのまま。確定した色を書き下すのに使う
HSL
色相、彩度、明度。人の言葉に近いが、知覚的に均等ではない
OKLCH
明度、クロマ、色相。数値の変化と見た目の変化が一致する
色域
その環境が表示できる色の範囲。sRGB が標準で、Display P3 はより広い
不透明度
半透明。下にある背景次第で、実際の色が変わる
ブレンドモード
重なった色の合成方法

使い分け#

こうしたい使う表記
確定したブランドカラーを書く16進数（#a8804a）
階調を機械的に作るOKLCH
ダークモードへ変換するOKLCH。L を反転し、クロマを少し落とす
色相だけ変数にして手で調整するHSL
鮮やかさを最大限に出したいDisplay P3。sRGB の代替値を併記する
白背景のロゴを写真になじませたいmix-blend-mode: multiply

間違えやすいところ#

同じ半透明の黒を明るい下地と暗い下地に重ね、合成後の色とコントラスト比が変わることを示した図
図を大きく見る
図の中身を文字で読む
  • 同じ rgba(0 0 0 / 0.45) でも、合成後の画素は下地で変わる
  • 下地が明るい（#f4e3c2）　下地が暗い（#6b4a2a）
  • 白い文字は読めるか　白い文字は読めるか
  • 合成後 #867d6b　白文字と 4.07:1　通常文字は不足　合成後 #3b2917　白文字と 13.86:1　十分に読める
  • CSS に書いた rgba の値だけでは、比は計算できない。測るのは合成されたあとの画素。
  • 開発者ツールのスポイトで拾うか、スクリーンショットの画素から採って計算する。

実装#

このコードで動いている見本です

直す例#

架空の案件を1つ例にとります。どこを見て、何をどう直すかを書きます。

例として、写真の上に白い見出しを載せ、rgba(0 0 0 / 0.45) の帯を1枚はさみました。CSS の値だけを見て「黒を45%も敷いたのだから足りる」と判断します。ところが空の明るい写真では文字が消え、店内の暗い写真では余裕で読めます。

同じ半透明でも、合成後の画素は下地しだいです。明るい砂色 #f4e3c2 に重ねると #867d6b になり、白文字との比は 4.07:1。暗い焦茶 #6b4a2a に重ねると #3b2917 で 13.86:1。倍以上ちがいます。

測るのは CSS の値ではなく、合成されたあとの画素です。開発者ツールのスポイトで拾うか、スクリーンショットから採ります。写真が差し替わる運用なら、いちばん明るい1枚で測ります。

同じ半透明の黒を明るい下地と暗い下地に重ね、合成後の色とコントラスト比が変わることを示した図
図を大きく見る
図の中身を文字で読む
  • 同じ rgba(0 0 0 / 0.45) でも、合成後の画素は下地で変わる
  • 下地が明るい（#f4e3c2）　下地が暗い（#6b4a2a）
  • 白い文字は読めるか　白い文字は読めるか
  • 合成後 #867d6b　白文字と 4.07:1　通常文字は不足　合成後 #3b2917　白文字と 13.86:1　十分に読める
  • CSS に書いた rgba の値だけでは、比は計算できない。測るのは合成されたあとの画素。
  • 開発者ツールのスポイトで拾うか、スクリーンショットの画素から採って計算する。

コピーする#

明るい表示の値から、暗い表示の値を機械的に作るときの形です。OKLCH なら L を持ち替えるだけで、色相と見た目の関係が崩れません。

このコードで動いている見本です

oklch() に対応しない環境が要件に入るなら、同じ役割の16進数を先に書き、@supports (color: oklch(0% 0 0)) の中で上書きします。

確認する#

使えるパターン#

このページで扱う語#

このページで扱う語を並べる本文では太字7 語

語の名前から引くなら用語索引へ。

色空間
色を数値で表すための座標系。軸の取り方によって、扱いやすさと知覚との一致度が変わる。
RGB
赤・緑・青の光の強さを混ぜて色を作る方式。画面表示の基本となる加法混色。
CIE Lab
国際照明委員会が定めた、人の知覚にほぼ対応する色空間。明度と、2つの色度軸で色を表す。
sRGB
1996年に策定された、Web と一般的な画面表示の標準色空間。CSS の色指定は既定でこれを前提とする。
Display P3
sRGB よりおよそ25パーセント広い色域を持つ色空間。近年の高品位ディスプレイが対応している。
グラデーション
2色以上の色を連続的に変化させた塗り。線形・放射・円錐などの形がある。
ダブルトーン
写真の階調を2色だけで表現する手法。暗部に1色、明部に別の1色を割り当てる。

この話が要る場面#

このページが答えになる、現場の困り事です。困り事の側から探すと、同じ場所に着きます。

HSLで明度を揃えたのに揃って見えない

HSLの明度は知覚と一致しない。OKLCHを使うと、同じLの色が同じ明るさに見える。

このコードで動いている見本です

印刷したら色が違った

画面はRGB、印刷はCMYK。彩度の高い色ほど落ちる。重要な色は印刷見本で確かめる。

このコードで動いている見本です

この場面のほかの困り事と、そのまま貼れる部品は色を決めるにまとめてある。逆引きには全188件。

出典#

関連#

この資料は、Webサイトを作るときに引くためのものです。 何のために作ったか。作っているのは AK²Lab。