Regal Magenta Wharf
A warm palette of 6 colors drawing on black, pink, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 14.01:1, enough for body text.
About this palette
A warm palette of 6 colors drawing on black, pink, beige, with a wide lightness range, so it covers backgrounds, text and accents. Its lightest and darkest colors reach a contrast of 14.01:1, enough for body text. Open any color for its conversions, shades, harmonies and contrast.
Colors
- ≈ Crow#140912
A very dark, neutral pink (Crow) that brings softness and care. White text sits comfortably on it.
- ≈ Nightly Voyager#3A1D35
A dark, muted pink (Nightly Voyager) that brings gentle playfulness. White text sits comfortably on it.
- ≈ Bruise#73456B
A medium, moderately saturated pink (Bruise) that brings gentle playfulness. White text sits comfortably on it.
- ≈ Drama Queen#AA7EA3
A medium, muted pink (Drama Queen) that brings a warm, expressive tone. Dark text reads well on it.
- ≈ Clam Up#E5DABE
A very light, muted beige (Clam Up) that brings an inviting neutral base. Dark text reads well on it.
- ≈ Neon Carrot#FB943C
A light, vivid orange (Neon Carrot) that brings friendly optimism. Dark text reads well on it.
Tags
Psychology
Meaning
Applications
Similar palettes
Fig & Honey
Rose Quartz Night
Rosewood Studio
Violet Amber
Crimson Noir
Electric Orchid
Accessibility
- On white19.48:1Excellent 5/5
- On black15.10: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 |
|---|---|---|
| Crow | Background | #140912 |
| Nightly Voyager | Surface | #3A1D35 |
| Bruise | Primary | #73456B |
| Drama Queen | Secondary | #AA7EA3 |
| Clam Up | Light | #E5DABE |
| Neon Carrot | Accent | #FB943C |
CSS variables
:root {
--background: #140912;
--surface: #3A1D35;
--primary: #73456B;
--secondary: #AA7EA3;
--light: #E5DABE;
--accent: #FB943C;
}
Tailwind v4 (@theme)
@theme {
--color-background: #140912;
--color-surface: #3A1D35;
--color-primary: #73456B;
--color-secondary: #AA7EA3;
--color-light: #E5DABE;
--color-accent: #FB943C;
}