Convert Image to Hex Codes
Extract hex color codes from images - dominant colors, unique palette, grid sampling. CSS/SCSS/Tailwind output. Free, offline, client-side.
Extract a real color palette - dominant colors with frequency analysis, all unique colors, grid sample, or linear stride. Click any swatch to copy its hex. Output as plain list, CSS variables, SCSS, Tailwind config, or JSON.
How to Use Convert Image to Hex Codes
- Drop or upload a PNG/JPG/GIF/BMP/WebP. Files stay in your browser; no server sees them.
- Pick a mode - Dominant runs frequency analysis on bucketed colors (best for design palettes). Unique returns every distinct RGB triple (useful for asset audits). Grid samples on a regular N×N grid (lightweight palette preview). Linear strides through the pixel array - kept for backward compatibility but rarely the best choice.
- Adjust Top-K - how many colors to return. 8 is the typical palette size; bump to 16-32 for richer extracts.
- For Dominant mode, tune quantization bits - fewer bits merge near-similar shades more aggressively. 4 bits collapses subtle variations (good for blocky designs); 7-8 bits preserves subtle differences (good for photo palettes).
- Click any swatch to copy its hex - the visual palette shows colors with pixel counts and percentages of the total. The clicked hex lands on your clipboard instantly.
- Pick an output format - Plain for a hex list, CSS for
--color-1: #FF5733;custom properties, SCSS variables, Tailwind config snippet, or a JSON array. Switch instantly without re-processing. - Copy or download the formatted output. Download saves as
hex-palette-<mode>.txt(or.jsonfor JSON/Tailwind formats).
Frequently Asked Questions
What’s the difference between “Dominant” and “Unique” modes?
Dominant posterizes each pixel (snaps RGB to N evenly-spaced levels) and counts how many pixels landed in each bucket – then returns the top K most-populated buckets. Great for finding 8 brand colors in a logo, or the 6 dominant tones in a photo. Unique dedupes every distinct 24-bit RGB triple with no quantization – useful when you need a complete audit but expect millions of entries in photos.
What does the quantization level do?
It controls how many levels per channel are available (2^bits). With 4 bits, R/G/B each round to one of 16 levels – so #FE5734 and #FF5733 merge into the same bucket. Helpful for finding “design intent” colors. With 8 bits, no merging happens. Lower bits → fewer, more representative colors; higher bits → more, more precise.
Why does my photo return so many unique colors?
A 12-megapixel photo can contain 1-2 million distinct RGB triples due to gradients, noise, and JPEG compression artifacts. That’s why we recommend Dominant mode for photos – the bucketing collapses noise into meaningful palette colors. Pure flat illustrations (no gradients) typically have under 100 unique colors.
How are dominant colors computed?
Each pixel’s RGB is rounded to the nearest quantization level (2^bits steps). The quantized triple becomes a Map key. We tally counts as we walk the pixels, then sort the Map descending by count and slice the top K. Returned colors are the quantized representatives, so they may not exactly match any single original pixel – but they’re the closest “design intent” approximation.
Are transparent pixels included?
Fully transparent pixels (alpha = 0) are skipped – they have no visible color contribution. Semi-transparent pixels (alpha > 0) contribute their RGB at full intensity (no alpha compositing). If you need composited-over-background colors, render the image onto a colored canvas first, then extract.
Why use Max Dimension capping?
Walking 16 megapixels takes time. Capping to 1024 px reduces the work to ~1 megapixel and gives nearly-identical Dominant results because the bucketing absorbs the downsampling noise. Use original size for tiny images (logos) where every pixel matters.
What’s the difference between Grid and Linear modes?
Grid takes samples at regular x,y positions across the image (10×10 = 100 evenly-spaced samples). Linear strides through the underlying byte array – which means it samples in row-major order, so samples cluster on early rows for small N. Grid is usually what you want for a visual palette; Linear is included for backward compatibility with older tools.
Is my image data uploaded?
No. FileReader, Canvas 2D, and the histogram loops all run in your browser. Open DevTools → Network and watch zero requests fire after the page loads. Safe for proprietary brand assets, client photos, or anything private.
Can I get the colors into Tailwind directly?
Yes. Pick “Tailwind config JSON” as the output format and you’ll get a `theme.extend.colors` snippet with `brand-1` through `brand-N` keys, ready to paste into your `tailwind.config.js`. Then use as `bg-brand-1`, `text-brand-2`, etc. in your markup.
Does it work offline?
Yes. Total bundle is under 20 KB. Load once, disconnect, keep extracting. Useful for travel, air-gapped machines, or proprietary image pipelines.