カラー補間 / グラデーションステップ
2 つのエンドポイントの間の N の等間隔のカラーを生成する。CSS グラデーションが 1 つの滑らかな帯であるのに対し、これはチャートシリーズ、ステータスバッジ、またはヒートマップ凡例として出荷できる離散スウォッチを与える。補間が発生する色空間を選ぶ：プレーン sRGB は最も速いがむら；OKLab は知覚的に均一（Tailwind v4、Radix Colors が使う）；線形 RGB は 3D エンジンと一致；HSL は色相を最短弧に沿って動かす。イージングカーブは、一方の端の近くにより多くのステップをクラスタしたい場合に間隔を曲げる。
- #3B82F61/7
- #6A7FE72/7
- #8B79D83/7
- #A672C84/7
- #BF68B95/7
- #D65BA96/7
- #EC48997/7
OKLab が推奨デフォルト — Tailwind v4、Radix、モダンな CSS グラデーションすべてそこで補間する。
使い方
- 開始と終了の 16 進数を設定（またはプリセットを使う）。⇄ で反転。
- ステップカウントと色空間を選ぶ — デザイントークンの最も安全なデフォルトは OKLab。
- リスト全体を 16 進または HSL としてコピー、または各スウォッチを 1 つずつ取得。
よくある質問
- なぜ OKLab は sRGB よりはるかに良く見える？
- プレーン sRGB 補間は、チャンネルが知覚される明度を追跡しないため、濁った中間トーンを生成する — 赤 + 緑の真ん中は、クリーンな黄色ではなく暗いオリーブ。OKLab は、等しいステップサイズが目に等しく異なって見えるように構築されているため、トランジションは明るく保たれる。
- イージングカーブは何をする？
- それはステップがグラデーションに沿ってどのように間隔を空けるかを制御する。`Ease-out` はより多くのステップを開始の近くにクラスタする（ローエンドがより重要なヒートマップに役立つ）；`Ease-in-out` は両端により多くのディテールを置く。
関連ツール
CSS color-mix() プレビュー (補間空間の比較)
モダン CSS の color-mix() 関数が補間空間 (srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear) によって 2 色をどう異なる結果で混ぜるかを並べて比較 — ライブスウォッチ、計算済み hex、各空間のフルグラデーション、コピー可能な CSS 付き。
OKLCH カラーピッカー
知覚的に均一な OKLCH 空間（明度・彩度・色相）で色を選ぶ — そして各選択が sRGB ディスプレイ色域内に収まるかを確認。
カラー名検索
任意のhex/RGB色に最も近いCSS・Tailwind・XKCD色名をOKLabの知覚距離で順位付け表示。
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー ミキサー
2 色を RGB・HSL・CIELAB 空間で補間。11 段階の中間グラデーション ストリップ表示。
Conic Gradient ジェネレーター
CSS `conic-gradient()` のビジュアルビルダー — 回転角度·中心位置·カラーストップ·図形プレビュー。パイチャート·リングチャート·チェック柄·カラーホイールに便利。