Regal Cobalt Yarrow
A cool palette of 6 colors drawing on black, blue, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 14.54:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, blue, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 14.54:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Rift#010A12
A very dark, neutral black (Dark Rift) that brings depth and formality. White text sits comfortably on it.
- ≈ Sea of Stars#07334E
A dark, muted blue (Sea of Stars) that brings trust and steadiness. White text sits comfortably on it.
- ≈ Wavy Navy#086294
A medium, moderately saturated blue (Wavy Navy) that brings quiet confidence. White text sits comfortably on it.
- ≈ High Tide#7FA4C7
A light, muted blue (High Tide) that brings quiet confidence. Dark text reads well on it.
- ≈ Burrito#ECD9C8
A very light, neutral beige (Burrito) that brings understated calm. Dark text reads well on it.
- ≈ Super Rare Jade#04B5B8
A light, moderately saturated teal (Super Rare Jade) that brings a cool, trustworthy tone. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Glacier Mint
Cobalt Lime
Midnight Ember
Slate Harbor
Electric Orchid
Sapphire Saffron
Accessibility
- On white19.93:1Excellent 5/5
- On black15.32: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 |
|---|---|---|
| Dark Rift | Background | #010A12 |
| Sea of Stars | Surface | #07334E |
| Wavy Navy | Primary | #086294 |
| High Tide | Secondary | #7FA4C7 |
| Burrito | Light | #ECD9C8 |
| Super Rare Jade | Accent | #04B5B8 |
CSS variables
:root {
--background: #010A12;
--surface: #07334E;
--primary: #086294;
--secondary: #7FA4C7;
--light: #ECD9C8;
--accent: #04B5B8;
}
Tailwind v4 (@theme)
@theme {
--color-background: #010A12;
--color-surface: #07334E;
--color-primary: #086294;
--color-secondary: #7FA4C7;
--color-light: #ECD9C8;
--color-accent: #04B5B8;
}