画像からカラーパレットを抽出。
画像を選ぶと、主な色を多い順に HEX コードで取り出し、そのままコピーできます。ブラウザ内で動くので、画像がお使いのデバイスの外に出ることはありません。
画像を選ぶと、主な色が表示されます。
ブラウザ内で動作します。ここに追加したものはアップロードも保存もされません。
画像から色を抽出する方法
- 画像を選ぶか、上の枠にドロップします。写真、気に入ったデザインのスクリーンショット、ロゴ、モックアップなどです。
- 色の数を 5〜8 の間で設定します。 初期値は 6 です。
- パレットを確認します。 主な色が多い順に、画像に占める割合と HEX コード付きで表示されます。
- HEX コードを 1 つずつ、またはカンマ区切りでまとめてコピーします。画像をクリックすると、別の画像を試せます。
パレットから DESIGN.md、そして Codex へ
色のリストだけでは、どの色をどこに使うのかが Codex に伝わりません。それぞれの色に役割を与えて一度書き出しておけば、Codex がデザインするすべての画面が同じパレットを使います。
- 参考画像から色を抽出します。 雰囲気を表す写真、ブランドの画像、気に入ったデザインの方向性のスクリーンショットなどです。
- それぞれの色に役割を与えます。 割合がヒントになります。面積が大きく明るい色はたいてい背景（
neutral）、暗い色は文字（on-surface）、強い色はメインのアクション（primary）、小さなアクセントはsecondaryかtertiaryの色になります。 - コントラストチェッカーで文字の組み合わせを確認します。 写真からそのまま取った色は、上に置く文字を読みやすくするために、少し暗くしたり明るくしたりする必要があることがよくあります。
- HEX コードを DESIGN.md ジェネレーターに貼り付け、フォントと余白を加えて、プロジェクトのルートにファイルを保存します。
- DESIGN.md のガイドにあるように、AGENTS.md からCodex に参照させます。それ以降、Codex は画面ごとに新しい色を選ぶのではなく、これらの色を使います。
役割の割り当てを Codex に任せたいなら、コードをプロンプトに貼り付けましょう。
パレットを DESIGN.md に
これは参考画像の主な色です：[HEX コードを貼り付け]。これらを DESIGN.md の色の役割、primary、on-primary、secondary、tertiary、neutral、surface、on-surface に割り当ててください。primary の上の on-primary、surface と neutral の上の on-surface が、コントラスト比 4.5:1 以上になるようにしてください。満たさない場合は、色相を保ったまま明度を調整してください。そのうえで、リポジトリのルートの DESIGN.md に色を書き込んでください。
よくある質問
無料ですか？
はい。無料で、登録も不要、試せる画像の数にも制限はありません。
画像はアップロードされますか？
されません。ブラウザがお使いのデバイス上で画像を読み込んで分析し、どこにも送信・保存されません。サイトが記録するのはツールが使われたという回数だけで、画像は記録しません。
色はどうやって選ばれますか？
まず画像を、長い辺が最大 160 ピクセルになるまで縮小します（色を調べるにはこれで十分です）。次に似たピクセルをグループにまとめ、各グループの平均色を、画像に占める割合とともに表示します。小さなアクセントカラーは、ほかの色とはっきり違い、画像の 0.5% 以上を占めていれば独立した色として表示されますが、輪郭に沿って混ざり合ったピクセルは表示されません。透明な部分は無視され、同じ画像からは常に同じパレットが得られます。
指定した数より色が少ないのはなぜ？
画像にそれだけ多くの異なる色がないためです。数色しか使っていないフラットなロゴなどでは、設定した数より少なくなることがあります。