配色パレット生成
調和の取れた配色を生成し、色を固定、Tailwind 風の色階調も作成
- ファイルは端末の外に出ません
- ブラウザ内で処理
- 無料・登録不要・透かしなし
3b82f6
e24956
3ba01b
配色パレット生成の使い方
配色ルールでベースカラーから導く、ランダムに生成して気に入った色をロックする、Tailwind 風の 50〜950 のシェードを作る、の 3 通りで配色を作ります。計算は OKLCH で行います。
- 1
「モード」を「配色ルール」「ランダム」「シェード」から選びます。
- 2
「配色ルール」と「シェード」では「ベースカラー」を設定し、「ルール」、または「カラー名」と「ベースを置く段階」を選びます。
- 3
「ランダム」では「生成」を押すか Space キーを押します。残したい色は次の生成の前にロックしておきます。
- 4
色にカーソルを合わせてコピーアイコンを押します。「配色ルール」ではその色をベースカラーにすることもできます。
- 5
「エクスポート」で HEX・CSS・Tailwind v3・Tailwind v4・JSON を選んでコピーするか、.gpl や .ase をダウンロードします。
よくある質問
なぜ OKLCH で計算するのですか？
OKLCH で色相を回すと、どの色もベースカラーと同じ見た目の明るさと鮮やかさを保てます。HSL で回すと、黄色が青よりずっと明るく見えてしまいます。
50〜950 のシェードはどう作られますか？
明度は Tailwind 公式パレットに近いカーブに沿って変化し、彩度は 500〜600 付近が最大になります。ベースカラーはその段階にそのまま置かれ、「自動」なら明度が最も近い段階に置かれます。
前のランダム配色に戻れますか？
戻れます。「前のパレット」「次のパレット」で切り替えられ、ページを開いている間は直近 50 件を保持します。ページを閉じると保存されません。
1 つのパレットは何色まで作れますか？
ランダムは 2〜10 色（− と + ボタンで調整）です。配色ルールは色数が決まっていて、補色は 2 色、類似色とモノクロームは 5 色です。シェードは常に 11 段階です。
Tailwind v4 の書き出し形式は？
--color-* 変数を並べた @theme ブロックで、そのまま CSS に貼り付けられます。シェードは --color-brand-500 のような名前で oklch() の値を、ほかのモードは HEX を書き出します。