Afterglow Azure Quartz
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.30: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.30:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Corbeau#02151E
A very dark, neutral black (Corbeau) that brings depth and formality. White text sits comfortably on it.
- ≈ Nordic Noir#013549
A dark, muted blue (Nordic Noir) that brings quiet confidence. White text sits comfortably on it.
- ≈ Blue Velvet#1A6280
A medium, moderately saturated blue (Blue Velvet) that brings open, airy calm. White text sits comfortably on it.
- ≈ Open Seas#85ACC2
A light, muted blue (Open Seas) that brings open, airy calm. Dark text reads well on it.
- ≈ Cotton Clouds#BEDFF1
A very light, muted blue (Cotton Clouds) that brings quiet confidence. Dark text reads well on it.
- ≈ Pink Punk#DD75A8
A light, moderately saturated pink (Pink Punk) that brings softness and care. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Indigo Rose
Lagoon Coral
Slate Harbor
Teal Copper
Midnight Ember
Teal Smoke
Accessibility
- On white18.60:1Excellent 5/5
- On black15.01:1Excellent 5/5
- Color blind friendly95% 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 | #02151E |
| Nordic Noir | Surface | #013549 |
| Blue Velvet | Primary | #1A6280 |
| Open Seas | Secondary | #85ACC2 |
| Cotton Clouds | Light | #BEDFF1 |
| Pink Punk | Accent | #DD75A8 |
CSS variables
:root {
--background: #02151E;
--surface: #013549;
--primary: #1A6280;
--secondary: #85ACC2;
--light: #BEDFF1;
--accent: #DD75A8;
}
Tailwind v4 (@theme)
@theme {
--color-background: #02151E;
--color-surface: #013549;
--color-primary: #1A6280;
--color-secondary: #85ACC2;
--color-light: #BEDFF1;
--color-accent: #DD75A8;
}