Image Color Extractor

How to Use the Image Color Extractor

Drop an image onto the area above (or click to pick a file), and this tool extracts the dominant colors as a ready-to-use palette. Choose 4, 6, or 8 colors, then copy each value as HEX or rgb() with one click. The image is decoded, downscaled to at most 100 x 100 pixels on a canvas, and quantized with the median cut algorithm — entirely inside your browser. Nothing is uploaded.

Features

• Drag & drop or file picker input for PNG, JPEG, WebP, GIF and other browser-decodable formats
• Median cut quantization implemented in plain JavaScript — no server, no external library
• Selectable palette size (4 / 6 / 8 colors), sorted by how much of the image each color covers
• One-click copy for HEX and RGB notation, plus a copy-all button for the whole palette
• Fully transparent pixels in PNGs are excluded, so logo backgrounds never pollute the palette

What is Median Cut Quantization?

Median cut is a classic color quantization algorithm: all pixels start in one bucket in RGB space, and the bucket with the widest channel range is repeatedly split at its median until the requested number of buckets exists. The average color of each bucket becomes a palette entry. It is the same family of algorithm used by Pillow'sImage.quantize and ImageMagick's -colors, and it works well for photographs because it allocates more palette entries to color ranges that actually occur in the image.

Image Color Extractorの使い方

画像ファイルを点線のエリアにドラッグ&ドロップするか、クリックして選択すると、主要色のパレットが占有率の高い順に表示されます。 抽出色数は4・6・8色から選択でき、画像を読み込み直さずに切り替えられます。各スワッチのHEX表記・RGB表記はクリックするだけでクリップボードにコピーされます。 解析は最大100x100pxに縮小した画素データに対して行うため、数千万画素の写真でも一瞬で完了します。

実務での活用例

1. ブランド素材からテーマカラーを起こす

クライアントから「ロゴ画像しかない」状態でサイト制作を始めるケースは珍しくありません。透過PNGのロゴを読み込めば、 背景(アルファ0)を除いたロゴの実色だけがパレットになるので、そのままCSSカスタムプロパティやTailwindの テーマ設定に展開できます。コントラスト確認はColor Contrast Checkerが便利です。

2. 写真からの配色インスピレーション

風景写真や商品写真から6〜8色を抽出すると、ヒーローセクションの背景色・見出し色・アクセント色の候補が一度に得られます。 抽出した色を起点に補色・類似色を展開したい場合はColor Palette Generatorに HEXを渡して調和ルールで広げられます。

3. 資料・サムネイルの配色統一

プレゼン資料やYouTubeサムネイルで「スクリーンショットと文字色がちぐはぐ」になる問題は、 貼り込む画像から主要色を抽出し、その色を見出しや図形に使うことで解決できます。 社外秘のスクリーンショットでも、本ツールは画像を外部送信しないため安心して使えます。

よくあるエラーと対処 / Common Errors and Fixes

言語別コード例 / Code Examples by Language

このツールと同等の「縮小→画素取得→減色」をコードで再現する最小サンプルです。

Minimal snippets that reproduce the downscale → read pixels → quantize pipeline.

JavaScript (Canvas API)

// 縮小描画して画素を取得 / Downscale and read pixels
const bitmap = await createImageBitmap(file);
const scale = Math.min(1, 100 / Math.max(bitmap.width, bitmap.height));
const canvas = document.createElement("canvas");
canvas.width = Math.max(1, Math.round(bitmap.width * scale));
canvas.height = Math.max(1, Math.round(bitmap.height * scale));
const ctx = canvas.getContext("2d");
ctx.drawImage(bitmap, 0, 0, canvas.width, canvas.height);
const { data } = ctx.getImageData(0, 0, canvas.width, canvas.height);
// data は [R,G,B,A, R,G,B,A, ...] / RGBA byte sequence
// アルファ0を除外して medianCut へ / filter alpha=0, then median cut

Python (Pillow)

from PIL import Image

