Velvet Mulberry Fable
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 16.88: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 16.88:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Rift#0D0A15
A very dark, neutral black (Dark Rift) that brings depth and formality. White text sits comfortably on it.
- ≈ Sombre Night#241D36
A very dark, muted blue (Sombre Night) that brings trust and steadiness. White text sits comfortably on it.
- ≈ In the Vines#5A4A80
A dark, moderately saturated purple (In the Vines) that brings quiet luxury. White text sits comfortably on it.
- ≈ Imperial Lilac#A89CBF
A light, muted purple (Imperial Lilac) that brings quiet luxury. Dark text reads well on it.
- ≈ Malt#E0CCBC
A very light, neutral gray (Malt) that brings calm restraint. Dark text reads well on it.
- ≈ Salt#F8ECE2
A very light, neutral gray (Salt) that brings a steady, composed backdrop. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Fig & Honey
Dusty Lavender
Nordic Sky
Rosewood Studio
Sapphire Saffron
Slate Harbor
Accessibility
- On white19.60:1Excellent 5/5
- On black18.08:1Excellent 5/5
- Color blind friendly100% 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 | #0D0A15 |
| Sombre Night | Surface | #241D36 |
| In the Vines | Primary | #5A4A80 |
| Imperial Lilac | Secondary | #A89CBF |
| Malt | Light | #E0CCBC |
| Salt | Paper | #F8ECE2 |
CSS variables
:root {
--background: #0D0A15;
--surface: #241D36;
--primary: #5A4A80;
--secondary: #A89CBF;
--light: #E0CCBC;
--paper: #F8ECE2;
}
Tailwind v4 (@theme)
@theme {
--color-background: #0D0A15;
--color-surface: #241D36;
--color-primary: #5A4A80;
--color-secondary: #A89CBF;
--color-light: #E0CCBC;
--color-paper: #F8ECE2;
}