1. 色を取る（スポイト・画像抽出）
商品写真や参考バナーを読み込んで、クリックで色を取り、全体の主要色も自動で抜き出します。「範囲の平均」は、文字を置きたい場所をドラッグで囲むと平均色と合う文字色を出します。
画像をここにドラッグ＆ドロップ、または
画像をクリックすると、その場所の色を選んだ色にします。
#E07B26
取った色（下の「2. 選んだ色」にも反映されています）
切り抜き
「切り抜き」モードで画像をドラッグすると範囲を選べます。比率を選ぶと、その形に合わせて範囲が決まります。
輪郭なぞり切り抜き
「輪郭をなぞって切り抜き」モードで、残したいものの周りを指でなぞってください。途中で指を離しても、続きからなぞれます。なぞり終わったら「輪郭を閉じて切り抜く」。
切り抜き結果（市松模様の部分が透明です）
画像の主要色（占有率つき）
2. 選んだ色（番号・コピー・階段）
各番号はクリックでそのままコピーできます。制作ツールへの貼り付けにどうぞ。
#E07B26
明るさの階段（クリックで選択）
最近取った色（履歴）
3. 配色を作る（役割つき）
選んだ色をメインに、ベース（70%）・メイン（25%）・アクセント／CTA（5%）の役割で配色します。比率バーで量のバランスも確認できます。
4. コントラスト判定
文字色と背景色の読みやすさ。AAは通常文字で4.5以上、大きな文字で3以上が目安です。
文字
背景
–
5. グラデーション
2色のあいだを作ります。中間の色もクリックで取れます。CSSもコピーできます。
色A
色B
6. バナー見本でA/B比べ
配色をダミーバナーに当てて並べます。「3. 配色を作る」で案を作り、A案／B案ボタンで反映してください。
A案
B案
7. 案件フォルダ（パレット保存）
バナーごとに「今の配色」を名前を付けて保存します。このブラウザ内にだけ保存されます。
試作版です。使いにくい所・足りない所はTODOとして教えてください。直します。