Noir Tide Wharf
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 12.65: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 12.65:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Sooty#01151A
A very dark, neutral black (Sooty) that brings serious elegance. White text sits comfortably on it.
- ≈ Midnight Dreams#00282F
A very dark, muted blue (Midnight Dreams) that brings open, airy calm. White text sits comfortably on it.
- ≈ Wakame Green#07606F
A medium, muted teal (Wakame Green) that brings clean, modern calm. White text sits comfortably on it.
- ≈ Atlas Cedar#659BA6
A medium, muted teal (Atlas Cedar) that brings a cool, trustworthy tone. Dark text reads well on it.
- ≈ Dust Storm#EBD0B5
A very light, muted beige (Dust Storm) that brings an inviting neutral base. Dark text reads well on it.
- ≈ Lavendless#CA66BC
A medium, vivid purple (Lavendless) that brings quiet luxury. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Glacier Mint
Neon Slate
Slate Harbor
Teal Smoke
Electric Orchid
Cobalt Lime
Accessibility
- On white18.69:1Excellent 5/5
- On black14.22:1Excellent 5/5
- Color blind friendly94% 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 | #01151A |
| Midnight Dreams | Surface | #00282F |
| Wakame Green | Primary | #07606F |
| Atlas Cedar | Secondary | #659BA6 |
| Dust Storm | Light | #EBD0B5 |
| Lavendless | Accent | #CA66BC |
CSS variables
:root {
--background: #01151A;
--surface: #00282F;
--primary: #07606F;
--secondary: #659BA6;
--light: #EBD0B5;
--accent: #CA66BC;
}
Tailwind v4 (@theme)
@theme {
--color-background: #01151A;
--color-surface: #00282F;
--color-primary: #07606F;
--color-secondary: #659BA6;
--color-light: #EBD0B5;
--color-accent: #CA66BC;
}