Autumn Leaves color palette
Red #E63946, pumpkin #F4A261 and mustard #E9C46A make up the warm side, and teal #2A9D8F with dark slate #264653 keep the set from turning into an orange wash. The teal is what makes it useful beyond October, since it gives links and secondary buttons a cool counterpoint. Food blogs, farmers markets, school fall programs and Thanksgiving menus all sit comfortably in it.
Autumn Leaves palette in use
Use #264653 for text and dark sections, and #E9C46A as a warm panel background with that slate text on top. #E63946 suits a primary button, while #2A9D8F covers links and secondary actions.
This pair measures 6.03:1, so it works for body text too. The button uses #E63946 with black text.
ButtonGood for
- Harvest festival flyer
- Thanksgiving menu
- Food blog theme
- Farmers market signage
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 |
|---|---|---|---|
#264653 | #E9C46A | 6.03:1 | AA |
#264653 | #F4A261 | 4.88:1 | AA |
#264653 | #2A9D8F | 3.03:1 | AA large |
Autumn Leaves palette as code
CSS variables
:root {
--autumn-leaves-1: #E63946;
--autumn-leaves-2: #F4A261;
--autumn-leaves-3: #E9C46A;
--autumn-leaves-4: #2A9D8F;
--autumn-leaves-5: #264653;
}Tailwind v4
@theme {
--color-autumn-leaves-1: #E63946;
--color-autumn-leaves-2: #F4A261;
--color-autumn-leaves-3: #E9C46A;
--color-autumn-leaves-4: #2A9D8F;
--color-autumn-leaves-5: #264653;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'autumn-leaves': {
100: '#E63946',
200: '#F4A261',
300: '#E9C46A',
400: '#2A9D8F',
500: '#264653',
},SCSS
$autumn-leaves-1: #E63946;
$autumn-leaves-2: #F4A261;
$autumn-leaves-3: #E9C46A;
$autumn-leaves-4: #2A9D8F;
$autumn-leaves-5: #264653;JSON
["#E63946","#F4A261","#E9C46A","#2A9D8F","#264653"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.