Free tool · Color palettes · Runs in your browser
Color palette from an image
Short answer
Choose a picture and the tool finds its main colors with k-means clustering in the CIELAB color space, with no upload.
Nothing is uploaded. The picture is shrunk to 320 pixels wide in your browser and the colors are found there.
Key takeaways
- Known colors come back right: with no noise the worst error was 0.00 CIEDE2000 and the shares were exact; with sigma 8 noise 0.62.
- A gradient across each color (plus or minus 25 levels) gave a worst error of 1.98.
- Heavy noise (sigma 20) is the limit: worst error 11.0, worst share error 6.3%.
- JPEG compression did not hurt: high 0.00, medium 0.00, low 0.00.
- It is deterministic and fast: the same picture always gives the same palette, in at most 33 ms for our test pictures.
Measured: pictures of known colors
We tested it on pictures built from five known colors and areas: with no noise the colors were found with a CIEDE2000 error of 0.00 and the shares exactly; with mild noise 0.62; with heavy noise (sigma 20) the error grew to 11.0 and one share was off by 6.3%. It takes under 50 ms on a 320 pixel wide picture.
We built pictures of five known colors in known proportions (#E63946 35%, #F1FAEE 25%, #A8DADC 20%, #457B9D 12%, #1D3557 8%), saved them as PNG and as JPEG, added noise and gradients, and ran the tool's own extraction. The error is the CIEDE2000 difference between each true color and the closest color found; about 1 is a just noticeable difference.
| Test picture | File size | Worst color error (CIEDE2000) | Mean color error | Worst share error | Time |
|---|---|---|---|---|---|
| clean PNG | 3.0 KB | 0.00 | 0.00 | 0.0% | 6.7 ms |
| noise sigma 8 PNG | 327 KB | 0.62 | 0.12 | 0.0% | 12.2 ms |
| noise sigma 20 PNG | 341 KB | 10.96 | 6.83 | 6.3% | 32.7 ms |
| gradient plus or minus 25 PNG | 4.0 KB | 1.98 | 0.40 | 0.0% | 4.6 ms |
| JPEG high quality | 29.4 KB | 0.00 | 0.00 | 0.0% | 7.7 ms |
| JPEG medium quality | 2.9 KB | 0.00 | 0.00 | 0.0% | 16.1 ms |
| JPEG low quality | 2.8 KB | 0.00 | 0.00 | 0.0% | 3.8 ms |
Moderate noise barely matters because clustering averages it away. Very heavy noise spreads each color so wide that neighbors blend, which is what the last rows show.
Where it fails: heavy noise
| True color | True share | Found color (sigma 20) | Error | Found share |
|---|---|---|---|---|
| #E63946 | 35% | #E53946 | 0.21 | 35.0% |
| #F1FAEE | 25% | #D1F2DE | 8.84 | 26.3% |
| #A8DADC | 20% | #D1F2DE | 10.96 | 26.3% |
| #457B9D | 12% | #3B7788 | 7.66 | 10.9% |
| #1D3557 | 8% | #2E4279 | 6.46 | 9.0% |
At sigma 20 the light colors #F1FAEE and #A8DADC are close enough that their noise clouds overlap, and a share moves from one cluster to the other.
Why an extra color can appear
The page shrinks a picture to 320 pixels wide before it looks at the colors, and shrinking blends the pixels along the edge between two areas. On our test picture of five flat stripes, the page returned the five true colors plus a sixth, a blend of the two darkest, when asked for six colors. Ask for fewer colors than the picture has, or expect one or two blends on pictures with hard edges. The measurements above run on the unshrunk pixels.
What the tool does
- Shrinks the picture to 320 pixels wide in your browser.
- Groups the pixels into 32 levels per channel, which is fast and removes noise.
- Clusters the groups with k-means in CIELAB, starting from the most common color and then the farthest ones, so the result never changes between runs.
- Reports each cluster as a hex color with its share of the picture.
Contrast: which pairs pass
| Text color | Background | Contrast | AA normal text (4.5:1) | AA large text (3:1) | AAA normal text (7:1) |
|---|---|---|---|---|---|
| #000000 | #FFFFFF | 21.00:1 | Pass | Pass | Pass |
| #767676 | #FFFFFF | 4.54:1 | Pass | Pass | Fail |
| #777777 | #FFFFFF | 4.48:1 | Fail | Pass | Fail |
| #0000FF | #FFFFFF | 8.59:1 | Pass | Pass | Pass |
| #FF0000 | #FFFFFF | 4.00:1 | Fail | Pass | Fail |
| #008000 | #FFFFFF | 5.14:1 | Pass | Pass | Fail |
| #FFFF00 | #FFFFFF | 1.07:1 | Fail | Fail | Fail |
| #FFFF00 | #000000 | 19.56:1 | Pass | Pass | Pass |
| #008080 | #FFFFFF | 4.77:1 | Pass | Pass | Fail |
| #008080 | #000000 | 4.40:1 | Fail | Pass | Fail |
A pair that fails AA for normal text can still pass for large text (at least 18 point, or 14 point bold), which needs 3:1. Yellow on white fails both; yellow on black passes everything.
Color blindness: what changes
| Color | Typical vision | Protanopia | Deuteranopia | Tritanopia |
|---|---|---|---|---|
| red #FF0000 | #FF0000 | #6D5F00 | #A39000 | #FF000F |
| green #008000 | #008000 | #837200 | #776A18 | #007C6C |
| blue #0000FF | #0000FF | #0059FF | #003DFB | #006B96 |
| orange #FFA500 | #FFA500 | #C3AC00 | #D9C10E | #FF8E8D |
| purple #800080 | #800080 | #003D83 | #304B7D | #842149 |
| teal #008080 | #008080 | #777980 | #676E81 | #008580 |
Red and green end up close together for protanopia and deuteranopia, which is why red and green alone are a poor way to separate two things in a chart.
Palettes we made this way
| Theme | Base color | Photograph matches (best of three) | Six colors found |
|---|---|---|---|
| Red | #FF0000 | 67% | #AA1A15 #D72520 #7B110E #F55929 #F67E51 #CE3757 |
| Orange | #FFA500 | 76% | #F47906 #FA5703 #CF4703 #F99E0C #F9CF16 #AD5819 |
| Yellow | #FFFF00 | 88% | #CFC043 #FEF729 #F4B203 #CE9706 #FCD70D #AD7E1A |
| Green | #008000 | 84% | #5B9145 #77BD79 #4E9022 #78B752 #2E6C13 #2D5A22 |
| Blue | #0000FF | 91% | #5688BF #7C93CB #7E9EEF #5B75D4 #A0BEF2 #30478C |
| Purple | #800080 | 89% | #6E0BA2 #531179 #B870C9 #3D154E #772862 #B83BA3 |
| Pink | #FFC0CB | 38% | #E7BFCD #DA9AB6 #D064A2 #BF6887 #DF49A7 #C87E79 |
| Brown | #A52A2A | 47% | #421A10 #5C2918 #5E382E #40241E #7B4836 #793D3F |
| Gray | #808080 | 77% | #6B6B6D #828385 #999A9B #58585A #4A494A #B1B3B2 |
| White | #FFFFFF | 41% | #DCDAD9 #D3D3D4 #D2CFCD #E2E1E4 #EBEAEB #F4F3F4 |
| Teal | #008080 | 76% | #164152 #1E545F #2B6A75 #478C99 #398179 #6BB4BE |
| Turquoise | #40E0D0 | 44% | #7AD6C2 #47BA99 #259674 #59BFAF #3D9E92 #327D67 |
| Gold | #FFD700 | 17% | #B77A2D #9F6B2B #D28A2F #E8AA51 #E7BB80 #F5CE66 |
| Maroon | #800000 | 41% | #721522 #95082C #B30830 #56131B #973036 #3B0E11 |
| Burgundy | #800020 | 20% | #800B3F #A80529 #AF054A #7E051B #A2125F #520723 |
| Olive green | #808000 | 66% | #75602A #5A4C20 #927925 #937C44 #BC9631 #433719 |
| Light blue | #ADD8E6 | 39% | #79ABC9 #628EDD #97BCD3 #749CE4 #8CAEED #CEDEF7 |
| Chocolate brown | #D2691E | 69% | #895424 #AC732A #643C1E #986C42 #3A1F12 #B83723 |
| Summer | photos only | - | #8293AB #9E9789 #B8BBBF #666267 #302931 #DFE0E1 |
| Winter | photos only | - | #857F75 #A6A8AE #695F49 #D1D6E0 #403D3A #728DB6 |
| Fall | photos only | - | #181818 #443726 #CD9A4D #7C725A #885126 #C3BFB1 |
| Spring | photos only | - | #E6E1E2 #497BCD #8D778D #402C22 #5F2214 #867253 |
| Halloween | photos only | - | #0F0806 #4F2618 #846A53 #A2380D #E0CAAB #EFBA2D |
| Christmas | photos only | - | #948F85 #D7D9D7 #4A6D6A #684E34 #1E3430 #C2494F |
Free tools:Color palette generatorPalette from an imageImage to textCompress an imageRed paletteTeal paletteGold paletteSummer paletteWinter paletteFall palette
How the formulas are checked
CIEDE2000 matches the five published test pairs of Sharma, Wu and Dalal to four decimals in our automated tests. Contrast of black on white is exactly 21:1. The color blindness matrices are those published by Machado, Oliveira and Fernandes for severity 1.0, and each row sums to 1 so gray stays gray.
Questions people ask
How do I get a palette from an image?
Choose a picture and the number of colors. The tool shrinks the picture, clusters the colors and shows each as a hex code with its share.
Is my picture uploaded?
No. The picture is shrunk and analyzed in your browser.
How accurate are the colors?
On pictures of known colors the worst error was 0.00 CIEDE2000 with no noise and 11.0 with very heavy noise.
Why does the same picture always give the same colors?
The clustering starts from fixed points and uses no random numbers.
How many colors should I ask for?
Five or six capture most pictures. Ask for more when a picture has several small accents; they will show with small shares.
Does it work with HEIC and WebP pictures?
Yes, the tool reads HEIC, WebP, AVIF, PNG and JPEG.
Why does the palette have a color that is not in my picture?
A cluster is an average of similar colors, and shrinking the picture blends pixels along hard edges, so a color may be a blend that no single pixel has exactly. Averaging is what removes noise. Ask for fewer colors to avoid small blends.
Does JPEG compression change the result?
Not in our tests: JPEG test pictures gave errors of 0.00, 0.00, 0.00.
Can I copy the colors into CSS?
Yes. The tool gives CSS variables and a hex list.
Related
Sources and how we checked
- W3C: Understanding Success Criterion 1.4.3, Contrast (Minimum) (read 2026-10-10)
- W3C: Understanding Success Criterion 1.4.6, Contrast (Enhanced) (read 2026-10-10)
- Wikipedia: Color scheme (read 2026-10-10)
- Wikipedia: Color difference (CIEDE2000) (read 2026-10-10)
- Machado, Oliveira and Fernandes: A physiologically-based model for simulation of color vision deficiency (2009) (read 2026-10-10)
- W3C: CSS Color Module Level 4 (named colors) (read 2026-10-10)
Reviewed October 10, 2026. The palettes were found with the tool's own code from Creative Commons photographs; contrast, harmonies and color differences are computed. The files and results are in data/seo/hub/evidence/2026-10-10/palette.