Smoked Sapphire Fable
A cool palette of 6 colors drawing on black, blue, white, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 16.94:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, blue, white, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 16.94:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Rift#00101C
A very dark, muted black (Dark Rift) that brings bold, premium contrast. White text sits comfortably on it.
- ≈ Midnight Ocean#002B41
A very dark, muted blue (Midnight Ocean) that brings open, airy calm. White text sits comfortably on it.
- ≈ Copacabana#266689
A medium, moderately saturated blue (Copacabana) that brings open, airy calm. White text sits comfortably on it.
- ≈ Sailing#7C9DB6
A light, muted blue (Sailing) that brings open, airy calm. Dark text reads well on it.
- ≈ Mr Freeze#ACD7F2
A very light, muted blue (Mr Freeze) that brings open, airy calm. Dark text reads well on it.
- ≈ Vaporised#E2F3FE
A very light, neutral teal (Vaporised) that brings a coastal freshness. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Slate Harbor
Teal Smoke
Nordic Sky
Deep Ocean
Dusty Lavender
Sapphire Saffron
Accessibility
- On white19.25:1Excellent 5/5
- On black18.48: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 |
|---|---|---|
| Dark Rift | Background | #00101C |
| Midnight Ocean | Surface | #002B41 |
| Copacabana | Primary | #266689 |
| Sailing | Secondary | #7C9DB6 |
| Mr Freeze | Light | #ACD7F2 |
| Vaporised | Paper | #E2F3FE |
CSS variables
:root {
--background: #00101C;
--surface: #002B41;
--primary: #266689;
--secondary: #7C9DB6;
--light: #ACD7F2;
--paper: #E2F3FE;
}
Tailwind v4 (@theme)
@theme {
--color-background: #00101C;
--color-surface: #002B41;
--color-primary: #266689;
--color-secondary: #7C9DB6;
--color-light: #ACD7F2;
--color-paper: #E2F3FE;
}