画像カラーパレット抽出ツール

使い方

1. 画像をドロップするか、クリックして選びます。コピーした画像を Ctrl+V（Mac は ⌘+V）で貼り付けることもできます。読み込んだ後に別の画像をドロップ・貼り付けすると入れ替わります
2. 読み込むとすぐに、画像に使われている色が「パレット」に多い順で並びます。各色に割合（%）と HEX・RGB・HSL の値が付きます
3. 「抽出する色の数」のスライダーで2〜16色を選びます。「並べ順」で、多い順・色相順・明るい順・暗い順を切り替えられます
4. 特定の位置の色がほしいときは、画像をクリック・タップするか、なぞります。「スポイトで取った色」に拡大した周りの画素と値が出ます。「パレットに追加」でパレットの最後に加わります
5. 値の表示（たとえば HEX #e61e28）を押すと、その値をコピーできます
6. 「書き出し」で形式を選び、「すべてコピー」か「ファイルで保存」を押します。「パレット画像（PNG）を保存」では、色見本を横に並べた画像を保存できます

具体例

赤 #e61e28 が画像の60%、青 #143cc8 が30%、白 #ffffff が10%を占める、25万画素以下のベタ塗りの画像を読み込むと、色の数を6にしていても、パレットは次の3色になります。画像に3色しかないので、同じ色を繰り返して6色にすることはありません。

#e61e28  rgb(230, 30, 40)   hsl(357, 80%, 51%)  60.0%
#143cc8  rgb(20, 60, 200)   hsl(227, 82%, 43%)  30.0%
#ffffff  rgb(255, 255, 255) hsl(0, 0%, 100%)    10.0%

25万画素より大きい画像は縮小してから数えるので、色の境目になめらかに混ざった中間色ができ、割合が少しずれたり、ごく少ない中間色が加わったりします。写真のように色が少しずつ変わる画像では、近い色どうしがまとめられ、指定した数の代表色になります。

色の取り出し方

• 画像は25万画素以下（長い辺は16384px以下）に縮小したコピーで数えます。スポイトは縮小せず、元の大きさの画像の1画素の色をそのまま読みます
• 不透明度が50%未満の画素は透明とみなし、数えません。透明な部分があるときは、その割合をパレットの上に表示します。パレットの割合は、色のある部分を100%とした値です
• 色を赤・緑・青それぞれ32段階のマス目に分けて数え、人の目の色の差に近い OKLab という色の空間で、k-means法（近い色どうしを決まった数のグループに分ける方法）を使って代表色を求めます
• グループ分けの最初の位置は乱数で決めますが、乱数の種を固定しているので、同じ画像と同じ色の数なら毎回同じ結果になります
• 見分けられないほど近い代表色（OKLab の距離が0.02未満）は1色にまとめます。そのため、色の少ない画像では指定した数より少なくなり、そのことをパレットの上に表示します
• 代表色は、グループに入った画素の平均の色です。平均は光の強さに直してから取ります。そのため、細かい模様の画像では、どの画素にもぴったり同じ色はない中間の色になることがあります。実際の画素の色がほしいときはスポイトを使ってください
• 割合は小数第1位までに丸めます。丸めた後の合計がちょうど100.0%になるように、端数の大きい色から0.1%ずつ配っています。配った後も0.0%になるごく少ない色は「0.1%未満」と表示します
• 色相順では、赤から黄・緑・青・紫の順に並べます。白・灰色・黒のような色みのない色は色相が決まらないので、最後に明るい順で並べます

スポイトの使い方

