Is my image uploaded to a server?

No — all processing happens entirely in your browser using the HTML5 Canvas API. Your image is read locally, drawn onto a hidden canvas, and pixel data is analyzed in JavaScript. Nothing is sent over the network, making the tool both faster and more private than server-based alternatives.

Why does the extracted palette look different from what I expected?

The tool uses color quantization — it groups similar pixel colors into buckets and returns the most common ones. High-frequency subtle gradients may get merged into one representative color. Increase the color count slider to get a more granular palette. For small features like a logo, crop the image before uploading.

What image formats are supported?

Any format your browser's Image element can decode: JPEG, PNG, WebP, GIF (first frame only), AVIF, and SVG. Very large images are automatically scaled down to 200x200px before analysis to keep processing fast — this doesn't affect accuracy since we're looking at color distribution, not fine detail.

Can I extract colors from a screenshot or photo?

Yes — screenshots, product photos, brand logos, UI mockups. Drag and drop any image. The color palette is useful for matching brand colors, creating CSS variables from a design, or generating a color scheme inspired by a photograph.

How is this different from a regular color picker?

A color picker samples one pixel at a time. This tool analyzes the entire image at once and automatically identifies dominant color groups, saving you from manually sampling dozens of spots. It's particularly useful when you have a complex image and want to know its overall color distribution.

画像カラー抽出ツール

画像をアップロードすると、主要な色をHEXとRGB値で即座に抽出します。写真、ロゴ、スクリーンショットの色をマッチングしたいデザイナーに最適なツールです。

🖼️

ここに画像をドロップするかクリックしてアップロード

JPG、PNG、WebP、GIF対応 — ブラウザでローカル処理

色の数8

仕組み

すべてのピクセルをサンプリングし、似た色調をグループ化（色量子化）して最も多く使われているグループを返します。すべての処理はブラウザで行われ、画像がサーバーにアップロードされることはありません。

使い方

1Drag and drop your image onto the upload area, or click to open the file picker. Any web image format works: JPEG, PNG, WebP, GIF, SVG. Your image stays in the browser — nothing is uploaded to any server.
2Adjust the color count slider before or after uploading. 6-8 colors is good for most images. Push it to 12-16 for images with many distinct hues like a watercolor painting or infographic. For logos and brand images, 4-6 colors is usually enough.
3The palette strip at the top shows the colors proportionally by how much they appear in the image. Click any color swatch to copy its HEX code. Use 'Copy all' to get the full list as HEX + RGB + percentage for pasting into a design tool.
4Use the extracted colors in your CSS as variables, in Figma/Sketch as swatches, or in any design tool's color picker by entering the HEX code. The percentage shows how dominant each color is in the image — useful for choosing a primary vs. accent color.

主な機能

100% browser-based — no server upload, complete privacy, works offline after page load
Color quantization algorithm — groups similar shades intelligently for a clean, usable palette
Proportional palette strip — visualizes how dominant each color is in the source image
Adjustable color count — extract 4 to 16 dominant colors depending on your needs

よくある質問

詳しく読む

Image Color Extractor — Pick Dominant Colors from Any Photo