Color Palette Extractor🔒 100% local
Extract dominant colors from any image. Generates hex codes, RGB values, and CSS variables.
Related Tools
Drops your image onto a canvas, resizes it to at most 200x200, quantises every sampled pixel to steps of 8 per channel, counts how often each quantised colour occurs and returns the most frequent ones - between 2 and 20 - as hex, rgb() and ready-to-paste CSS variables, with each colour's share of the canvas. The image is decoded as pixels inside the tab, so a photograph or a screenshot of a client's artwork is never transmitted. Transparent pixels are skipped.
How to use it
- Drop the image on the panel or click to browse; PNG, JPG, WebP and GIF are accepted.
- Set how many colours you want, between 2 and 20.
- Press Extract Palette, then Copy Output for the list plus the CSS variables.
Worked example
palette-demo.png (100x100, 5 stripes)becomesExtracted 5 dominant colors:
1. #c03828 (rgb(192, 56, 40)) - 20.00%
2. #2880b8 (rgb(40, 128, 184)) - 20.00%
3. #28b060 (rgb(40, 176, 96)) - 20.00%
4. #f0c810 (rgb(240, 200, 16)) - 20.00%
5. #9048b0 (rgb(144, 72, 176)) - 20.00%
CSS Variables:
--color-1: #c03828;
--color-2: #2880b8;
--color-3: #28b060;
--color-4: #f0c810;
--color-5: #9048b0;You supply the image. This result came from a 100x100 PNG painted with five solid 20px stripes of #C0392B, #2980B9, #27AE60, #F1C40F and #8E44AD, extracting 5 colours. The hexes differ slightly from those painted colours because each channel is snapped to a multiple of 8: 57 becomes 56, 196 becomes 200.
When to use it
- Pulling a palette out of a photograph, a logo export or a mood board.
- Getting CSS custom properties for a small site from one hero image.
- Checking which single colour dominates a screenshot before you crop or recolour it.
What it does not do
- Shares are measured over the downscaled canvas, so a small logo centred on white reports white as the dominant colour.
- Every channel is snapped to a multiple of 8, so a returned hex can sit a few units off the original pixel.
- Large images are sampled on a stride rather than pixel by pixel, which can move the percentages slightly.
- Near-white channels round up to 256, which prints as a three-digit channel inside the hex string - so a pure-white area can appear as #100100100 rather than #ffffff.