Volcanic color palette
Cooled rock and molten lava. #1C1C1C is basalt gray-black, #4A0000 and #8B0000 are dark reds that glow faintly, and #CC3300 and #FF6600 are the hot flow on top. There are no light colors, so it's built for dark backgrounds where the orange looks lit from within. Gaming brands and BBQ joints can push it hard without it looking out of place.
Volcanic palette in use
#1C1C1C works as the background and #4A0000 for cards. #FF6600 handles headings and buttons, #CC3300 hover states, and #8B0000 borders, with off-white for body copy.
This pair measures 5.80:1, so it works for body text too. The button uses #CC3300 with white text.
ButtonGood for
- Gaming brand website
- BBQ restaurant menu
- Metal band merch
- Fitness studio promo
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#1C1C1C | #FF6600 | 5.80:1 | AA |
#4A0000 | #FF6600 | 5.53:1 | AA |
#8B0000 | #FF6600 | 3.40:1 | AA large |
#1C1C1C | #CC3300 | 3.27:1 | AA large |
#4A0000 | #CC3300 | 3.12:1 | AA large |
Volcanic palette as code
CSS variables
:root {
--volcanic-1: #1C1C1C;
--volcanic-2: #4A0000;
--volcanic-3: #8B0000;
--volcanic-4: #CC3300;
--volcanic-5: #FF6600;
}Tailwind v4
@theme {
--color-volcanic-1: #1C1C1C;
--color-volcanic-2: #4A0000;
--color-volcanic-3: #8B0000;
--color-volcanic-4: #CC3300;
--color-volcanic-5: #FF6600;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'volcanic': {
100: '#1C1C1C',
200: '#4A0000',
300: '#8B0000',
400: '#CC3300',
500: '#FF6600',
},SCSS
$volcanic-1: #1C1C1C;
$volcanic-2: #4A0000;
$volcanic-3: #8B0000;
$volcanic-4: #CC3300;
$volcanic-5: #FF6600;JSON
["#1C1C1C","#4A0000","#8B0000","#CC3300","#FF6600"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.