Regal Tide Lullaby
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 16.48: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 16.48:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Sooty#04141B
A very dark, neutral black (Sooty) that brings depth and formality. White text sits comfortably on it.
- ≈ Midnight Dreams#01242F
A very dark, muted blue (Midnight Dreams) that brings open, airy calm. White text sits comfortably on it.
- ≈ Deep Lagoon#125C73
A dark, muted blue (Deep Lagoon) that brings quiet confidence. White text sits comfortably on it.
- ≈ Surgical#5DA6BF
A light, moderately saturated blue (Surgical) that brings open, airy calm. Dark text reads well on it.
- ≈ Malt#DCCFB4
A very light, muted gray (Malt) that brings neutral balance. Dark text reads well on it.
- ≈ Salt#F5F0E5
A very light, neutral gray (Salt) that brings a steady, composed backdrop. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Nordic Sky
Slate Harbor
Teal Smoke
Sapphire Saffron
Sage Linen
Deep Ocean
Accessibility
- On white18.73:1Excellent 5/5
- On black18.47: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 |
|---|---|---|
| Sooty | Background | #04141B |
| Midnight Dreams | Surface | #01242F |
| Deep Lagoon | Primary | #125C73 |
| Surgical | Secondary | #5DA6BF |
| Malt | Light | #DCCFB4 |
| Salt | Paper | #F5F0E5 |
CSS variables
:root {
--background: #04141B;
--surface: #01242F;
--primary: #125C73;
--secondary: #5DA6BF;
--light: #DCCFB4;
--paper: #F5F0E5;
}
Tailwind v4 (@theme)
@theme {
--color-background: #04141B;
--color-surface: #01242F;
--color-primary: #125C73;
--color-secondary: #5DA6BF;
--color-light: #DCCFB4;
--color-paper: #F5F0E5;
}