この記事はなに？
グラデーションを作成したとき、両端の色は鮮やかなのに、真ん中だけ灰色っぽく濁ってしまった経験はありませんか？
特に、「青と黄色」や「赤と緑」といった補色関係（反対色）の色をグラデーションにすると、この現象は顕著に現れます。
この彩度が落ちて中間の色がくすむ現象は、海外のデザインコミュニティでは**「Gray Dead Zone（死の灰色地帯）」**という、なんとも恐ろしい（でも少しカッコいい）名前で呼ばれています。
従来の美しいグラデーションの作り方
この濁る現象に対して、デザイナーは従来、カラーホイールを見て中間色を手動で補うテクニックを使ってきました。
例えば「青と黄色」なら、その中間にある「緑」や「水色」を間に挟むことで鮮やかさを保ちます。
カラーホイール
生成されるグラデーション
「きれいなグラデーション 作り方」や「グラデーション 濁らない」などで検索をかけると、PhotoshopVIP を始めとした、デザインメディアやデザインブログでよく紹介されています。
CSSでの対応
CSSでも同様に、単純に2色を指定すると濁ってしまいます。
そのため、デザイナーがやるのと同じように「中間に鮮やかな色」を挟んで3色にすることで対応してきました。
例として、青と黄色の2色をグラデーションで表現してみましょう。
どちらの色も、Hexで表現すると下記のような値になります。
- blue
#0000ff - yellow
#ffff00
background: linear-gradient(to right, blue, yellow);
この中間に、鮮やかな水色（aqua: #00ffff）を追加してみます。
- aqua =
#00ffff
background: linear-gradient(to right, blue, aqua, yellow);
これで鮮やかなグラデーションになりました。
しかし、すべてのグラデーションで毎回中間色を探して指定するのは、手間がかかります。
oklch() で解決しよう
3色指定で解決はできますが、毎回カラーホイールを確認したり、中間色を計算するのは面倒です。
そこでモダンCSSの出番です。色空間の指定を oklch に変えてみましょう。
使い方は簡単で、linear-gradient の中に in oklch というキーワードを追加するだけです。
/* 従来: RGB空間で計算される（濁る） */
background: linear-gradient(to right, blue, yellow);
/* 最新: OKLCH空間で計算される（鮮やか！） */
background: linear-gradient(in oklch to right, blue, yellow);
たったこれだけで、ブラウザが「人間の目に自然に見える鮮やかなルート」を通って色を混ぜてくれるようになります。
また、下記のように longer を使うと、色相環を遠回りして虹色を作ることができます。
通常は shorter が適用され、色相環の近道を通るため虹色にはなりません。
background: linear-gradient(in oklch longer hue to right, blue, yellow);
すべての出力結果を並べると下記の図のようになります。
ブラウザの互換性
MDNで確認すると、すべてのブラウザの最新バージョンでは対応しています。
CSS からデザインツールに逆輸入
2025年12月現在、Adobe の Illustrator や Figma の標準機能では、この「OKLCH補間」を使ったグラデーションをワンクリックで作ることはできません。
グラデーション表現に関しては、Webの実装（CSS）がデザインツールよりも先行している状態だと感じました。
例えば下記のジェネレーターを活用してCSSを作成し、その色味を参考にデザインへ反映させることで、美しいグラデーションを素早く作れます。
まとめ
- グラデーションの中間が濁る現象（Gray Dead Zone）は、
in oklchを書くだけで解決できる - 面倒な3色指定や、中間色の計算はもう不要
-
longer hueを使えば、2色だけで虹色も作れる
この記事が誰かのお役に立てたら幸いです。