カラーパレット抽出ツール
写真やアートワークから主要なカラーパレットをブラウザ上で瞬時に抽出。HEX、RGB、HSLコードをワンクリックで取得できます。
ここに画像をドロップしてください
またはクリックして閲覧 — JPG、PNG、WebP
あらゆるフォーマットで色彩を
写真、アートワーク、スクリーンショット、ブランドアセットなど、あらゆる画像からすぐに使えるカラーパレットを抽出できます。すべてローカルで処理されます。
主成分色の抽出
メディアンカットアルゴリズムを使用して、画像内で最も頻繁に出現するピクセルだけでなく、視覚的に最も重要な色を見つけ出します。
HEX、RGB、HSL出力
抽出されたすべての色は、ワンクリックでコピーをボタン付きで、3つのフォーマットすべてで表示されます。CSS、Figma、またはSketchに直接貼り付けることができます。
パレットサイズ調整可能
4色、6色、8色、または12色を抽出します。用途に合わせて適切な詳細レベルを選択してください。
完全非公開 — 未アップロード
色分析はCanvas APIを使用してブラウザ内で完全に実行されます。画像がデバイスから外部に送信されることはありません。
ワンクリックコピー
任意のカラーサンプルをクリックすると、そのカラーのHEXコードがクリップボードにコピーを。必要に応じて、RGBまたはHSLに切り替えてください。
CSS変数としてエクスポート
抽出したパレットをCSSカスタムプロパティのスニペットとしてダウンロードすれば、任意のスタイルシートにそのまま挿入できます。
カラーパレット抽出ツールは誰が使用していますか？
ビジュアルアセットから使用可能なカラーコードを抽出する必要のあるデザイナー、開発者、マーケター。
UIおよびWebデザイン
クライアントの写真やロゴからブランドに合った色を抽出し、一貫性のあるデザインシステムのカラーパレットを作成します。
- ブランド写真からデザイントークンを作成する
- UIの色をヒーローイメージに合わせる
- モックアップからCSS変数を抽出する
マーケティング＆ソーシャルメディア
ソーシャルメディアの投稿、広告、スライドの色が、商品写真やキャンペーン画像の色合いと一致していることを確認してください。
- 広告の背景を商品写真に合わせる
- キャンペーンヒーロー画像からパレットを抽出
- 一貫性のあるスライド配色を作成する
アート＆イラストレーション
参考写真、絵画、またはムードボードから限られた色数を選び、それを参考に自分の色選びをしてみましょう。
- 参考写真からパレットを抽出
- 研究用の絵画からのサンプルカラー
- ムードボードのカラーセットを作成する
3つのステップで色を抽出する方法
写真、スクリーンショット、またはアートワークをアップロードエリアにドラッグ＆ドロップしてください。JPG、PNG、WebP形式に対応しています。
抽出する色の数を選択してください。ブランドカラーパレットを絞り込む場合は4色、詳細な分析を行う場合は12色まで選択可能です。
いずれかのカラーサンプルをクリックすると、そのHEXコードがコピーを。または、パレット全体をCSS変数スニペットとしてダウンロードすることもできます。
よくある質問
画像からカラーパレットを抽出する際のよくある質問。
色の抽出はどのように行われるのですか？
このツールは、Canvas APIを介して画像のピクセルデータにメディアンカットアルゴリズムを適用します。色空間をクラスターに分割し、各クラスターから最も代表的な色を選択することで、統計的な平均値ではなく、視覚的に意味のある主要な色を抽出します。
私の画像はサーバーにアップロードされていますか？
いいえ。すべての色分析はブラウザ内で完結します。画像はデバイスから外部に送信されることはなく、データがサーバーに送信されることも一切ありません。
どのようなカラーフォーマットがサポートされていますか？
抽出された各色は、HEX（例：#3a7bd5）、RGB（例：rgb(58, 123, 213)）、およびHSL（例：hsl(215, 63%, 53%)）で表示されます。任意のカラーサンプルをクリックすると、お好みの形式で値がコピーを。
いくつの色を抽出できますか？
抽出できる色数は4色から12色までです。ブランディング作業の場合、通常は4～6色が最もクリーンな色調が得られます。詳細なアート分析を行う場合は、8～12色を使用することで画像のトーンレンジをより多く捉えることができます。