カラー補間 / グラデーションステップ
カラー
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` は両端により多くのディテールを置く。
関連ツール
色覚シミュレーター
8 種類の色覚異常（CVD）で画像がどう見えるかを再現。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00