Moonlit Tide Kettle
A cool palette of 6 colors drawing on black, teal, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 17.28:1, enough for body text.
About this palette
A cool palette of 6 colors drawing on black, teal, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 17.28:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Dark Rift#010C0F
A very dark, neutral black (Dark Rift) that brings depth and formality. White text sits comfortably on it.
- ≈ Elite Teal#002E36
A very dark, muted teal (Elite Teal) that brings clean, modern calm. White text sits comfortably on it.
- ≈ Beau Vert#13606C
A medium, muted teal (Beau Vert) that brings clean, modern calm. White text sits comfortably on it.
- ≈ Cavolo Nero#60919B
A medium, muted blue (Cavolo Nero) that brings open, airy calm. Dark text reads well on it.
- ≈ Clear Water#B0D5DC
A light, muted teal (Clear Water) that brings a cool, trustworthy tone. Dark text reads well on it.
- ≈ Vaporised#E0F3F7
A very light, neutral teal (Vaporised) that brings a cool, trustworthy tone. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Teal Smoke
Slate Harbor
Nordic Sky
Sage Linen
Glacier Mint
Dusty Lavender
Accessibility
- On white19.79:1Excellent 5/5
- On black18.33: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 | #010C0F |
| Elite Teal | Surface | #002E36 |
| Beau Vert | Primary | #13606C |
| Cavolo Nero | Secondary | #60919B |
| Clear Water | Light | #B0D5DC |
| Vaporised | Paper | #E0F3F7 |
CSS variables
:root {
--background: #010C0F;
--surface: #002E36;
--primary: #13606C;
--secondary: #60919B;
--light: #B0D5DC;
--paper: #E0F3F7;
}
Tailwind v4 (@theme)
@theme {
--color-background: #010C0F;
--color-surface: #002E36;
--color-primary: #13606C;
--color-secondary: #60919B;
--color-light: #B0D5DC;
--color-paper: #E0F3F7;
}