Peacock color palette
Peacock feathers have that shifting teal, and this palette lays out five steps of it, from deep #005F5F to a bright aqua, #68DFDF. Saturation is high throughout, so the set looks rich and a little exotic, like silk or enamel. It's all one hue, which keeps layouts unified. Boutique hotels and spas can use it to look expensive without any gold.
Peacock palette in use
Use white as the page with #005F5F for text and headings. #007F7F is the button color, #00A0A0 the hover state, and #1BC8C8 and #68DFDF work for decorative bands and icons.
This pair measures 4.71:1, so it works for body text too. The button uses #1BC8C8 with black text.
ButtonGood for
- Boutique hotel website
- Jewelry lookbook
- Spa treatment menu
- Luxury stationery
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#005F5F | #68DFDF | 4.71:1 | AA |
#005F5F | #1BC8C8 | 3.61:1 | AA large |
#007F7F | #68DFDF | 3.04:1 | AA large |
Peacock palette as code
CSS variables
:root {
--peacock-1: #005F5F;
--peacock-2: #007F7F;
--peacock-3: #00A0A0;
--peacock-4: #1BC8C8;
--peacock-5: #68DFDF;
}Tailwind v4
@theme {
--color-peacock-1: #005F5F;
--color-peacock-2: #007F7F;
--color-peacock-3: #00A0A0;
--color-peacock-4: #1BC8C8;
--color-peacock-5: #68DFDF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'peacock': {
100: '#005F5F',
200: '#007F7F',
300: '#00A0A0',
400: '#1BC8C8',
500: '#68DFDF',
},SCSS
$peacock-1: #005F5F;
$peacock-2: #007F7F;
$peacock-3: #00A0A0;
$peacock-4: #1BC8C8;
$peacock-5: #68DFDF;JSON
["#005F5F","#007F7F","#00A0A0","#1BC8C8","#68DFDF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.