色補間 — 2 色を N ステップで混ぜてパレット生成

使い方

色 A と色 B に HEX 値 (`#3b82f6` / `3b82f6` / `#3bf`) を入れます。 補間モードを選びます。RGB は素直な混色、HSL は色相を最短距離で回す補間。色相を保ったまま明度を変えたいなら HSL がおすすめ。 ステップ数 (3〜20) を選びます。Tailwind の標準パレットに揃えたいなら 11。 下のグラデーション帯がプレビュー、各スワッチの HEX をクリックでコピー、「CSS gradient をコピー」で `linear-gradient(...)` 文字列もコピーできます。

よくある質問

RGB と HSL のどちらを使えばよいですか?

デザイントークン用途では HSL の方が「色相が崩れない」ため、`red-50` から `red-950` のような同系色パレットを作りやすいです。一方、紙やインクの混色感を再現したい・実際の混合結果を見たい場合は RGB が直感的です。

HSL で色相が逆方向に回ってしまいます。

本ツールの HSL 補間は短い方向を取ります (例: 350° → 10° は 360° を跨ぐ 20° 経路)。長い方向を取りたい場合は、間に中継色を挟むか、RGB モードを使ってください。

OKLCH や Lab で補間できますか?

現状は RGB / HSL のみです。OKLCH (CSS Color 4) はライブラリ依存になるため未対応。Web では CSS の `linear-gradient(in oklch, ...)` が同等の効果を持つので、必要に応じてブラウザ側で補間してください。

両端の色を逆にすると?

色 A ↔ 色 B を入れ替えるとパレットも逆順になります。「右が起点」のほうが直感的な場合は色 A と色 B を入れ替えてください。

データはどこかに送信されますか?

いいえ。色の計算はすべてブラウザ内 (JavaScript) で行われます。

類似のツール

カラー変換 — HEX / RGB / HSL / HSV を相互

HEX・RGB・HSL・HSV をリアルタイムに相互変換できるカラーピッカー付きツール。どの欄を編集しても他の 3 表記が即座に追従。すべてブラウザ内で動作し、入力した色情報は外部に送信されません。

開発色変換

色名検索 — HEX / RGB に近い CSS / Tailwind 色名を探す

HEX (`#3b82f6`) や CSS 色名 (`tomato`) を入力すると、最も近い CSS 色名 (148 色) と Tailwind パレット (22 色 × 11 階調) の中から類似度順に並べて表示します。RGB 距離で照合、各候補に swatch + 色名 + HEX + 距離スコアを表示。デザイントークンの命名、チーム間で色を口頭で伝える、近似の Tailwind クラスを見つけたい、といった用途に。すべてブラウザ内で処理されます。

開発色

CSS グラデーション生成 (linear / radial / conic)

linear-gradient / radial-gradient / conic-gradient の 3 種類を **Mode 切替** で組めるブラウザ完結ビルダー。色ストップを追加・削除しながらライブプレビュー、角度 (linear / conic) や形・サイズ (radial)、中心位置 (radial / conic) を調整、CSS 文字列を `background: ...` 形式または値だけで出力します。Tailwind の任意値クラス `bg-[linear-gradient(...)]` にもそのまま貼れる形式。プレビュー / 計算はすべてブラウザ内で完結し、サーバーへ送信しません。

色生成

コントラスト比チェッカー — WCAG AA / AAA 判定

前景色 (文字色) と背景色を選ぶだけで、WCAG 2.x のコントラスト比を計算し、通常の文字・大きな文字・UI 部品それぞれで AA / AAA を満たすかをその場で判定します。HEX と rgb() 入力、カラーピッカー、ライブプレビュー付き。すべてブラウザ内で処理され、色情報は外部に送信されません。

開発色