画像からパレット抽出とは？

画像をアップロードすると、主要な色を抽出してすぐに使えるパレットを生成します。各色のHEX・RGB・HSL値が表示されるので、そのままデザインに取り込めます。

画像のピクセルを読み取り、中央値カット法でクラスタリングします。これは初期の GIF パレット生成と同じ方法です。3〜12 色まで指定でき、各色に HEX・RGB・HSL の値が付きます。JPG、PNG、WebP に対応します。

使い方

1. 画像（JPG、PNG、WebP）をツールエリアにアップロードまたはドラッグ＆ドロップします。
2. ツールが即座に主要な色を抽出し、スウォッチ付きのパレットとして表示します。
3. スウォッチをクリックすると、HEX・RGB・HSL形式のカラーコードをクリップボードにコピーできます。

使用するタイミング

• ムードボードから配色を抽出して、Web や印刷物のデザインに反映する。
• ブランドガイドがないとき、既存ビジュアルから主要色を逆算する。
• メインビジュアル写真からスライドや資料のアクセント色を選ぶ。

結果

ウェブデザイナーが夕焼けの写真をアップロードし、6色のパレットを抽出します。ディープオレンジ #E8751A、コーラルピンク #F2937C、スカイブルー #6BA3C7、ゴールド #D4A843、ウォームクリーム #FFF0D4、ダークパープル #3B2156 です。あとはこのカラーコードをそのままサイトのデザインに使えます。

よくある質問

「優勢な色」はどう判定していますか?

全ピクセルを色のバケットに分類し、ピクセル数が多いバケットを残します。なので小さく鮮やかなハイライトは、広いが地味な背景に負けます。その明るい部分を拾いたいときは、抽出モードを「鮮やか」に切り替えてください。

同じ画像でも実行ごとに色が少し変わるのはなぜ?

高速化のため、クラスタリングが一部ピクセルをランダムにサンプリングしているからです。複雑な写真では選ばれる画素がずれることがあります。再実行で大きく異なることは少なく、色数を減らすと結果は安定します。

6 色より多い、または少ない色は取れますか?

はい。色数コントロールで 3〜12 を選べます。少なめは全体のトーンを掴むのに、多めは微妙な差分を捉えるのに向きます。色数の多いイラストやグラデーション再現にも便利です。

コピーする形式は HEX・RGB・HSL のどれがよいですか?

CSS やデザインソフトなら HEX。SVG や canvas でチャンネル値が必要なら RGB。色相や明度を数学的に動かしたい場合(L 値を上げて明るくなど)は HSL が便利です。

画像はサーバーにアップロードされますか?

アップロードされません。デコードも解析もすべてあなたのデバイス上で行われます。社外秘のロゴ、未公開モックアップ、クライアント写真など、外部に共有できない画像でも安心して使えます。

関連ツール