Midnight Claret Ripple
A warm palette of 6 colors drawing on black, red, pink, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.85:1, enough for body text.
About this palette
A warm palette of 6 colors drawing on black, red, pink, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 12.85:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Asphalt#1D090B
A very dark, muted black (Asphalt) that brings serious elegance. White text sits comfortably on it.
- ≈ Castro#492022
A dark, muted red (Castro) that brings a bold, confident accent. White text sits comfortably on it.
- ≈ Paprika#782B32
A dark, moderately saturated red (Paprika) that brings appetite and urgency. White text sits comfortably on it.
- ≈ Old Rose#BA8180
A medium, muted red (Old Rose) that brings appetite and urgency. Dark text reads well on it.
- ≈ Happy Piglets#FBC7C7
A very light, muted pink (Happy Piglets) that brings a warm, expressive tone. Dark text reads well on it.
- ≈ Pink Punk#D181C4
A light, moderately saturated pink (Pink Punk) that brings a warm, expressive tone. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Crimson Noir
Bordeaux
Rosewood Studio
Rose Quartz Night
Terracotta Clay
Sunset Boulevard
Accessibility
- On white19.15:1Excellent 5/5
- On black14.09: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 |
|---|---|---|
| Asphalt | Background | #1D090B |
| Castro | Surface | #492022 |
| Paprika | Primary | #782B32 |
| Old Rose | Secondary | #BA8180 |
| Happy Piglets | Light | #FBC7C7 |
| Pink Punk | Accent | #D181C4 |
CSS variables
:root {
--background: #1D090B;
--surface: #492022;
--primary: #782B32;
--secondary: #BA8180;
--light: #FBC7C7;
--accent: #D181C4;
}
Tailwind v4 (@theme)
@theme {
--color-background: #1D090B;
--color-surface: #492022;
--color-primary: #782B32;
--color-secondary: #BA8180;
--color-light: #FBC7C7;
--color-accent: #D181C4;
}