Wildfire color palette
Pure red #FF0000, red-orange, orange and gold climb like flames, and hot pink #FF69B4 is the spark nobody expected. Every color is fully saturated, and none is dark. Used together it's loud and urgent, so give it a black or very dark base and let it burn on top. Hot sauce labels and flash sale banners can take all that heat.
Wildfire palette in use
Put this set on black or dark charcoal. #FFD700 handles headings and text, #FF0000 the main button, #FF4500 and #FF8C00 gradients, and #FF69B4 badges or limited-offer tags.
This pair measures 14.97:1, so it works for body text too. The button uses #FF0000 with black text.
ButtonGood for
- Hot sauce label
- Energy drink ad
- Flash sale banner
- Rock concert poster
Readable color pairs
No two colors in this palette reach 3:1 contrast, so use it for backgrounds and shapes, and set text in white or black. Check any pair in the contrast checker.
Wildfire palette as code
CSS variables
:root {
--wildfire-1: #FF0000;
--wildfire-2: #FF4500;
--wildfire-3: #FF8C00;
--wildfire-4: #FFD700;
--wildfire-5: #FF69B4;
}Tailwind v4
@theme {
--color-wildfire-1: #FF0000;
--color-wildfire-2: #FF4500;
--color-wildfire-3: #FF8C00;
--color-wildfire-4: #FFD700;
--color-wildfire-5: #FF69B4;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'wildfire': {
100: '#FF0000',
200: '#FF4500',
300: '#FF8C00',
400: '#FFD700',
500: '#FF69B4',
},SCSS
$wildfire-1: #FF0000;
$wildfire-2: #FF4500;
$wildfire-3: #FF8C00;
$wildfire-4: #FFD700;
$wildfire-5: #FF69B4;JSON
["#FF0000","#FF4500","#FF8C00","#FFD700","#FF69B4"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.