darkwarmvibrant
Volcanic Color Palette
Volcanic is a dark, warm and vibrant color palette of 5 colors: Oxford Blue (#03071e), Oxblood (#370617), Dark Red (#9d0208), Chocolate (#e85d04) and Amber (#ffba08). Its dominant hue is red.
The darkest color, Oxford Blue, on the lightest, Amber, gives a 11.66:1 contrast ratio — enough for body text at WCAG AAA. 5 pairs in this palette pass AA for normal text. Chocolate (#e85d04) is its most saturated color and a natural choice for buttons and links.
Colors
- Oxford Blue
- Oxblood
- Dark Red
- Chocolate
- Amber
CSS Output
:root {
--volcanic-1: #03071e;
--volcanic-2: #370617;
--volcanic-3: #9d0208;
--volcanic-4: #e85d04;
--volcanic-5: #ffba08;
}Volcanic 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.
- Oxford Blue on Amber#03071e on #ffba0811.66:1AAA
- Oxblood on Amber#370617 on #ffba0810.22:1AAA
- Oxford Blue on Chocolate#03071e on #e85d045.69:1AA
- Dark Red on Amber#9d0208 on #ffba085.02:1AA
- Oxblood on Chocolate#370617 on #e85d044.99:1AA