カラーグラデーションの段階（2色の間の色）

グラフの凡例、ヒートマップ、プログレスバーのために、あるブランドカラーから別の色へなめらかに変わる5つの色合いが必要ですか？このツールは、開始色と終了色の間（任意で中間色を通って）の等間隔の3〜30色を返し、混色を行う色空間を選べます。この選択は、多くの人が思う以上に重要です。HEX一覧、なめらかな／段階式のCSSグラデーション、チャートライブラリ用のJSON、CSS変数、スウォッチが得られます。

使い方

1. 開始色と終了色を入力し、混色が特定の色を通るべきなら中間色も入力します。
2. 両端を含めて、必要な色の数を選びます。
3. 混色の空間を選びます。均等で鮮やかな段階ならOKLCHかOKLab、従来のツールに合わせるならsRGB、虹色ならHSLの長い色相経路です。
4. HEX一覧、JSON、またはCSS変数をコピーします。

計算式

colorᵢ = start + (end − start) × tᵢ, with tᵢ = i ÷ (n − 1), computed on the channels of the chosen space

sRGBではチャンネルは0–255の値、リニアRGBでは光の強さ、HSLとOKLCHでは、CSS Color 4と同様に色相が色相環を短い（または長い）側に回ります。グレーには色相がないため、もう一方の色の色相を借ります。sRGBの範囲外になったOKLCHの結果は、明度と色相を保ち、彩度（chroma）を失います。

計算例

黒から白までsRGBで5段階にすると、#000000、#404040、#808080、#BFBFBF、#FFFFFFになります（255 × 0.25 = 63.75 → 64 = #40）。リニアRGBで混ぜると、中間は#BCBCBCになります。光の半分は中間グレーより明るく見えるためです。赤から青までHSLで進むと、短い経路はマゼンタ #FF00FF を通り、長い経路はライム #00FF00 を通ります。