Velvet Sapphire Wharf
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 13.31: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 13.31:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Corbeau#04151F
A very dark, neutral black (Corbeau) that brings bold, premium contrast. White text sits comfortably on it.
- ≈ Nordic Noir#023047
A dark, muted blue (Nordic Noir) that brings open, airy calm. White text sits comfortably on it.
- ≈ Night Kite#125374
A dark, moderately saturated blue (Night Kite) that brings open, airy calm. White text sits comfortably on it.
- ≈ Blue Moon#598FAD
A medium, muted blue (Blue Moon) that brings open, airy calm. Dark text reads well on it.
- ≈ Polar Opposite#BEDCF0
A very light, muted blue (Polar Opposite) that brings trust and steadiness. Dark text reads well on it.
- ≈ Maize#FED759
A very light, moderately saturated yellow (Maize) that brings a bright, hopeful note. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Nordic Sky
Deep Ocean
Slate Harbor
Teal Smoke
Legal & Finance
Fintech Trust
Accessibility
- On white18.54:1Excellent 5/5
- On black15.07: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 |
|---|---|---|
| Corbeau | Background | #04151F |
| Nordic Noir | Surface | #023047 |
| Night Kite | Primary | #125374 |
| Blue Moon | Secondary | #598FAD |
| Polar Opposite | Light | #BEDCF0 |
| Maize | Accent | #FED759 |
CSS variables
:root {
--background: #04151F;
--surface: #023047;
--primary: #125374;
--secondary: #598FAD;
--light: #BEDCF0;
--accent: #FED759;
}
Tailwind v4 (@theme)
@theme {
--color-background: #04151F;
--color-surface: #023047;
--color-primary: #125374;
--color-secondary: #598FAD;
--color-light: #BEDCF0;
--color-accent: #FED759;
}