Moonlit Claret Journey
A warm palette of 6 colors drawing on black, pink, red, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 16.21:1, enough for body text.
About this palette
A warm palette of 6 colors drawing on black, pink, red, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 16.21:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Asphalt#150A0F
A very dark, neutral black (Asphalt) that brings depth and formality. White text sits comfortably on it.
- ≈ Black-Hearted#3C1C2A
A very dark, muted red (Black-Hearted) that brings warmth and energy. White text sits comfortably on it.
- ≈ Pleasure#86375D
A medium, moderately saturated red (Pleasure) that brings warmth and energy. White text sits comfortably on it.
- ≈ Pinch Me#BD8F9F
A light, muted pink (Pinch Me) that brings softness and care. Dark text reads well on it.
- ≈ Light Pink#FDCFE1
A very light, muted pink (Light Pink) that brings softness and care. Dark text reads well on it.
- ≈ Bunny Tail#FEE4EE
A very light, neutral pink (Bunny Tail) that brings a warm, expressive tone. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Rosewood Studio
Fig & Honey
Terracotta Clay
Wine Cellar
Rose Quartz Night
Dusty Lavender
Accessibility
- On white19.40:1Excellent 5/5
- On black17.54: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 |
|---|---|---|
| Asphalt | Background | #150A0F |
| Black-Hearted | Surface | #3C1C2A |
| Pleasure | Primary | #86375D |
| Pinch Me | Secondary | #BD8F9F |
| Light Pink | Light | #FDCFE1 |
| Bunny Tail | Paper | #FEE4EE |
CSS variables
:root {
--background: #150A0F;
--surface: #3C1C2A;
--primary: #86375D;
--secondary: #BD8F9F;
--light: #FDCFE1;
--paper: #FEE4EE;
}
Tailwind v4 (@theme)
@theme {
--color-background: #150A0F;
--color-surface: #3C1C2A;
--color-primary: #86375D;
--color-secondary: #BD8F9F;
--color-light: #FDCFE1;
--color-paper: #FEE4EE;
}