Opulent Indigo Haven
A cool palette of 6 colors drawing on black, blue, purple, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 13.83:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, blue, purple, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 13.83:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Rift#010B18
A very dark, neutral black (Dark Rift) that brings depth and formality. White text sits comfortably on it.
- ≈ Midnight Mirage#002343
A very dark, muted blue (Midnight Mirage) that brings quiet confidence. White text sits comfortably on it.
- ≈ Slumber#2C537B
A dark, moderately saturated blue (Slumber) that brings trust and steadiness. White text sits comfortably on it.
- ≈ Sailing#7C9EB9
A light, muted blue (Sailing) that brings open, airy calm. Dark text reads well on it.
- ≈ Broad Daylight#BEDBFA
A very light, muted blue (Broad Daylight) that brings quiet confidence. Dark text reads well on it.
- ≈ Matt Purple#9A72EE
A medium, vivid purple (Matt Purple) that brings a creative, premium air. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Indigo Rose
Slate Harbor
Midnight Ember
Dusty Lavender
Sapphire Saffron
Lagoon Coral
Accessibility
- On white19.76:1Excellent 5/5
- On black14.70:1Excellent 5/5
- Color blind friendly97% 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 | #010B18 |
| Midnight Mirage | Surface | #002343 |
| Slumber | Primary | #2C537B |
| Sailing | Secondary | #7C9EB9 |
| Broad Daylight | Light | #BEDBFA |
| Matt Purple | Accent | #9A72EE |
CSS variables
:root {
--background: #010B18;
--surface: #002343;
--primary: #2C537B;
--secondary: #7C9EB9;
--light: #BEDBFA;
--accent: #9A72EE;
}
Tailwind v4 (@theme)
@theme {
--color-background: #010B18;
--color-surface: #002343;
--color-primary: #2C537B;
--color-secondary: #7C9EB9;
--color-light: #BEDBFA;
--color-accent: #9A72EE;
}