中央に汚い灰色が混ざらずきれいなグラデーションを作成できる「CSS Gradient Generator」レビュー

鮮やかなグラデーションを作成したいのに、なぜか色の移り変わる部分がくすんで灰色っぽくなってしまう……という経験をした人もいるはず。このような事態を避けて色鮮やかなグラデーションを作成可能にするツール「CSS Gradient Generator」が公開されています。CSS Gradient Generatorで作成したグラデーションはCSSのlinear-gradient関数としてコピー＆ペースト可能なので、そのままウェブデザインとしても利用可能です。

CSS Gradient Generator
https://www.joshwcomeau.com/gradient-generator/

Make Beautiful Gradients in CSS, with linear-gradient, radial-gradient, or conic-gradient.
https://www.joshwcomeau.com/css/make-beautiful-gradients/

CSS Gradient Generatorにアクセスすると以下のような画面が表示されます。左側にグラデーション、右側にグラデーションの調整ツールとして「Colors(カラー)」「Color Mode(カラーモード)」「Precision(精度)」「Angle(アングル)」「Easing Curve(イーシングカーブ)」となっています。

カラーでは、デフォルトで青と黄の2色が選ばれており、各色をクリックすると明度や色調を選ぶことが可能。

試しに明度を高くしてみたところ、左側のグラデーションに反映され、淡い感じのグラデーションになりました。

他の色についても同様に変更可能です。

いったん元に戻して……

色の位置を入れ替えると、グラデーションの配色も変化しました。

さらに、色の追加も可能です。

CSS Gradient Generatorの特長は、カラーモードをLRGB・HSL・HSV・HCL・LABから選べること。例えば赤・緑・青の3色を混合するRGBカラーを使うとグラデーションを作ったときに混色で濁ってしまう部分が存在しますが、デフォルトになっている色相・彩度・明度から構成される「HCLカラー」の場合はにごりが発生しにくくなるとのこと。

LRGBモードにすると、こんな感じで灰色に近い、にごった部分が発生します。

HSLカラーはHCLカラーに近いもの。HCLカラーの方が人間の視覚をモデルにしているそうです。

またHSVカラーも色相・彩度・明度から構成されますが、彩度を低下させた時にHSVは赤緑青のうち最も強い色に収束していくのに対して、HSLは最も強い色と最も弱い色の中間に収束していくとのこと。

LABカラーはデバイス依存しないカラー空間。実際に使ってみると、LRGBほどではないものの、少し濁りが発生しました。

また精度のスライドを左に寄せると色が単色に近くなり……

右に寄せるとそれぞれの色がくっきりと写ります。

精度をやや高めにした状態で、アングルを調整してみました。アングルはグラデーションの向きを変更可能なようです。

またイーシングカーブから、グラデーションのどの色味をどれぐらい分厚くするかを調整できます。

アングル＆イーシングカーブの下には「Your Gradient」と書かれており、「Copy CSS」でこの情報をコピーしてCSSにペーストすればグラデーションを再現可能になるわけです。