Fall Color Palette — HEX Codes, Swatches & UI Palette
Inspired by changing autumn leaves, spiced cider, and crisp golden afternoons. This palette pairs warm terracotta and rich pumpkin orange with earthy olive and deep roasted chestnut for comforting, rustic brand identities and cozy editorial layouts.
Color Swatches & Technical Specifications
Exact color codes, luminance values, and WCAG contrast ratings for each swatch in the Fall Color Palette.
UI Design & Color Hierarchy Guide
Use the warm cream as your primary surface or card background. Reserve the rich burnt orange for call-to-action buttons, and pair with deep chestnut typography for effortless, high-contrast readability.
WCAG 2.1 Accessibility & Contrast Matrix
Legibility ratings between palette elements and key backgrounds (Lightest: Harvest Ochre | Darkest: Deep Chestnut):
| Swatch | Contrast vs Light Canvas | Contrast vs Dark Canvas |
|---|---|---|
| Burnt Orange (#CC5500) | 1.78:1 Fail | 2.87:1 Fail |
| Terracotta Clay (#E2725B) | 1.28:1 Fail | 4.0:1 AA Large |
| Harvest Ochre (#D99B26) | 1.0:1 Fail | 5.11:1 AA |
| Olive Green (#556B2F) | 2.45:1 Fail | 2.08:1 Fail |
| Deep Chestnut (#4A2E18) | 5.11:1 AA | 1.0:1 Fail |
CSS Custom Properties & Design Tokens
Copy and paste production-ready tokens directly into your CSS stylesheet or Tailwind CSS configuration:
:root {
--color-1: #CC5500; /* Burnt Orange - Primary Accent / CTA */
--color-2: #E2725B; /* Terracotta Clay - Warm Accent */
--color-3: #D99B26; /* Harvest Ochre - Golden Highlight */
--color-4: #556B2F; /* Olive Green - Earthy Complement */
--color-5: #4A2E18; /* Deep Chestnut - Dark Text / Grounding */
}{
colors: {
'palette-1': '#CC5500',
'palette-2': '#E2725B',
'palette-3': '#D99B26',
'palette-4': '#556B2F',
'palette-5': '#4A2E18'
}
}Explore More Curated Color Palettes
Browse seasonal palettes, retro aesthetic color schemes, nature tones, and dark mode themes.