グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法

Post on:2022年1月27日

はじめに

さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。

CSSで実装された線形グラデーション

background-image:linear-gradient(to right, #FFFF00, #0000FF);

1	background-image:linear-gradient(to right, #FFFF00, #0000FF);

グラデーションの中央がグレーに濁っていることに注目です。

これは、Erik Kennedyが「グレーデッドゾーン（gray dead zone）」と名付けたものです。グラデーションに使用する色を慎重に選択しないと、CSSグラデーションの中央が彩度を下げてしまうことがよくあります。
参考: グラデーションのグレーデッドゾーン

このグレーデッドゾーンは回避することができます。
この記事では、なぜこの現象が起こるのか、そして色彩理論を使って、豊かで鮮やかでかつ生き生きとしたグラデーションを作成する方法について解説します。

CSSグラデーションが算出される仕組み

CSSの線形グラデーションのアルゴリズムがどのように機能しているか、疑問に思ったことはありませんか？ CSSでどのようにして、スペクトルに沿った各ピクセルの特定の色値を算出しているのか見てましょう。

各ピクセルの色値は、3つのカラーチャンネル（Red, Green, Blue）それぞれの数学的な平均値を取ることによって計算されます。

グラデーションの各ピクセルの色値をご覧ください。

グラデーションの各ピクセルの色値

RGB色空間ではRed, Green, Blueの3つのチャンネルを混ぜることで色を作成しています。各チャンネルの範囲は0から255です。

3つのチャンネルを最大値（255/255/255）にすると、ホワイトになります。また、各チャンネルを0にすると、ブラックになります。

そして、3つのチャンネルすべてを同じ値にすると、結果は常にグレースケールになります。

RGB値が同じだと、グレースケールになる

上記のグラデーションはピュアイエロー（255/255/0）から始めています。グラデーションが進むにつれてピュアブルー（0/0/255）が混ざり始めます。中央に到達すると、半分のイエローと半分のブルーを混ぜ合わせたことになります。

つまり、3つのチャンネルは中間値の127.5に向かって収束します。その結果、出来上がる色はグレーです。

イエローとブルーの中間がグレーというのは、ちょっと不思議な感じがするかもしれません。しかし、彩度の高い色同士を混ぜると、まったく彩度のない色になります。もし、色素だけを混ぜて、彩度を一定に保つ方法があったらどうしますか？

おすすめのカラーモード

色を表現する方法はたくさんあります。上記ではR/G/Bモードを使用しましたが、正直なところR/G/Bモードはちょっと最悪です 😅

では、別のカラーモードを使用してみましょう。
HSLです。

HSLとは、Hue（色相）、Saturation（彩度）、Lightness（明度）の頭文字をとったものです。カラーピッカーを使用したことがある人なら、このカラーモードで作業したことがあるでしょう。

カラーピッカー

各値が表すものは次のとおりです

Hue（色相）は、色素がどのような色になるか、カラーホイールのどこに位置するかを調整します。
Saturation（彩度）は、色の鮮やかさを調整します。
Lightness（明度）は、色の明るさや暗さを調整します。

個人的には、このHSLモードがより直感的に色を扱うのに適した方法だと思います。

これは本当に魔法のようですが、グラデーションのRGB値を平均化する代わりに、HSL値を平均化したらどうなると思いますか？

HSLモードでグラデーションを作成

R/G/B値をミックスするのではなく、H/S/L値をミックスしたため、グレーのデッドゾーンはなくなりました！

グラデーションの開始色と終了色は彩度と明度が同じなので、変化する値は色相のみです。その結果は事実上、カラーホイールを歩き回るようなものです。

次に別の例を見てましょう。
今度は、彩度と明度が異なる色をミックスしてみます。

HSLモードでグラデーションを作成

そして、同じ開始色と終了色でRGBモードで作成してみます。
グラデーションの中央がかなり違います。

RGBモードでグラデーションを作成

HSLは人間の知覚を考慮していないため、必ずしもすべての状況で使用するのに最適なカラーモードではありません。明るすぎたり鮮やかすぎたりするグラデーションになる傾向があります。

HSLカラーモードでは、これらの色はどちらも同じ明度（LIT）になります。

イエローもブルーも同じ明度

誰もが同じように色を見るわけではありませんが、ほとんどの人は同じ明度の値であるにもかかわらず、イエローはブルーより明るく感じるでしょう。HSLは、人間がどのように色を知覚するかは関係ありません。エネルギーや波長など、物理学をモデルにしています。

幸いなことに、人間の知覚を考慮した他のカラーモードがあります。たとえば、HCLはHSLに似ていますが、人間の視覚に基づいたモデルです。

HCLモードでグラデーションを作成

では、どのカラーモードが最適なのでしょうか？
それは、あなたがどんな効果を求めているかによります。私は特定のグラデーションに最適なものを見つけるために、さまざまなカラーモードを試します。

これらの知識を活用する

良いニュースと悪いニュースがあります。
まずは、悪いニュースから。

CSSは、グラデーションの計算で使用されるカラーモードを変更する方法を提供していません。あるグラデーションにHSL補間を使用することを選択することは、少なくとも現在のところできません。CSS Images Level 4で色の補間方法を指定できるようになりますが、私の知る限り、ブラウザで広くサポートされているわけではありません。

続いて、良いニュースです。
この制限は、少し工夫をすれば回避することができるます 😈

CSSのグラデーションは、2色にこだわる必要はありません。3色でも、10色でも、100色でも使用できます。

まず、中間の色を手動で計算する必要があります。この計算にはJavaScriptを使用し、好きなカラーモードを使用できるようにします（chroma.jsなどの便利なライブラリを使用します）。

使用する色数はいくつでも、カラーモードも自由

これらの色を取得し、CSSのグラデーション関数にそれぞれの値を記述します。

.box {
  background-image: linear-gradient(
    to right,
    #ffff00,
    #f8ea47,
    #f0d465,
    #f0d465,
    #e7bf7c,
    #ddaa8f,
    #d095a1,
    #c280b2,
    #b26cc2,
    #9d56d2,
    #8440e1,
    #6028f0,
    #0000ff
  )
}

.box {

background-image: linear-gradient(

to right,

#ffff00,

#f8ea47,

#f0d465,

#e7bf7c,

#ddaa8f,

#d095a1,

#c280b2,

#b26cc2,

#9d56d2,

#8440e1,

#6028f0,

#0000ff

)

}

ここでは線形グラデーションを使用していますが、放射状グラデーションと円錐曲線でも同じテクニックを使用できます！

しかし、ちょっと待ってください。CSSのエンジンは提供された各色間のスペースを計算するために、引き続きRGB補間を使用しませんか？つまり、すべてのピクセルに十分な数の色を渡さない限り、RGB補間に頼ることになります。

これは事実ですが、幸いなことに大きな問題ではありません。

2つの色が非常に似ている場合、どのカラーモードを使用するかはあまり重要ではありません。ほぼ同じグラデーションになります。平均をどのように定義しても、平均の値が大きく異なるということはありません。

たとえば、非常に類似した2つの色を使用するグラデーションを見てください。

開始色と終了色が類似したグラデーション

色が非常に似ているため、RGB補間で台無しになることはありません。

そこで、カスタムのカラーモードを使用して中間色を大量に生成し、それらをすべてをCSSグラデーション関数に渡すという裏技があります。CSSのエンジンはRGB補間を行いますが、最終的な結果には影響を与えません（少なくとも、人間が知覚できるほどには影響しません）。

ここからが楽しいところです！
グラデーションの生成方法について解説しましょう 😄

美しいグラデーションを生成できるツール

CSSで使用できる豊かで美しいグラデーションを生成するためのツールを作成しました。

Gradient Generator

私はこのツールに本当に興奮しています。この記事で解説したものに加えて、他にも便利なテクニック（イージングカーブによる色の配分をコントロールなど）を使用できます。

気に入ったグラデーションが得られるまでコントロールを調整し、下部に生成されるCSSスニペットをコピーしてください。現在のところ、このツールは線形グラデーションしか生成できませんが、CSSカラーのセットをコピーペーストして、放射状や円錐状のグラデーションにも使用できます。

もうひとつ、このインタラクティブなウィジェットと第一原理を重視した教育スタイルを気に入っていただけたなら、私のオンライン講座「CSS for JavaScript Developers」も気に入っていただけると思います。

CSS for JavaScript Developers

講座では、CSS言語全体に対して同様のアプローチをとっています。CSSが内部でどのように機能しているかを学ぶことで、この言語が驚くようなものでなくなります。よくあるレイアウトや効果をたくさん取り上げていますが、基本的な考え方に重点を置いているので、学んだテクニックを使用してさまざまなレイアウトや効果を実装することができます。