Zeraku
← ツール一覧に戻る
🎨
🌐 ブラウザで動作⏱ 処理時間: 1–3 seconds

カラーパレット抽出

任意の画像からドミナントカラーパレットを即座に抽出

今すぐ無料で試す

カラーパレット抽出とは？

画像をアップロードし、k-meansクラスタリングを使用してドミナントカラーパレットを抽出。HEX、RGB、HSL、CMYKコードを取得。パレットをCSS、JSON、Adobe ASE、Figmaトークンにエクスポート。

主な機能

k-meansクラスタリングで2〜16のドミナントカラーを抽出

各カラーのHEX、RGB、HSL、CMYK値を取得

カラー比率の可視化

CSSカスタムプロパティ、JSON、Sass変数にエクスポート

Adobe ASE（スウォッチ）ファイルエクスポート

FigmaデザイントークンJSONエクスポート

アクセシビリティチェック：抽出されたカラー間のWCAGコントラスト比

ドラッグ＆ドロップまたはURL入力

使い方

1

画像をアップロード

画像をドロップするか、公開画像URLを入力します。JPEG、PNG、WebP、GIFをサポート。

2

クラスタリング

ダウンサンプリングされたピクセルデータでk-meansが実行され、ドミナントカラークラスターを特定します。

3

パレットを確認

正確なカラーコード付きのスウォッチを確認します。カラー数（2〜16）を調整します。

4

エクスポート

コードをコピーするか、希望するフォーマットでパレットをエクスポートします。

こんな方におすすめ

  • →ロゴ画像からブランドパレットを抽出するデザイナー
  • →リファレンス画像からカラーテーマを作成する開発者
  • →リファレンスアートワークのカラースキームを分析するアーティスト
  • →ブランドカラーの一貫性を確保するマーケター

なぜZerakuのカラーパレット抽出を選ぶのか

Adobe ColorやCoolorsは定番のパレットツールですが、カラーを抽出するために画像をアップロードする必要があります。未発表の製品ショットやクライアントのブランドアセットでは懸念があります。ZerakuのColor Palette Extractorはk-meansクラスタリングアルゴリズム全体をブラウザ内で実行します。画像はローカルに留まります。デザインワークフローで直接使用するためにCSS変数、JSON、またはAdobe Swatch Exchange（.ase）形式でエクスポートできます。

デザインをアップロードせずにカラーを抽出

Adobe ColorやCoolorsはカラー抽出のために画像のアップロードが必要です。未発表の製品画像やクライアントの仕事では問題になります。Zerakuはk-meansクラスタリングをブラウザ内で完全に実行します。

ZerakuAdobe ColorCoolors
プライバシー（画像送信なし）✓ブラウザ完結✗サーバー送信✗サーバー送信
CSS変数エクスポート✓無料✗✓有料プランのみ
Adobe Swatchエクスポート✓無料✓Adobe CC必要✓有料プランのみ
カラー数の調整✓2〜16色✗固定△最大10色
アカウント必要✗不要✓Adobe ID必要△一部機能に必要

初心者向け解説

Color Palette Extractorは画像の中で最も目立つ色を自動識別し、デザイン作業で使えるパレットに変換します。写真、ブランドのスクリーンショット、任意の画像をアップロードすると、ツールが主要な色をHEXコード、RGB値、HSL値で返します。抽出する色数（2〜16）を選択し、色相や明度で並び替え、スタイルシートにそのまま貼り付けられるCSS変数としてパレットをエクスポートできます。

技術仕様

ピクセルサンプリングはオフスクリーンキャンバスを使用して画像をデコードし、代表的なサブセット（画像面積に比例したストライドでサンプリングされた最大10,000ピクセル）を抽出します。k-means++アルゴリズムはWeb Workerで最大100回のイテレーションまたは重心移動が0.1ピクセル距離の閾値を下回るまで実行されます。sRGB、HSL、HSV、CIE LAB間のカラースペース変換は標準のIEC 61966-2-1とD65光源公式を使用します。「並び替え」オプションはLABのL*（輝度）、HSLのS（彩度）、HSLのH（色相）でスウォッチを並べ替えます。エクスポートされたPNGスウォッチはcanvas.toDataURL()で生成され、CSS/JSON/ASE出力はテキストBlobとして構築されオブジェクトURLでダウンロードが提供されます。

よくある質問

関連ツール

カラーパレット抽出を試してみませんか？

カラーパレット抽出を開く — 無料