Smoked Iris Wharf
A cool palette of 6 colors drawing on black, purple, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 15.40:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, purple, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 15.40:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Corbeau#101120
A very dark, neutral black (Corbeau) that brings serious elegance. White text sits comfortably on it.
- ≈ Deep Sea Base#2A2C47
A dark, muted purple (Deep Sea Base) that brings quiet luxury. White text sits comfortably on it.
- ≈ Dragonfly#45487C
A dark, moderately saturated blue (Dragonfly) that brings quiet confidence. White text sits comfortably on it.
- ≈ Imperial Lilac#A2A0C5
A light, muted purple (Imperial Lilac) that brings quiet luxury. Dark text reads well on it.
- ≈ Dust Storm#E2D1B3
A very light, muted beige (Dust Storm) that brings understated calm. Dark text reads well on it.
- ≈ Pita#F3E8D4
A very light, neutral gray (Pita) that brings calm restraint. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Fig & Honey
Dusty Lavender
Nordic Sky
Sapphire Saffron
Slate Harbor
Deep Ocean
Accessibility
- On white18.69:1Excellent 5/5
- On black17.30:1Excellent 5/5
- Color blind friendly99% 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 |
|---|---|---|
| Corbeau | Background | #101120 |
| Deep Sea Base | Surface | #2A2C47 |
| Dragonfly | Primary | #45487C |
| Imperial Lilac | Secondary | #A2A0C5 |
| Dust Storm | Light | #E2D1B3 |
| Pita | Paper | #F3E8D4 |
CSS variables
:root {
--background: #101120;
--surface: #2A2C47;
--primary: #45487C;
--secondary: #A2A0C5;
--light: #E2D1B3;
--paper: #F3E8D4;
}
Tailwind v4 (@theme)
@theme {
--color-background: #101120;
--color-surface: #2A2C47;
--color-primary: #45487C;
--color-secondary: #A2A0C5;
--color-light: #E2D1B3;
--color-paper: #F3E8D4;
}