社内シェア
CSS の新しい色の書き方 oklch(0.7 0.12 250)
Lloyd ・ 2026
HSL の問題
HSL の L は、RGB の最大と最小の真ん中 — 目の感度は入っていません。
色相だけ 0°→360° に回して、その「50%」の見え方を確かめます。
HSL の問題
明度 50% × 360 色(max + min) ÷ 2 — RGB の最大と最小の真ん中。明るさの「体感」とは無関係。
だから lighten() や「hover で 5% 明るく」が色相ごとに壊れる。
どうやって測った？
「知覚的に均等」は物理の式からは導けません。人に色を見せて「同じ？」「どれくらい違う？」と聞き続けるしかない。
その 100 年ぶんの答えを積み上げた先に、OKLCH があります。
どうやって測った？ ①
Munsell（1905）— 並べるのが先、測るのが後どうやって測った？ ②
どうやって測った？ ③
明度が同じはずの 2 色の L を入れ替えても何も変わらなければ合格。予測精度より、明るさ L・鮮やかさ C・色相 H の独立を優先した。
最適化の答えは 0.323。青が内側に折れるのを直すため手で 1/3 に固定 — 誤差はほぼ変わらず。整形手術済み。
OKLCH とは
L は高さ、C は軸からの距離、H は角度 — 円柱座標そのもの。
1 本だけ動かしても、ほかの 2 本は釣られません。
OKLCH とは
L=高さ・C=軸からの距離・H=角度ドラッグで回転。いまの色相のところで切り開いてあります — H を回すと切り口も回る。OKLCH に切り替えると、さっきの色票のギザギザがこの断面に現れる。
なぜこの形？
ディスプレイがくれるのは、ただの四角い箱。それを人間の目のレンズ越しに見ると、角の高さが波打つ。
この揺れがどこから来るのか、目の中まで降りて見ていきます。
なぜこの形？
「一番鮮やか」をつなぐ稜線は、ジェットコースター光っているのは各色相の「一番鮮やかな色」— RGB 立方体では中腰の 6 辺そのもの。OKLCH に切り替えると高さ(=明るさ)が 0.45〜0.97 まで波打ち、HSL では逆にまっ平らな「彩度 100% の輪」に化ける。
なぜこの形？
目印は 530nm・100% の値。600nm で M を揃えると L は 2.3 に跳ぶ
なぜこの形？
スペクトルが違っても、3 つの数が同じなら「同じ色」なぜこの形？
R・G・B の 3 本のライト。錐体の反応は白を 100% として表示 — B だけにすると S は 87% も光るのに、明るさの通路には 7% しか届かない
今日から使える ①
同じ 2 色でも、あいだの通り道はブラウザ任せ。
通り道を OKLCH に変えるだけで、中間の濁りが消えます。
今日から使える ①
グラデーションの泥ゾーンbackground: linear-gradient(in oklch 90deg, blue, yellow);
今日から使える ①
泥ゾーンを立体で見るドラッグで回転。RGB 立方体では sRGB 補間がまっすぐな最短経路。OKLCH に切り替えると、その直線が無彩色の軸のそばをかすめて曲がる——それが泥の正体。
今日から使える ②
.btn:hover { background: oklch(from var(--brand) calc(l + 0.08) c h); }
.btn:active { background: oklch(from var(--brand) calc(l - 0.06) c h); }
.btn:disabled { background: oklch(from var(--brand) l calc(c * 0.25) h); }
.btn:focus { outline-color: oklch(from var(--brand) l c h / 0.4); }
本命はこれ
OKLCH の限界 ①
WCAG のコントラスト比は輝度 Y から出す、OKLCH とは別の物差し。
下の 4 色は L=0.62・C=0.14 で固定、違うのは色相だけ。
OKLCH の限界 ②
で、使えるの？
.card {
background: #61a3e6; /* 古いブラウザはここで停止 */
background: oklch(0.7 0.12 250); /* 対応ブラウザは上書き */
}
種明かし：このスライドの色も、ぜんぶ oklch() で書いてます。
じっくり版（全部さわれる図解）→ lloyyd.com/artifact/oklch