img = Image.open("photo.jpg").convert("RGB")
img.thumbnail((100, 100))
# メディアンカット法で6色に量子化 / Median cut to 6 colors
q = img.quantize(colors=6, method=Image.Quantize.MEDIANCUT)
palette = q.getpalette()[: 6 * 3]
colors = [tuple(palette[i : i + 3]) for i in range(0, 18, 3)]
print(["#%02x%02x%02x" % c for c in colors])

Shell (ImageMagick)

# 6色に減色して色一覧を表示 / Reduce to 6 colors and list them
magick photo.jpg -resize 100x100 -colors 6 -unique-colors txt:-

# HEXコードのみ抽出 / Extract HEX codes only
magick photo.jpg -resize 100x100 -colors 6 -unique-colors txt:- \
  | grep -oE "#[0-9A-F]{6}"

CSS (抽出結果の利用 / Using the result)

:root {
  /* Image Color Extractor の出力をそのまま変数化 */
  --brand-primary: #1d3557;
  --brand-accent:  #e76f51;
  --brand-surface: #f1faee;
}

Before / After 実例 / Before & After

例1: 夕景写真から6色パレット / Six colors from a sunset photo

入力 / Input: sunset.jpg (2400 x 1600 px, 1.8 MB)
→ 100 x 67 px に縮小して解析 / analyzed at 100 x 67 px

↓ 6色抽出 / Extract 6 colors

#1d3557  rgb(29, 53, 87)     28.4%   空の藍色 / deep blue sky
#457b9d  rgb(69, 123, 157)   21.7%   海面 / sea surface
#e76f51  rgb(231, 111, 81)   17.2%   夕日 / sunset orange
#f4a261  rgb(244, 162, 97)   13.5%   雲の反射 / lit clouds
#264653  rgb(38, 70, 83)     11.9%   岩場の影 / rock shadows
#e9c46a  rgb(233, 196, 106)   7.3%   砂浜 / sand

例2: 透過ロゴPNG(背景除外) / Transparent logo PNG with background excluded

入力 / Input: logo.png (512 x 512 px, 透過率 62% / 62% transparent)

↓ 4色抽出(アルファ0は集計対象外) / Extract 4 colors (alpha-0 pixels skipped)

#0f766e  rgb(15, 118, 110)   46.1%   ロゴ主色 / primary mark
#134e4a  rgb(19, 78, 74)     27.8%   シェード / shade
#5eead4  rgb(94, 234, 212)   19.4%   ハイライト / highlight
#f0fdfa  rgb(240, 253, 250)   6.7%   縁の半透明部 / semi-transparent edge

透過背景は0%として扱われるため、占有率はロゴの実ピクセルのみで計算されます。

The transparent background contributes nothing; ratios are computed over opaque pixels only.

Why browser-only? / なぜブラウザ完結か

Images are among the most sensitive files you handle: personal photos with faces and location metadata, unreleased product shots, client logos under NDA, screenshots of internal dashboards. Most online palette extractors upload your file to a server before returning a handful of HEX codes — an absurd trade for the task. This tool never makes that trade. The file is read with URL.createObjectURL, drawn onto an in-memory canvas, sampled with getImageData, and quantized by a median cut implementation written in plain JavaScript on this page. No upload endpoint exists, no analytics event carries pixel data, and you can verify it yourself: open DevTools, switch to the Network tab, drop an image, and watch nothing leave your machine. Closing the tab destroys every trace of the image.

画像は顔や位置情報を含む私的な写真、未発表の製品画像、NDA下のクライアントロゴなど、扱うファイルの中でも特に機密性が高いものです。 サーバー型のパレット抽出ツールでは、数個のHEXコードを得るためだけに画像全体を第三者へ送信することになります。 本ツールは読み込みからメディアンカット量子化まで全てブラウザ内で実行し、アップロード先のエンドポイント自体が存在しません。 DevToolsのNetworkタブが空のままであることを、いつでもご自身で確認できます。