• 画像をクリック・タップすると、その位置の色を取ります。押したままなぞると、指の動きに合わせて取り直します
• 画像を選んだ状態（Tab キーで移動）で矢印キーを押すと、取る位置が長い辺の1%ずつ動きます。Alt キーと一緒に押すと1pxずつ動きます。Enter キーでパレットに追加します
• 拡大鏡は、取った画素を中心に縦横11画素ずつを表示し、真ん中の枠が取った画素です
• 半透明の画素では、色の値は透けていない状態のもので、不透明度を別に表示します。ブラウザの仕組み上、不透明度がごく低い画素では、色の値が数段階ずれることがあります。完全に透明な画素はパレットに追加できません
• スポイトで追加した色には割合がなく、「スポイト」と表示します。× ボタンで外せます。追加できるのは16色までで、パレットにすでにある色は追加しません。別の画像を読み込むと、追加した色は消えます

書き出しの形式

色は、パレットに表示している順に1から番号を付けて書き出します。スポイトで追加した色は最後に入ります。

• CSS — :root の中にカスタムプロパティとして --color-1: #e61e28; の形で書きます。color: var(--color-1); のように使えます
• SCSS — $color-1: #e61e28; の形の変数です
• Tailwind CSS v4 — CSS ファイルに貼る @theme { --color-palette-1: #e61e28; } の形です。bg-palette-1 や text-palette-2 のクラスで使えます
• Tailwind CSS v3 — tailwind.config.js の theme.extend.colors.palette に入れる形です。v3 でも bg-palette-1 のように使えます。設定ファイルに別の内容があるときは、palette の部分だけを写してください
• JSON — 色ごとに hex・rgb（3つの整数）・hsl（度・%・%）・percent（割合。スポイトの色は null）を持つ配列です
• HEX — 1行に1色の HEX の一覧です
• GIMP / Inkscape（.gpl） — GIMP や Inkscape で読み込めるパレットファイルです。Krita や Aseprite でも読み込めます
• パレット画像（PNG） — 1色160pxの色見本を横に並べ、下に HEX と割合を書いた画像です

ファイル名は、元の画像の名前に -palette を付けたもの（photo.jpg なら photo-palette.css など）になります。

FAQ

他のサイトで抽出した色と結果が違うのはなぜですか？

画像に「正解のパレット」はなく、縮小の仕方、色の差の測り方、グループ分けの方法と最初の位置によって結果が変わるためです。このアプリは同じ画像なら毎回同じ結果を出しますが、ほかのツールとは数%や数段階ずれることがあります。決まった位置の正確な色がほしいときはスポイトを使ってください。

指定した数より少ない色しか出ないのはなぜですか？

画像に使われている色が少ないか、代表色どうしが見分けられないほど近かったためです。同じ色を繰り返して数を合わせることはしません。イラストやロゴでは、縁のなめらかな部分の中間色が別の色として出ることもあります。そのときは色の数を減らしてください。

透明な PNG の背景は数えますか？

不透明度が50%未満の画素は数えません。透明な背景のアイコンやロゴでも、描かれている部分の色だけでパレットができます。すべての画素が透明な画像では色を取り出せず、その旨を表示します。

写真の色の値は正確ですか？

ブラウザが画面に表示する sRGB の色として読みます。Display P3 などの色の範囲が広い写真は、ブラウザが sRGB に変換した値になるので、編集ソフトで元の色空間のまま見た値とは違うことがあります。スマートフォンの写真は、記録された向き（Exif の Orientation）に合わせて読み込みます。

読み込める画像に上限はありますか？アニメーション GIF は使えますか？

ファイルサイズは50 MBまで、画素数（幅×高さ）は5000万画素までです。アニメーション GIF や APNG は最初の1コマだけを使います。HEIC など、ブラウザが表示できない形式は読み込めません。

画像はどこかに送信されますか？

送信されません。読み込み、色の計算、書き出しのすべてを端末のブラウザ内で行います。ページを閉じたり再読み込みしたりすると、画像も結果も消えます。

取った色のコントラスト比を詳しく確かめたいときは？

パレットの色見本の「Aa」は、白と黒のうち読みやすいほうの文字色で表示しています。WCAG の適合レベルや、任意の文字色との比を確かめたいときは、HEX をコピーしてカラーコード変換ツールに貼り付けてください。