くすまないグラデーションを作る

1. グラデーションの中間がくすむ理由

青 #0000ff から黄 #ffff00 へのグラデーションを CSS で書くと、ちょうど中間が灰色の #808080 になります。鮮やかな2色をつないだのに、真ん中だけが濁って見えます。

原因は、色を sRGB の赤・緑・青の値のまま混ぜていることです。青は (0, 0, 255)、黄は (255, 255, 0) なので、それぞれの成分を半分ずつにすると (128, 128, 128) になり、3つの成分がそろった灰色になります。CSS の linear-gradient() も、hex で色を書いた場合は既定でこの混ぜ方をします。

同じ2色を、人の見え方に近い色空間 OKLCH で混ぜると、中間は #00bdb0（青緑）になります。5段で並べると次のとおりです。

OKLCH では、明るさ・鮮やかさ・色相をそれぞれ別々に少しずつ変えるので、途中で鮮やかさが抜け落ちません。青から黄へ色相が回っていく途中で、青緑や緑を通ります。

赤 #ff0000 から青 #0000ff でも同じことが起きます。sRGB では中間が #800080 と暗い紫になりますが、OKLCH では #b700be と明るい紫になります。

白と黒のように色味のない2色なら、どちらで混ぜてもくすみは起きません。ただし明るさの変わり方は違い、白 → 黒の5段は sRGB で #ffffff #bfbfbf #808080 #404040 #000000、OKLCH で #ffffff #aeaeae #636363 #222222 #000000 です。OKLCH のほうが、見た目の明るさが等しい間隔で下がります。

2. OKLCH とは

OKLCH は、色を次の3つの値で表す方法です。CSS では oklch(0.623 0.188 259.8) のように書きます。

• L（明るさ） — 0 が黒、1 が白
• C（鮮やかさ） — 0 が灰色。値が大きいほど鮮やか
• h（色相） — 色味を角度（0〜360）で表したもの。灰色・白・黒には色相がありません

よく使われる HSL にも L（明るさ）がありますが、意味が違います。黄 #ffff00 と青 #0000ff は、HSL ではどちらも L = 50% です。ところが見た目は黄のほうがずっと明るく、OKLCH の L では黄が 0.968、青が 0.452 になります。OKLCH の L は、人が感じる明るさに合うように作られています。

このツールは、入力した色の OKLCH の値を欄の下に表示します。表示をそのまま入力欄に貼り戻すこともできます。

3. 画面で出せない色をどうしているか

OKLCH で計算した途中の色は、画面（sRGB）で出せる範囲の外に出ることがあります。赤 #ff0000 から青 #0000ff の中間を OKLCH で計算すると、緑の成分がマイナスになり、そのままでは表示できません。

このとき、各成分を 0〜1 に切り詰めるだけだと色相がずれます。このツールは CSS Color Level 4 の方式に従い、明るさと色相を保ったまま、鮮やかさだけを下げて範囲の中に収めます。赤 → 青の中間は、この補正で #b700be になります。

補正が入った段には、色見本に「補正」と表示します。赤 → 青の5段なら、両端を除く3段すべてが補正の対象です。

入力欄に oklch() で画面の外の色を入れた場合も同じ補正をかけ、どの hex にしたかを欄の下に表示します。たとえば oklch(0.7 0.4 150) は #00c248 になります。

色相の回り方

色相は角度なので、ある色から別の色へは「短い方」と「長い方」の2通りの回り方があります。既定は短い方です。赤 → 青の5段を長い方で回ると、#ff0000 #9d7500 #008a0e #00727e #0000ff と、黄・緑を経由します。

白や黒のように色相のない色と混ぜるときは、もう一方の色の色相を使います。白 → 青なら、途中は青の色相のまま薄くなっていきます。

4. CSS で使う方法

OKLCH のグラデーションを CSS で使う方法は2つあります。このツールはどちらもコピーできます。

/* 1. OKLCH で計算した段を hex で並べる */
background: linear-gradient(to right, #0000ff, #0089b5, #00bdb0, #19f268, #ffff00);

/* 2. ブラウザに OKLCH で混ぜさせる */
background: linear-gradient(to right in oklch, #0000ff, #ffff00);

1 の hex を並べる方法は、どのブラウザでも同じ表示になります。ただし並べた段と段のあいだはブラウザが sRGB で混ぜるので、段数が少ないと OKLCH の結果からずれます。段数を増やすほど OKLCH の結果に近づきます。

2 の in oklch を書く方法は短く書けて、段のあいだもブラウザが OKLCH で混ぜます。色相を長い方で回すときは in oklch longer hue と書きます。ただし、画面で出せない色をどう描くかはブラウザに任されているので、1 と同じ色になるとは限りません。

in oklch の指定に対応しているのは、Chrome 111、Edge 111、Firefox 127、Safari 16.2（iOS の Safari も 16.2）以降です（出典：MDN Web Docs「linear-gradient()」のブラウザー互換性、2026年10月15日に確認）。古いブラウザにも対応させたい場合は、1 を先に書き、2 を後に書いておくと、2 を読めないブラウザでは 1 が使われます。

なお、sRGB の段は、各成分を整数のまま計算して 0.5 を切り上げています。CSS が hex のグラデーションを描くときと同じ混ぜ方です。

5. 段階パレットの作り方

ボタンや背景の濃淡に使う段階パレット（50〜950 の11段）は、明るさを段ごとに決まった値にそろえると使いやすくなります。このツールは OKLCH の L を段ごとに固定の値にし、鮮やかさと色相は入力の色のままにして11段を作ります。

同じ段の色は、青でも橙でも灰色でも、見た目の明るさがそろいます。そのため、たとえば「文字は 900、背景は 50」と決めておけば、色を差し替えても読みやすさが変わりにくくなります。HSL の L を変えるだけで段を作ると、黄色の段と青の段で明るさが大きく違ってしまいます（2章の黄と青の例と同じ理由です）。

入力した色そのものは、どれかの段にぴったり一致するとは限りません。色見本には、入力の色の明るさに最も近い段に「近い」と表示します。#3b82f6 なら 500、#ff8800 なら 400 の段です。

明るい段や暗い段では、画面で出せる鮮やかさの上限が下がるので、多くの段で鮮やかさを下げる補正が入ります。ほぼすべての段が対象になるため、パレットでは「補正」の表示を省いています。

うまくいかない場合

• 透明度を指定した色（#ff880080、rgba()、/ 0.5 など）は扱いません。透明度を付けずに入力してください。
• 色名（red など）は読めません。hex か rgb()・hsl()・oklch() で入力してください。
• oklch() で入れた色が、別の hex に変わった — 画面で出せない色だったため、3章の方式で補正しています。欄の下に補正後の hex を表示します。
• CSS 2 の表示が CSS 1 と少し違う — 画面の外に出る部分の描き方がブラウザごとに違うためです。表示を確実にそろえたい場合は CSS 1 を使ってください。