Free tool · Color palettes · Runs in your browser
Color palette generator
Short answer
Type a hex color and the tool shows six color harmonies (complementary, analogous, triadic, split complementary, tetradic and square), nine tints and nine shades, and the WCAG contrast of the color on white and black, all computed in your browser.
#008080 · rgb(0, 128, 128) · hsl(180, 100%, 25%) · contrast 4.77:1 on white, 4.40:1 on black
Complementary
Analogous
Triadic
Split complementary
Tetradic (rectangle)
Square
Tints (toward white)
Shades (toward black)
CSS variables for the analogous palette
:root {
--color-1: #008040;
--color-2: #008080;
--color-3: #004080;
}Nothing is uploaded. Click a color to copy its hex code.
Key takeaways
- Six harmonies, nine tints and nine shades from one hex color, computed by exact formulas, not looked up.
- Contrast follows the WCAG definition: black on white is 21:1, teal #008080 is 4.77:1 on white.
- Color differences use CIEDE2000; we checked our implementation against five published test pairs from Sharma, Wu and Dalal (2005).
- Color blindness is simulated with the Machado model; a palette is flagged when its closest pair gets hard to tell apart.
- 24 palettes built from real photographs are linked from this page.
Example: harmonies for teal
For teal, #008080, the complement is #800000, the analogous colors are #008040 and #004080, and the triad is #008080, #800080, #808000. We also built palettes for 24 themes from real photographs; they are linked below.
Harmonies are made by rotating the hue of the base color in HSL and keeping saturation and lightness, as Wikipedia describes: a complement is opposite on the wheel, analogous colors are neighbors, a triad is 120 and 240 degrees away. teal is the CSS named color #008080.
| Harmony | Colors | Closest pair, typical vision | Deuteranopia |
|---|---|---|---|
| Complementary | #008080, #800000 | 54.0 | 34.9 |
| Analogous | #008040, #008080, #004080 | 20.5 | 21.7 |
| Triadic | #008080, #800080, #808000 | 33.5 | 16.1 |
| Split complementary | #008080, #800040, #804000 | 32.9 | 18.7 |
| Tetradic (rectangle) | #008080, #000080, #800000, #808000 | 33.5 | 20.9 |
| Square | #008080, #400080, #800000, #408000 | 28.8 | 15.1 |
The closest pair tells you how easy the palette is to read: below about 10 on the CIEDE2000 scale, two colors are hard to tell apart, and people with a color vision deficiency see fewer differences than the first column suggests.
Tints and shades
| Step | Tint | Contrast on white | Shade | Contrast on white |
|---|---|---|---|---|
| 10% | #1A8D8D | 4.01:1 | #007373 | 5.68:1 |
| 20% | #339999 | 3.41:1 | #006666 | 6.79:1 |
| 30% | #4DA6A6 | 2.87:1 | #005A5A | 8.05:1 |
| 40% | #66B3B3 | 2.42:1 | #004D4D | 9.68:1 |
| 50% | #80C0C0 | 2.06:1 | #004040 | 11.62:1 |
| 60% | #99CCCC | 1.77:1 | #003333 | 13.80:1 |
| 70% | #B3D9D9 | 1.52:1 | #002626 | 16.09:1 |
| 80% | #CCE6E6 | 1.31:1 | #001A1A | 18.06:1 |
| 90% | #E6F2F2 | 1.14:1 | #000D0D | 19.75:1 |
A tint mixes the color with white and a shade mixes it with black, in sRGB. Pick the shade that reaches 4.5:1 on white for normal text, as WCAG 1.4.3 asks.
Measured: how the image palette tool performs
The same color code also finds the colors of a picture. We tested it on pictures built from five known colors:
| 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 |
These are the worst values across the five colors. The error is a CIEDE2000 color difference between the true color and the closest color the tool returned.
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 from photographs
| 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 make a color palette from a color?
Type a hex color above or pick one. The tool shows complementary, analogous, triadic, split complementary, tetradic and square palettes, and nine tints and shades.
What is a complementary color?
The color opposite on the color wheel, 180 degrees away in hue. For teal #008080 it is #800000.
What is an analogous palette?
Colors next to each other on the wheel. Wikipedia describes analogous schemes as groups of colors adjacent on the color wheel. For teal: #008040, #008080, #004080.
What contrast do I need for text?
WCAG 2 asks for at least 4.5:1 for normal text and 3:1 for large text at level AA, and 7:1 for normal text at level AAA.
How do I check a palette for color blindness?
Compare the closest pair of colors after simulating protanopia, deuteranopia and tritanopia. The harmony tables on the color pages do that with the Machado model; below about 10 on the CIEDE2000 scale, two colors are hard to tell apart.
What is the difference between tints and shades?
A tint mixes the color with white; a shade mixes it with black. The tool gives nine of each.
What is CIEDE2000?
A formula for the difference between two colors that follows what people see better than comparing RGB numbers. Wikipedia notes that a difference of 1.0 is designed to be a just noticeable difference.
Where do the named colors come from?
From the W3C CSS Color Module Level 4, which lists 148 named colors with their hex values.
Is anything uploaded?
No. Everything is computed in your browser.
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.