Gilded Cyan Grove
A cool palette of 6 colors drawing on black, teal, blue, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.05:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, teal, blue, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.05:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Sinister#041316
A very dark, neutral black (Sinister) that brings bold, premium contrast. White text sits comfortably on it.
- ≈ Elite Teal#033138
A dark, muted teal (Elite Teal) that brings a coastal freshness. White text sits comfortably on it.
- ≈ Abyssal Waters#005662
A dark, muted teal (Abyssal Waters) that brings a coastal freshness. White text sits comfortably on it.
- ≈ Cavolo Nero#65909C
A medium, muted blue (Cavolo Nero) that brings trust and steadiness. Dark text reads well on it.
- ≈ Malt#DFCCAD
A very light, muted gray (Malt) that brings calm restraint. Dark text reads well on it.
- ≈ Herbal#29AE83
A medium, moderately saturated teal (Herbal) that brings a coastal freshness. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Glacier Mint
Forest Ember
Teal Smoke
Lagoon Coral
Slate Harbor
Sage Linen
Accessibility
- On white18.92:1Excellent 5/5
- On black13.37:1Excellent 5/5
- Color blind friendly98% similarExcellent 5/5
Contrast is the best any color in the palette reaches on a plain white or black background. Color blind friendly shows how much of the difference between the colors is kept under the common kinds of color blindness.
Colors and suggested roles
| Color | Role | HEX |
|---|---|---|
| Sinister | Background | #041316 |
| Elite Teal | Surface | #033138 |
| Abyssal Waters | Primary | #005662 |
| Cavolo Nero | Secondary | #65909C |
| Malt | Light | #DFCCAD |
| Herbal | Accent | #29AE83 |
CSS variables
:root {
--background: #041316;
--surface: #033138;
--primary: #005662;
--secondary: #65909C;
--light: #DFCCAD;
--accent: #29AE83;
}
Tailwind v4 (@theme)
@theme {
--color-background: #041316;
--color-surface: #033138;
--color-primary: #005662;
--color-secondary: #65909C;
--color-light: #DFCCAD;
--color-accent: #29AE83;
}