次世代のCSSグラデーションツールが美しすぎる！ すべての新しい色空間を完全にサポート -CSS HD Gradients

すべての新しい色空間を完全にサポートする新しいグラデーションツールを紹介します。UIデザイン向けの美しいグラデーションのプリセットも豊富に用意されており、カスタマイズも簡単です。

CSSの色指定に何を使用していますか？
#FFFFFFのようなHEX値だったり、whiteのようなキーワードだったり、rgb(255, 255, 255)のようなRGB色空間の人も多いと思います。最近では色相・彩度・輝度で指定できるhsl(0, 0%, 100%)もすべてのブラウザにサポートされており、増えてきたと思います。

さらに今までよりも広色域のP3カラーに対応したoklch()もChrome 111, Safari 15.4でサポートされ、注目されています。

CSS HD Gradients

CSS HD Gradientsは、Google ChromeのデベロッパーであるAdam Argyle氏（@argyleink）により先日リリースされたばかり、次世代グラデーションおよびカラーピッキング用のオンラインツールです。モダンCSSの機能を最大限に活用するために設計されました。

• CSSの新しいカラースペース（oklch, hslなど）から選択可能。
• 任意のカラースペースから色を編集または貼り付けることができます。
• トランジションの仕組みが分かります。
• グラデーションのCSSはモダンHDとクラシックなコードをサポート。

使い方は、簡単です。
まずは、グラデーションのタイプを選択します。

グラデーションのタイプを選択

3つのタイプを切り替えて、グラデーションを見てみましょう。
linearグラデーションは、直線に沿って2つ以上のカラーを連続的な変化で構成します。ツールでは開始点・角度を調整できます。

linearグラデーション

radialグラデーションは、放射状に2つ以上のカラーを連続的な変化で構成します。ツールではサイズ・シェイプ・開始点を調整できます。

radialグラデーション

conicグラデーションは、中心点の周りを回りながら2つ以上のカラーを連続的な変化で構成します。ツールでは角度・開始点を調整できます。

conicグラデーション

生成されたグラデーションの左上「HDR」のトグルをオン・オフすると、HDRグラデーションと従来のSDRグラデーションを切り替えできます。
HDRの方が鮮やかで美しいですね！

HDRとSDRの切り替え

右上のコードアイコン（<>）をクリックすると、CSSのコードが生成されます。上はモダンHDのコード、下はクラシックなコードです。

コードの生成

左下の「HD Example」には、HDグラデーションのプリセットが用意されています。

HDグラデーションのプリセット

HDグラデーションのプリセットには、美しいグラデーションがたくさん用意ありました。

Peachesのグラデーション

グラデーションのカラーストップをクリックすると、その色がどの色域にあるのかが分かります。カラーストップはキーボード操作にも対応しており、位置を移動したり、削除することもできます。

色の確認・調整

右サイドパネルでも色の調整ができます。

色の確認・調整