写真を入れると3〜10色のパレットと色の位置が一緒に出ます: サンプル写真の代表6色は #ADB7B3, #D1CBC2, #0C464B, #F1BB8C, #251E1E, #F7E9DE
上のツールは、選んだ写真をブラウザ内で小さなマスに分けて読み取り、はっきり違う色を3〜10色選んでパレットカードにして見せます。最初に表示される浜辺の夕焼けの写真では、空のグレーがかった青 #ADB7B3(32%)と、雲のベージュグレー #D1CBC2(25%)がもっとも広く、海の濃い青緑 #0C464B、夕焼けの色 #F1BB8C、岩の黒っぽい茶色 #251E1E、太陽まわりの明るい空 #F7E9DE が続きます。
カードの写真に載った点は、その色が写真に実際にある位置です。選ばれた色が気に入らなければ、点を好きな場所にドラッグするとその位置の色に変わります。リストの色にカーソルを重ねると、写真の中でその色にまとめられた部分だけが明るくなります。同じ写真でも「代表色」「鮮やか」「落ち着き」のどれを選ぶかで、まったく違うパレットになります。完成したカードは、ポラロイド・縦3:4・ストーリー9:16・横16:9の実寸PNGとして保存でき、HEXのリストやCSS変数としてもコピーできます。写真はこのブラウザ内でのみ読み込まれ、サーバーには送信されません。
写真からパレットを抽出する場面
色をゼロから選ぶより、気に入った写真1枚から始めるほうが、なじみのよい配色を早く手に入れられます。写真の色は同じ光の下で一緒に写った色なので、互いにかけ離れた色が少ないからです。次のような場面で使えます。
- ブログ・チャンネル・小さなブランドの基本色を決めるとき: 雰囲気のある写真から落ち着いた色を3〜4色選んで背景と文字色の候補にし、鮮やかな色を1つボタンやアクセントに使います。点が示す位置を見れば、その色が写真のどこから来たのかを他の人にも説明できます。
- サムネイル・カードニュース・発表資料の表紙を写真に合わせるとき: 写真の横に置くタイトル帯や背景をその写真から選んだ色で塗ると、写真と文字がちぐはぐになりません。横16:9のカードは写真の横に色の帯が付いているので、そのままスライド表紙の下書きに使えます。
- 旅行や風景写真の配色を記録して共有するとき: ポラロイドやストーリーのカードとして保存すれば、写真と色コードが1枚にまとまり、あとで探し直したり人に送ったりしやすくなります。
- インテリア・服・小物の色選びの参考にするとき: 気に入った部屋の写真から壁・床・家具の色を分けてみると、どんな割合で色が使われているかを面積の割合で見当づけられます。ただし画面の色は実際の塗料や生地と違って見えることがあるので、選ぶときは実物の見本と見比べてください。
使い方
- 写真を入れる: 「写真を選ぶ」を押すか、ファイルを作業エリアにドラッグ＆ドロップするか、コピーした画像を Ctrl+V(⌘V)で貼り付けます。最初の画面にはサンプル写真が入っているので、すぐ試せます。
- 抽出タイプを選ぶ: 3つのタイプの帯が現在の色数であらかじめ抽出されているので、見比べて気に入ったほうを押します。
- 色数と並び順を決める: 色数は −・+ ボタンで3〜10の間で変えます。並び順は面積順・明るい順・色相順から選ぶと、カードとリストが同じ順序に変わります。
- 点で微調整する: ほしい色が抜けていたら、いちばん近い色の点を、その色がある場所へドラッグします。キーボードでは、点を Tab で選んでから矢印キーで1マスずつ、Shift+矢印キーで10マスずつ動かします。手動で動かした色には「手動で選択」の表示が付き、「自動に戻す」で最初の結果に戻ります。
- カードの形を選ぶ: ポラロイド・縦3:4・ストーリー9:16・横16:9から選び、カードに HEX コードと色の位置の点を入れるかどうかを決めます。カードの形の横に、保存されるサイズがピクセルで表示されます。
- 保存とコピー: 「PNG で保存」はプレビューと同じカードを実寸で保存します。「HEX をコピー」は1行に1つずつ、「CSS 変数をコピー」は
--palette-1: #ADB7B3;のような行を作り、リストの色を押すとその色の HEX だけがコピーされます。
代表色・鮮やか・落ち着き: 同じ写真から違うパレットが出る理由
3つのタイプは、同じ候補色32色から選びますが、選ぶ順序だけが違います。「代表色」は写真で広い面積を占める候補から、「鮮やか」は写真の0.3%以上を占める候補のうち彩度の高いものから、「落ち着き」は彩度が0.015〜0.09の穏やかな候補のうち面積の広いものから選びます。彩度は OkLCh の C、つまり Oklab の a・b の2軸で測った距離(√(a² + b²))です。下の表は、サンプル写真でタイプごとに6色を抽出し、面積の広い順に並べた結果です。
| 順位 | 代表色 | 鮮やか | 落ち着き |
|---|---|---|---|
| 1 | #ADB7B3 · 32% | #EAAD7F · 56% | #87AFAF · 24% |
| 2 | #D1CBC2 · 25% | #045D61 · 18% | #C5C0B4 · 22% |
| 3 | #0C464B · 14% | #51A4A7 · 13% | #E3D6CA · 21% |
| 4 | #F1BB8C · 12% | #9D794E · 5% | #3A2C2C · 12% |
| 5 | #251E1E · 10% | #7C6041 · 4% | #F1BB8C · 11% |
| 6 | #F7E9DE · 6% | #1F878E · 3% | #0C464B · 10% |
代表色には空・雲・海・岩のような広い面の色が入り、鮮やかには夕焼けのオレンジと波の青緑系が集まります。落ち着きには、しっとりしたグレーがかった青と、砂や雲のベージュが入ります。鮮やかの1位 #EAAD7F が56%にもなるのは、占有率を「写真のすべてのマスを、選んだ色のうちもっとも近い色に入れて数えた割合」で計算するためです。鮮やかの6色にはグレーがないので、空と雲のマスがいちばん近いオレンジにまとめて入ります。そのため同じ #F1BB8C でも、代表色では12%、落ち着きでは11%と少し違う値になります。
色を選ぶ計算
- マスに分ける: 写真を長辺256マスに分け(サンプル写真は256 × 170マス)、マスごとにピクセルの平均を取ります。長辺が256 pxより大きい写真ではマス1つに複数のピクセルが入るため、JPEG圧縮で生じた細かいノイズはマス平均でならされます(256 px以下の画像ではマスがそのままピクセルです)。半分を超えて透明なマスは数えません。
- 候補32色を作る: median cut(Heckbert 1982)でマスの色を32のグループに分けたあと、Oklab でいちばん近いグループに入れ直す調整(k-means、Lloyd 1982)を4回行います。Oklab は、人の目に似て見える差が似た距離になるように作られた色空間です。
- 候補ごとに実際の位置を探す: その候補に属するマスのうち、まわりの8マスもすべて同じ候補である「内側のマス」から、候補色にいちばん近いマスを選びます。画面に出る色はグループの平均ではなくこのマスの色なので、写真に実際にある色です。点もこのマスに置かれます。 同じ色のマスがいくつもあるときは、面の境目からいちばん遠いマスを選ぶので、ロゴのように一色で塗られた面では点が面のまん中に置かれます。
- タイプ順に並べて絞る: 上の表の順序で候補を見ていき、すでに選んだ色との ΔEOK(Oklab で測った2色の距離)が0.07以上の候補だけを選びます。サンプル写真の代表色では、面積1位の #D1CBC2(11.0%)を先に選び、2位の #E3D6CA(9.3%)と3位の #C5C0B4(7.6%)は #D1CBC2 との距離が0.040・0.036で0.07より近いため飛ばします。4位の #ADB7B3 は0.076離れているので2番目の色になります。
- 足りなければもう一度: 0.07の基準で色数を満たせなければ、0.035の基準でもう一度選びます。それでも足りなければ、色を少なく出してその旨を知らせます。同じ色を繰り返してマスを埋めることはしません。3色だけを使ったロゴでは、6色を指定しても3色しか出ません。
- 占有率を数える: 写真のすべてのマスを、選んだ色のうち Oklab でいちばん近い色に入れ、そのマス数の割合を占有率にします。点を動かすとその色が変わるので、占有率も数え直します。
CSS Color 4 は、OkLCh で0.02を、目でかろうじて気づける差(JND)としています。このツールの基準0.07はその3.5倍ほどで、パレット内で別の色として使うのに十分離れた距離として決めた値です。0.3%・0.015〜0.09・0.07・0.035はいずれもこのツールが決めた基準で、標準が定めた値ではありません。乱数を使わないので、同じ写真と同じ設定なら、いつも同じパレットが出ます。
点が示す位置
点は、上の手順3で選んだ「内側のマス」の中心です。まわりまで同じ色のマスを選ぶため、境界線の上よりも色の面の内側に置かれることが多くなります。サンプル写真の代表6色が置かれた位置は次のとおりです。座標は元の画像(1,440 × 958 px)の左上を (0, 0) として測った値です。
| 色 | 位置 (x, y) | 写真内の部分 | 明るさ L | 彩度 C |
|---|---|---|---|---|
| #ADB7B3 | (1240, 121) | 右上の空 | 0.770 | 0.012 |
| #D1CBC2 | (1026, 172) | 右上の雲 | 0.844 | 0.014 |
| #0C464B | (824, 679) | 砕ける前の波の濃い水 | 0.362 | 0.056 |
| #F1BB8C | (1066, 470) | 水平線の上の夕焼け色 | 0.830 | 0.088 |
| #251E1E | (903, 882) | 手前の岩 | 0.243 | 0.011 |
| #F7E9DE | (706, 346) | 太陽まわりの明るい空 | 0.942 | 0.021 |
リストの色にカーソルを重ねるか Tab でフォーカスを移すと、写真の中でその色にいちばん近くまとめられたマスだけが明るく残り、ほかは暗くなります。占有率の大きい色が実際にどこを占めているのか、小さい色が写真のどの部分から来たのかを、ひと目で確かめるのに使えます。点をドラッグすると、置いた位置のマスの色にその色が変わり、明るくなる範囲と占有率もあわせて計算し直されます。
カードの形とサイズ
カードは、プレビューと同じ形を決まったサイズのPNGとして保存します。写真はカードの写真エリアの比率に合わせて中央を切り抜いて埋め、余った部分は色のマスが埋めます。写真エリアの比率はカードごとに決まった範囲の中でだけ写真に合わせて変わり(下の表の「切り取られない写真の比率」)、その範囲を外れる写真は中央を基準に切り取られます。たとえばスマートフォンの縦写真(3:4)を縦 3:4 カードに入れると、写真エリアが1,080 × 1,110なので77.1%だけが残ります。サンプル写真(3:2に近い)を入れたときのサイズです。
| カードの形 | 保存サイズ(px) | 写真エリア(px) | サンプル写真が残る面積 | 切り取られない写真の比率(横 ÷ 縦) | 向いている用途 |
|---|---|---|---|---|---|
| ポラロイド | 1,080 × 1,228 | 960 × 768 | 83.2% | 0.80~1.25 | 白い縁の下に色の帯と HEX が付いた記録用カード |
| 縦 3:4 | 1,080 × 1,440 | 1,080 × 719 | 99.9% | 0.97~2.00 | 縦長のフィード投稿・ピン画像 |
| ストーリー 9:16 | 1,080 × 1,920 | 1,080 × 720 | 99.8% | 0.79~1.50 | スマホの縦全画面 |
| 横 16:9 | 1,920 × 1,080 | 1,440 × 1,080 | 88.7% | 0.89~1.33 | 発表スライド・ブログのアイキャッチ |
ポラロイドは写真エリアの比率を4:5〜5:4の範囲で写真に合わせるので、3:2の写真は左右が少し切られます。HEX コードを外すと下の文字の行がなくなり、高さが60 px 減ります。縦3:4はInstagramのヘルプに従いました。ヘルプには、写真を幅1,080 px でアップロードし、比率が1.91:1から3:4の間(高さ566〜1,440 px)なら元の解像度が保たれると書かれています。1,080 × 1,440 は、その範囲でもっとも縦に長いサイズです。色のマス上の HEX 文字は、その色の上で白文字と黒文字のうち、WCAG 2.2 のコントラスト比が大きいほうで描きます。
よくある間違い
- 白背景の商品写真で代表色の1位が白になる: 面積で選ぶと背景がいちばん広いからです。商品の色を見たいときは「鮮やか」に切り替えるか、写真を商品中心に切り抜いて入れます。
- 写真の小さなアクセントカラー(赤い傘、黄色い看板)が抜ける: 代表色は広い面から選ぶので、小さな色は後回しになります。「鮮やか」に切り替えるか色数を増やし、それでもなければ、近い色の点をその場所へドラッグして持ってきます。写真の0.3%に満たないごく小さな色は、「鮮やか」でも後ろに回ります。
- 同じ色なのにタイプごとに占有率が違う: 占有率は、一緒に選んだ色によって変わる値です。写真でその色が占める固定の面積として読まないでください。
- スマホ写真の色が写真アプリと少し違う: 最近のスマホはsRGBより広い色空間(Display P3など)で撮ることが多いのですが、ブラウザのキャンバスは既定がsRGBなので、その範囲に変換して読み取ります。Webで使う色なら、このsRGB値のほうが実際に見える色に近くなります。
- 画面から抽出した色をそのまま印刷や塗料選びに使う: HEX は画面の色です。印刷する色はRGB CMYK変換ツールで印刷条件に合わせて変換し、塗料や生地は実物の見本と見比べてください。
- 1点の正確なコードがほしい: このツールの色はマスの平均なので、ピクセル1つの値とは違うことがあります。ロゴの正確な1ピクセルの値は画像カラーピッカーで取ってください。
限界と注意点
- 色は長辺256マスのマス平均から抽出します。マスより細い線や小さな文字の色は、隣の色と混ざって出ます。
- 候補は32色までなので、ごく狭い面の色は候補に入らないことがあります。そうした色は、点をドラッグして手動で選んでください。
- 3つのタイプの基準(0.3%、彩度0.015〜0.09)と絞り込みの距離(ΔEOK 0.07・0.035)は、このツールが決めた値です。ほかのパレットツールは別の方法で選ぶため、同じ写真から違う色が出ることがあります。
- 長辺が2,048 px を超える写真は、そのサイズに縮小して読み取り、カードにも使います。保存するカードは最大でも1,920 px なので、画質への影響はほとんどありません。
- 透明な部分があるPNGは、半分を超えて透明なマスを数えず、カードでは白い背景の上に描きます。
- カードの HEX 文字は、端末に入っている等幅フォント(Menlo・Consolas など)で描くため、端末によって文字の形が少し違うことがあります。
表の値は、2026-10-20にサンプル写真(1,440 × 958 px)をこのツールで読み取った値です。マス数・候補数・絞り込みの距離・彩度の基準は、このツールの固定ルールであり、毎年変わる基準ではありません。カードサイズの根拠であるInstagramのヘルプとCSS Color 4(2026-10-09版)は、2026-10-20に確認しました。
出典
- 01Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut
- 02Lloyd, S. (1982). Least squares quantization in PCMIEEE Transactions on Information Theory 28(2), 129–137. k-means による調整
- 03Björn Ottosson — A perceptual color space for image processing2020-12-23. Oklab(線形sRGB → LMS → 立方根 → Lab)
- 04W3C CSS Color Module Level 4 (CRD 2026-10-09)§9.5 C = √(a² + b²)・H = atan2(b, a)、§14.2.1 OkLCh 1 JND = 0.02、§20.3 ΔEOK = Oklab のユークリッド距離
- 05WCAG 2.2 — contrast ratio, relative luminance(L1 + 0.05) ÷ (L2 + 0.05)、色のマス上の文字色の選択
- 06Instagram ヘルプ — Image resolution of photos you share on Instagram幅1,080 px、比率1.91:1〜3:4(高さ566〜1,440 px)なら元の解像度を維持 (2026-10-20確認)
- 07MDN — HTMLCanvasElement: getContext()2d コンテキストの colorSpace 既定値 "srgb"
- 08Wikimedia Commons — Sunset over beach (Unsplash).jpgCharlie Hang、CC0 1.0。サンプル写真(1,440 × 958に縮小)
よくある質問
写真はサーバーにアップロードされますか?
いいえ。選んだ写真はこのブラウザのキャンバスに描かれるだけで、色を抽出する計算もカードPNGの作成もすべてブラウザ内で行います。サーバーに送信も保存もされず、タブを閉じると消えます。
代表色・鮮やか・落ち着きはどう違いますか?
同じ候補色32色から選ぶ順序が違います。代表色は写真で広い面積を占める色から、鮮やかは写真の0.3%以上を占める色のうち彩度(OkLCh の C)の高い色から、落ち着きは彩度0.015〜0.09の穏やかな色のうち面積の広い色から選びます。どのタイプでも、すでに選んだ色と ΔEOK 0.07 以上離れた色だけを選びます。
抽出された色は写真に実際にある色ですか?
はい。色ごとに、写真を長辺256マスに分けたマスの中から1つを選び、そのマスの色をそのまま使います。候補グループ全体の平均ではなく写真内の1か所の色なので、カードの点がまさにその位置です。ただしマス1つは元のピクセル複数の平均なので、ピクセル1つの値とは少し違うことがあります。
ほしい色がパレットに出ないときはどうしますか?
まず「鮮やか」に切り替えるか、色数を増やしてみてください。それでもなければ、いちばん近い色の点をほしい色のある場所へドラッグすると、その位置の色に変わります。キーボードでは点を Tab で選んでから矢印キーで動かします。「自動に戻す」を押すと、最初に抽出した色に戻ります。
占有率を足しても100%にならないことがあるのはなぜですか?
色ごとに占有率を整数に丸めて表示しているためです。占有率は、写真のすべてのマスを選んだ色のうちもっとも近い色に入れて数えた割合なので、一緒に選んだ色が変わると、同じ色の占有率も変わります。
カードのサイズはどう決めましたか?
縦3:4のカードは、Instagramのヘルプに従って1,080 × 1,440 px にしています。ヘルプには、写真を幅1,080 px でアップロードし、比率が1.91:1〜3:4なら元の解像度が保たれると書かれています。ストーリー9:16は1,080 × 1,920、横16:9は1,920 × 1,080で、ポラロイドは幅1,080 px に対して高さが写真の比率で決まります。
同じ写真なら、いつも同じパレットが出ますか?
はい。乱数を使わないので、同じブラウザなら同じ写真と同じ設定(タイプ・色数)でいつも同じ色が出ます。ほかのブラウザではJPEGの展開や大きな写真の縮小のしかたが少し違うため、値がわずかに変わることがあります。ただしスマホの広い色空間(Display P3)で撮った写真は、ブラウザがsRGBに変換して読み取るため、写真アプリで見る値と少し違うことがあります。
画像カラーピッカーとは何が違いますか?
画像カラーピッカーは、写真の1点を押して、そのピクセルの HEX・RGB・HSL・CMYK コードを正確に読み取るツールです。このツールは、写真全体から互いに違う色をいくつか選んでパレットにし、色の位置とあわせて共有用のカードとして保存することに向いています。