カラーパレットジェネレーター。

手持ちの色、またはランダムな色から始めると、primary、secondary、tertiary、neutral、surface という、組み合わせのよい 5 色ができます。気に入った色をロックしてもう一度生成すれば、残りの色だけが変わります。ブラウザ内で動くので、選んだ色がアップロードされることはありません。

起点にする色配色ルール

スペースキーを押すと、新しいパレットを生成します。

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。

カラーパレットの作り方

色を決めます。 色見本から選ぶか、HEX、rgb()、hsl()、oklch() で入力します。その色が primary になります。「生成」を押して、濁りすぎず蛍光色でもない、ランダムな色から始めることもできます。
配色ルールを選びます：類似色、補色、トライアド、スプリット補色、モノクロ。secondary と tertiary にどの色相を使うかが決まります。
もう一度生成すると、新しいバリエーションができます。ボタンを押すか、どの入力欄も選択していないときにスペースキーを押します。ロックしていない色が変わります。primary がロックされていないと、生成のたびに開始色も新しいランダムな色になるので、自分の色を残したいときはロックしてください。
気に入った色をロックします。 各色見本のロックは、その色をこの先のどの生成でも保ちます。1 色ずつ、パレットを組み立てていけます。
結果をコピーします。 各色見本には、役割の名前、HEX コード、OKLCH の値が表示され、HEX にはコピーボタンがあります。色見本の下の 3 つのエクスポートタブには、必要な形式でパレット全体が入っています。

5 つの色

primary は開始色です。
secondary と tertiary はアクセントで、色相は配色ルールで決まります。secondary は中間の明るさ、tertiary はそれより明るい色です。モノクロでは、入力した色の暗いバージョンと明るいバージョンになります。
neutral は、入力した色の色相がわずかに入った濃いグレーで、補足の文字やキャプションに使います。
surface は、同じ色相がわずかに入ったほぼ白の色で、背景に使います。

コピーできるもの

HEX：5 つのコードを、上の順に 1 行に 1 つずつ。
Tailwind v4 @theme：--color-primary、--color-secondary、--color-tertiary、--color-neutral、--color-surface を oklch() の値で定義する @theme ブロック。CSS ファイルに貼り付ければ、bg-primary や text-neutral のようなクラスが使えます。プロジェクトが shadcn/ui を使っていて、これらの名前の一部がすでに定義されている場合は、代わりに shadcn テーマジェネレーターを使ってください。
DESIGN.md のカラー：5 つの役割を HEX コードで書いた colors: ブロック。DESIGN.md のフロントマターに入れます。

Codex で使う

パレットは、Codex が見る場所に書いてあってはじめて役に立ちます。DESIGN.md には 7 つのカラーの役割があり、このツールが作るのはそのうち 5 つです。残りの 2 つは、primary の上の文字色である on-primary と、メインの文字色である on-surface です。セットを完成させるには：

DESIGN.md のカラーをコピーして DESIGN.md に入れるか、5 つの HEX コードを DESIGN.md ジェネレーターに貼り付けます。ジェネレーターは on-primary と on-surface も尋ね、コントラストが 4.5:1 を下回る色の組み合わせを教えてくれます。
使う組み合わせをチェックします。 文字に使うペアは、コントラストチェッカーで確認します。
AGENTS.md からファイルを指します。 やり方は DESIGN.md のガイドにあります。

Codex に残りを任せたいなら、コードをプロンプトに貼り付けます：

パレットから DESIGN.md へ

選んだ色は次のとおりです：primary [HEX]、secondary [HEX]、tertiary [HEX]、neutral [HEX]、surface [HEX]。これらをリポジトリのルートにある DESIGN.md の colors セクションに書いてください。on-primary と on-surface も追加し、それぞれ白かほぼ黒を選んで、primary の上の on-primary と surface の上の on-surface が少なくとも 4.5:1 のコントラストになるようにしてください。どれかの組み合わせが届かない場合は、私の色は変えずに、どの組み合わせが不合格か、それを直す最小の変更を教えてください。そのうえで、これらの色だけを使って [ホーム] 画面をデザインし、ほかに必要だったものを挙げてください。

よくある質問

無料ですか？

はい。無料で登録も不要、生成できるパレットの数にも制限はありません。

選んだ色はアップロードされますか？

いいえ。パレットはブラウザ内で作られ、どこにも送信も保存もされません。残したい色は、ページを離れる前にコピーしてください。サイトが記録するのはツールが使われたことだけで、色は記録しません。

パレットはどのように作られますか？

OKLCH で計算しています。OKLCH は、明度が同じだけ変われば、見た目の違いも同じになる色空間です。開始色が primary になり、配色ルールが、secondary と tertiary の色相を primary からどれだけ離すかを決めます。類似色は両側に 30°、補色は 180° と 30°、トライアドは 120° と 240°、スプリット補色は 150° と 210° で、モノクロはずらしません。アクセントの彩度は、限度内で入力した色の彩度に近づけるので、くすんだ色から始めればくすんだアクセントになります。ほかの 4 色も、明度と彩度が毎回少しずつ変わるため、同じ開始色と配色ルールでも、生成のたびに新しいバリエーションになります。

コントラストもチェックしますか？

いいえ。パレットのある色の上で別の色がどれだけ読みやすいかは確認しません。文字に使う組み合わせは、決める前にコントラストチェッカーで試してください。