画像から色抽出・パレット
画像を選ぶだけで主要な色を抽出し、カラーパレットにまとめます。各色のHEXとRGBをコピーでき、占有率もひと目で確認できます。処理は端末内で完結し、画像はサーバーに送信されません。
例（クリックで試す）
画像を選んでみて。すぐに主要な色を取り出します。画像はブラウザの中だけで処理され、外には出ません。
画像から色抽出・パレット生成ツールの使い方
はじめての方は、まず「🖼 サンプル画像で試す」を押してみてください。用意した画像からすぐに主要色のパレットが表示され、操作の流れがつかめます。慣れたら自分の画像を選びます。各色のHEX・RGBと占有率が表示され、クリックひとつでコードをコピーできます。すべてブラウザ内で処理されるので、画像は外に出ません。
- 色を抽出する画像を選びます。プレビューと抽出結果が表示されます。
- 色数（4〜10色、既定は6色）を選びます。色数を変えるとパレットも作り直します。たとえばロゴ用に主役の色だけ欲しいときは4色、配色のバリエーションを広く見たいときは10色を選びます。
- 気になる色のスワッチをクリックするか「HEXをコピー」を押すと、その色のHEXコード（例:
#4a90d9）がコピーされます。 - すべてまとめて使いたいときは「HEXをまとめてコピー」を押すと、改行区切りで全色のHEXが一度に取得できます。
使用例：写真からWebサイトの配色を起こす
たとえば青空と緑の丘が写った風景写真を読み込むと、ドミナントカラーとして空の青#4a90d9が先頭に並び、続けて丘の緑#7cb342や太陽の黄#f2c94cなどが占有率つきで抽出されます。気に入った色のスワッチをクリックして#4a90d9をコピーし、そのままCSSのbackground: #4a90d9;やデザインツールのカラーピッカーに貼り付ければ、写真の雰囲気に合った配色をすぐに再現できます。色数を変えれば、メインカラー1色だけ抜き出すことも、アクセント候補まで広げて見ることもできます。
ベテラン向けのヒント
- 各色のHEXを個別にコピー：スワッチ自体がコピーボタンになっています。クリックするだけでHEXがクリップボードに入るので、CSSやデザインツールへ続けて貼り付けられます。
- HEXをまとめてコピー：全色のHEXを改行区切りで一括取得し、トークン定義やパレット表に流し込めます。
- 色数を指定：4〜10色を切り替えると即座に再抽出。粗く主役だけ、または細かく候補を増やす、を素早く比較できます。
こんな場面で便利です
- 写真やロゴの雰囲気に合わせて、Webサイトやスライドの配色を決めたいとき
- ブランドカラーやキービジュアルからカラーパレットを起こしたいとき
- イラストや作品の使用色をHEX/RGBで控えておきたいとき
- 気に入った画像のドミナントカラー（主役の色）をひとつ知りたいとき
よくある質問
選んだ画像はサーバーに送信されますか？
いいえ。画像の読み込みと色の抽出はすべてお使いのブラウザ内で行われ、画像がサーバーに送信・保存されることはありません。安心してご利用いただけます。
色はどうやって抽出していますか？
画像を長辺200px程度まで縮小したうえで全画素の色を読み取り、近い色をまとめて頻度を集計する量子化で代表色を選びます。先頭にはもっとも面積の大きいドミナントカラーが並び、各色には占有率（%）も表示されます。透明な画素は無視します。
抽出した色のコードはどうやって使えますか？
各色のスワッチにはHEX（#RRGGBB）とRGB（rgb(r, g, b)）を併記しています。スワッチをクリックするか「HEXをコピー」ボタンを押すとHEXコードがクリップボードにコピーされ、デザインツールやCSSにそのまま貼り付けられます。色数は4〜10色から選べます。