無料画像カラーパレット抽出ツール
K-means カラー量子化を使用して、任意の画像から主要な色を抽出します。写真またはロゴの上位 2 ～ 16 色の 16 進コードを取得します。
ここにファイルをドロップするか、クリックして選択
JPG, PNG, WebP, GIF, HEIC, HEIF · デバイス上で処理
または Ctrl+V でクリップボードから貼り付け
ヒント: Ctrl+V でスクリーンショットを貼り付けられます
ファイルがデバイスを離れることはありません。すべての処理はブラウザ内でローカルに行われます。
主な用途
- ロゴからブランドカラーを抽出任意のロゴまたはブランド画像の主要な色の正確な16進コードを取得します。
- 写真からウェブカラーパレットを構築ヒーロー写真または背景画像から、一致するウェブサイトカラーパレットを生成します。
- インスピレーション写真から色を抽出インテリアデザインまたはファッション写真からカラーパレットを抽出し、自分のプロジェクトで使用します。
- 絵画とアートワークのパレットを分析主要な色を抽出することで、有名な絵画または自分のアートのカラーパレットを研究します。
- 画像からCSSテーマを作成画像からCSS変数テーマを生成します。動的テーマまたは自動生成されたカラースキームに役立ちます。
使い方
色の抽出は、Canvas APIから読み取った生のピクセルデータに適用される手書きのk-means++クラスタリングアルゴリズムを使ってブラウザ内で完全に行われます — サーバー、サードパーティライブラリは不要です。同じ画像と色数の設定は常に同じパレットを生成します。これは、アルゴリズムがMath.randomではなく決定論的な疑似乱数生成器（mulberry32）を使用するためです。
- 1Canvasがピクセルデータを読み取る画像はオフスクリーンのHTML Canvas要素に描画され、最も長い辺が最大200pxにダウンサンプリングされます。Canvas APIのgetImageData()はすべてのピクセルを生のRGBAバイトとして返し、完全に透明なピクセル（アルファ<128）はクラスタリング開始前に破棄されます。
- 2k-means++がピクセルをクラスタリングするk-means++イニシャライザーがセントロイドを決定論的にシードし、その後アルゴリズムは最大20回反復します：各ピクセルはRGB空間で最も近いセントロイドに割り当てられ、その後セントロイドは割り当てられたすべてのピクセルの平均として再計算されます。同じ16進値に収束したクラスターは統合されるため、結果内の各スウォッチは重複しません。
- 3色ごとのメタデータが計算される各セントロイドはHEX、HSL、全ピクセルに占める割合（パーセンテージ）に変換されます。WCAG相対輝度は標準の式に従って計算され、黒と白の両方に対するコントラスト比が各スウォッチと並んで表示されます。
- 4エクスポートとスポイト出力パレットはCSSカスタムプロパティ、SCSS変数、Tailwind設定スニペット、またはJSONとしてコピーできます。クリックしてサンプルするスポイトは、プレビュー上のクリックを、全解像度のキャンバス上の正確な元のピクセル座標に逆マッピングし、そのピクセルの色を別の「選んだ色」リストに追加します。PNGパレットストリップはCanvasのtoBlob()を介してダウンロードできます。
あなたの画像は一切アップロードされません — ブラウザのメモリ内で完全にデコード・処理され、アナリティクスにはファイルサイズ（KB単位）のみが報告されます。
ガイド
実例
ドロップ領域の下の「サンプルを試す」を押します。ファイルチップに sample-image.png と表示され、スライダーには「色数 (6)」と出ます。サンプルは、青緑、空色、紫のグラデーションにパステルの円の列と LibraTool という文字が入った画像なので、スウォッチのほとんどが青系になります。テスト実行では、一覧は #189AE3(38.5%)、#0D9CB6(28.7%)、#4C69EB(26.1%)で始まり、そのあとに 3.1%、2.2%、1.4% の小さな3色が続きました。最初のスウォッチには rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5% と表示され、コントラストの行には、黒い文字で 6.8:1、白い文字で 3.1:1 と出ます。スライダーを 2 にすると、#238DD7(92.9%)と #ADC0CA(7.1%)になります。6 に戻し、「エクスポート形式」で CSS を選んで「コードをコピー」を押すと、--color-1: #189ae3 で始まる :root ブロックがコピーされます。「PNG ストリップをダウンロード」は sample-image_palette.png を保存します。ブラウザーによってサンプルの文字の描画が少し異なるため、16進コードは数段階ずれることがあります。
使用する設定と制限事項
- いちばん手早い方法で画像を追加しましょう。 ドロップ領域にファイルをドロップするか、「ファイルを参照」を押すか、Ctrl+V でスクリーンショットを貼り付けます。タッチ画面では、ドロップと貼り付けの案内は非表示になり、「ファイルを参照」が入り口になります。JPEG、PNG、WebP、GIF に対応し、iPhone の HEIC 写真は先に変換され、「iPhone の写真を変換しています…」と表示されます。「またはファイルの URL を貼り付け」は、アドレスから画像を取得しますが、そのサイトが許可している場合だけ動作します。画像を開いたままもう一度貼り付けると、置き換えられます。「サンプルを試す」は、1200 × 800 のテスト画像を読み込みます。
- スライダーで「色数」を設定しましょう。 スライダーは 2〜16 で、初期値は 6 です。ラベルには「色数 (6)」のように数が表示されます。少ない数では大まかなパレットになり、多い数では小さなアクセントも拾われます。スライダーの値より少ないスウォッチが表示されることがありますが、同じ16進コードに丸められる色は統合され、空のグループは除かれるためです。検索は固定のシードから始まるため、同じ画像と同じ色数なら、常に同じパレットになります。各スウォッチには、38.5% のように画像に占める割合が表示され、最も大きい割合が先頭に来ます。
- スウォッチは平均色であることを覚えておきましょう。 画像は長辺が最大 200 px に縮小され、ほぼ透明なピクセル(アルファ値が 128 未満)は無視され、残りは RGB の距離で最大20回のグルーピングが行われます。各スウォッチは、1つのグループの平均です。そのため、画像のどこにもその色がそのまま現れないことがあり、細いアクセントは隣のグループに混ざることがあります。正確な色が必要なときは、スウォッチに頼らず、画像をクリックしてください。
- 画像をクリックして、ピクセルの色を正確に取得しましょう。 画像の下には「画像をクリックしてピクセルの色をサンプリング」と表示されます。クリックのたびに、縮小したコピーではなく、元のサイズの画像から1ピクセルを読み取ります。プレビューが元の画像より小さくても、余白があっても同じです。選んだ色は 16進コード付きのチップとして表示されます。チップをクリックするとコピーされ、× を押すと削除されます。すでに選んだ色は重複して追加されず、保持されるのは最新の12色だけで、余白をクリックしても何も起こりません。選んだ色はスウォッチとは別で、書き出しには含まれません。
- コントラストの行を使って、文字の色を選びましょう。 各スウォッチの下のコントラストの行には、その色の上に黒い文字と白い文字を置いたときの比率が、小数第1位まで表示されます。比率は WCAG の相対輝度の式を使います。このサイトのカラーパレット生成ツールは 4.5:1 を AA としているので、本文には、それを下限として扱ってください。サンプルでは、#4C69EB は黒で 4.5:1、白で 4.6:1 のため、どちらも快適ではなく、#DAEFFB は黒で 17.7:1 です。
- コードに合った書き出しを選びましょう。 「エクスポート形式」で CSS、Tailwind、SCSS、JSON のいずれかを選び、プレビューボックスを確認して、「コードをコピー」を押します。CSS は --color-1 から始まる :root 変数、SCSS は $color-1 から、Tailwind は palette-1 からで、いずれも小文字の16進コードです。JSON は、各色を大文字の16進コード、rgb の数値、小数第1位までの割合で示します。「パレット全体をコピー」は、16進コードをカンマ区切りでコピーします。「PNG ストリップをダウンロード」は、各色がその割合の幅で並んだ 1000 × 200 の画像を、photo_palette.png のような名前で保存します。
よくある問題とその解決方法
- 「画像を読み込めませんでした。ファイルが破損しているか、サポートされていない形式の可能性があります。」と表示されます。
- ブラウザーはファイルを受け付けましたが、画像としてデコードできませんでした。よくある原因は、破損したファイルや、ダウンロードが途中のファイル、ブラウザーが描画できない画像です。元のファイルを別のプログラムで開き、JPEG または PNG として保存または書き出し直してから、新しいファイルを追加してください。このメッセージが出ている間、スウォッチの一覧は空のままです。
- 「report.pdf は PDF ファイルのため、このツールでは開けません。」と表示されます(ファイル名と種類はお使いのものになります)。
- ドロップ領域はファイルの先頭バイトを読み取るため、PDF の名前を .jpg に変えても意味がありません。このツールが開けるのは、JPEG、PNG、WebP、GIF、iPhone の HEIC 写真です。AVIF、BMP、TIFF、SVG ファイルは受け付けられません。判別できないファイルには「File type not supported」とそのファイル名が表示されます。先に画像を JPEG または PNG に変換してください。メッセージの後に、そのファイルを開けるツールへのリンクが表示されることがあります。0 バイトのファイル(OneDrive や iCloud のプレースホルダーであることが多い)には、先にダウンロードするよう求める専用のメッセージが表示されます。
- 「そのサイトは、他の Web サイトがファイルをダウンロードすることを許可していません。ファイルを先にお使いの端末にダウンロードしてから、ここにドロップしてください。」と表示されます。
- これは「またはファイルの URL を貼り付け」と「取得」のあとに表示されます。ブラウザーが相手のサイトに画像を要求しますが、ほとんどのサイトは、他の Web サイトによるファイルのダウンロードを許可していません。代わりに、画像を端末に保存して、ドロップ領域にドロップしてください。別のメッセージ「リンクがエラーを返しました(HTTP 404)」(ステータス番号はお使いのもの)は、アドレス自体が失敗したことを意味するため、アドレスを確認するか、ファイルを保存してここにドロップしてください。
- スライダーは「色数 (12)」なのに、スウォッチがそれより少なく表示されます。
- 同じ16進コードに丸められる色は統合され、空のグループは除かれるため、ロゴ、スクリーンショット、単純なグラフィックのような平坦な画像では、スライダーの値より少ないスウォッチになります。問題はありません。ほぼ透明なピクセルも無視され、完全に透明な画像ではスウォッチがまったく出ません。よりシンプルなパレットにするには、スライダーを下げてください。より繊細な色合いを得るには、写真で最大 16 まで上げてください。
- 「クリップボードにコピーできませんでした。」と表示されます。
- ブラウザーがコピーを拒否しました。ページが安全でない場合、フレーム内に表示されている場合、ブラウザーがクリップボードへのアクセスをブロックしている場合に起こります。メッセージは、スライダーを動かすか別の画像を読み込むまで残ります。ページを一度クリックして、もう一度試してください。それでも失敗する場合は、「エクスポート形式」の下のプレビューボックスにあるテキストを選択して手動でコピーするか、「PNG ストリップをダウンロード」でパレットを画像として保存してください。
比較
デザインアプリのスポイトは正確なピクセルを読み取りますが、このツールもクリックのたびにそれを行います。このツールが加えるのは、画像全体の色をグルーピングして求めた、主要な色の一覧です。画像全体を使うため、大きな背景が一覧を占めてしまい、範囲を選んだり、先に背景を取り除いたりする手段はありません。最大 200 px のコピーから処理し、色に名前は付けず、色相順にも並べません。画像はブラウザー内で読み取られるため、色はお使いの端末から出ません。写真ではなく1つの色からパレットを作るには、カラーパレット生成ツールを使ってください。