darkwarm
Charcoal & Coral Color Palette
Charcoal & Coral is a dark and warm color palette of 5 colors: Space Cadet (#22223b), Eggplant (#4a4e69), Cool Grey (#9a8c98), Dusty Rose (#c9ada7) and Light Coral (#f28482). Its dominant hue is red.
The darkest color, Space Cadet, on the lightest, Dusty Rose, gives a 7.36:1 contrast ratio — enough for body text at WCAG AAA. 3 pairs in this palette pass AA for normal text. Light Coral (#f28482) is its most saturated color and a natural choice for buttons and links.
Colors
- Space Cadet
- Eggplant
- Cool Grey
- Dusty Rose
- Light Coral
CSS Output
:root {
--charcoal-coral-1: #22223b;
--charcoal-coral-2: #4a4e69;
--charcoal-coral-3: #9a8c98;
--charcoal-coral-4: #c9ada7;
--charcoal-coral-5: #f28482;
}Charcoal & Coral on a Website
A quick preview on a landing page: the most colorful colors become the primary and accent, a light one the surface. For a more realistic look across many designs, open it in the Palette Visualizer below.
See it on real designs
This is a single preview. The Palette Visualizer shows the palette on 11 designs — dashboards, mobile apps, pricing and blog pages, posters and business cards — lets you change which color plays which role, switch to dark mode and check contrast.
Accessible Color Combinations
Pairs from this palette that work as text on a background, with their WCAG contrast ratio. AA needs 4.5:1 for body text; large text needs 3:1.
- Space Cadet on Dusty Rose#22223b on #c9ada77.36:1AAA
- Space Cadet on Light Coral#22223b on #f284826.17:1AA
- Space Cadet on Cool Grey#22223b on #9a8c984.83:1AA
- Eggplant on Dusty Rose#4a4e69 on #c9ada73.87:1AA Large
- Eggplant on Light Coral#4a4e69 on #f284823.24:1AA Large