#0b0f1a
#1a2235
#e8913a
#c44d2b
#faf5ef
Midnight Ember
Dark base · Warm accents · High contrast
Autumn Design
System
A small library of fall-themed design tokens. Color palettes, CSS variables, SVG patterns, and gradients — ready to copy into your own projects.
Last reviewed on May 11, 2026
Autumn Color
Palette Library
#2d1b0e
#6b3a2a
#d4a254
#e8c88a
#f5e6d0
Harvest Gold
Warm earth · Golden midtones · Cream
#1a2a1a
#3d5a3d
#7c9a6e
#b8c4a8
#e8e0d6
Forest Fade
Deep green · Sage · Soft linen
#1c1018
#4a2040
#8b3a62
#c46a3a
#e8b87a
Dusk Plum
Berry dusk · Warm gradient · Amber
#1a0f0a
#8b4513
#cd7f32
#d2691e
#f4e4d7
Rust & Clay
Terracotta · Bronze · Desert sand
#0d1117
#4a5568
#718096
#cbd5e0
#f7fafc
Foggy Morning
Cool grays · Misty blue · Crisp white
#1a1512
#5a3825
#cc5500
#ff7f50
#ffe4b5
Burnt Orange
Dark chocolate · Pumpkin · Moccasin
#121612
#2f4f2f
#556b2f
#9acd32
#f0ead6
Mossy Stone
Forest floor · Olive · Eggshell
#1a0c0c
#8b0000
#dc143c
#ff6347
#ffe4e1
Maple Leaf
Deep red · Crimson · Tomato · Blush
#1f1a15
#8b7355
#daa520
#ffd700
#fffacd
Golden Hour
Umber · Goldenrod · Lemon chiffon
CSS Gradient
Snippets
Ember Fade
linear-gradient(135deg, #e8913a 0%, #c44d2b 100%)
Harvest Sunrise
linear-gradient(180deg, #2d1b0e 0%, #d4a254 50%, #f5e6d0 100%)
Dusk Radial
radial-gradient(circle at top right, #1c1018, #4a2040, #c46a3a)
Forest Horizon
linear-gradient(90deg, #1a2a1a, #3d5a3d, #7c9a6e, #b8c4a8)
Palette
Playground
Click "Apply to Playground" on any palette above to preview it live on a sample component.
01
Sample Component
This card adapts to the palette you select. Try applying different color schemes to see how they look in practice.
Free to Copy,
Personal or Commercial
Use it in any project
The hex codes, gradient definitions, CSS custom properties, and SVG patterns on this page are free to copy into personal projects, client work, or commercial products. No attribution is required — a link back to this page is appreciated but never expected.
No build step, no dependencies
Every snippet is plain CSS or inline SVG. Copy the hex codes, gradient declarations, or patterns and paste them into your stylesheet. Works with vanilla CSS, Tailwind, styled-components, or any other approach you already use.
Suggest a palette or report a fix
If you'd like a new autumn palette added, spot a contrast issue, or have a gradient you think belongs here, send a note via the contact page. We update the library periodically based on reader requests.
Contact the Editors →