Autumn Design
System

A small library of fall-themed design tokens: ten color palettes with hex codes, matching CSS variables, and gradients — ready to copy into your own projects.

Browse Palettes Try the Playground

Last reviewed on October 4, 2026

10 Curated Palettes

Autumn Color
Palette Library

#0b0f1a
#1a2235
#e8913a
#c44d2b
#faf5ef

Midnight Ember

Dark base · Warm accents · High contrast

#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

Ready-to-Copy Gradients

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)
Design Tokens

CSS Custom
Properties

Each palette above as a ready-to-paste :root block. Swatches run from darkest/base (1) to lightest (5) in the same order as the cards. Check text/background pairs with the autumn contrast checker before shipping.

Midnight Ember

:root {
  /* Midnight Ember */
  --midnight-ember-1: #0b0f1a;
  --midnight-ember-2: #1a2235;
  --midnight-ember-3: #e8913a;
  --midnight-ember-4: #c44d2b;
  --midnight-ember-5: #faf5ef;
}

Harvest Gold

:root {
  /* Harvest Gold */
  --harvest-gold-1: #2d1b0e;
  --harvest-gold-2: #6b3a2a;
  --harvest-gold-3: #d4a254;
  --harvest-gold-4: #e8c88a;
  --harvest-gold-5: #f5e6d0;
}

Forest Fade

:root {
  /* Forest Fade */
  --forest-fade-1: #1a2a1a;
  --forest-fade-2: #3d5a3d;
  --forest-fade-3: #7c9a6e;
  --forest-fade-4: #b8c4a8;
  --forest-fade-5: #e8e0d6;
}

Dusk Plum

:root {
  /* Dusk Plum */
  --dusk-plum-1: #1c1018;
  --dusk-plum-2: #4a2040;
  --dusk-plum-3: #8b3a62;
  --dusk-plum-4: #c46a3a;
  --dusk-plum-5: #e8b87a;
}

Rust & Clay

:root {
  /* Rust & Clay */
  --rust-clay-1: #1a0f0a;
  --rust-clay-2: #8b4513;
  --rust-clay-3: #cd7f32;
  --rust-clay-4: #d2691e;
  --rust-clay-5: #f4e4d7;
}

Foggy Morning

:root {
  /* Foggy Morning */
  --foggy-morning-1: #0d1117;
  --foggy-morning-2: #4a5568;
  --foggy-morning-3: #718096;
  --foggy-morning-4: #cbd5e0;
  --foggy-morning-5: #f7fafc;
}

Burnt Orange

:root {
  /* Burnt Orange */
  --burnt-orange-1: #1a1512;
  --burnt-orange-2: #5a3825;
  --burnt-orange-3: #cc5500;
  --burnt-orange-4: #ff7f50;
  --burnt-orange-5: #ffe4b5;
}

Mossy Stone

:root {
  /* Mossy Stone */
  --mossy-stone-1: #121612;
  --mossy-stone-2: #2f4f2f;
  --mossy-stone-3: #556b2f;
  --mossy-stone-4: #9acd32;
  --mossy-stone-5: #f0ead6;
}

Maple Leaf

:root {
  /* Maple Leaf */
  --maple-leaf-1: #1a0c0c;
  --maple-leaf-2: #8b0000;
  --maple-leaf-3: #dc143c;
  --maple-leaf-4: #ff6347;
  --maple-leaf-5: #ffe4e1;
}

Golden Hour

:root {
  /* Golden Hour */
  --golden-hour-1: #1f1a15;
  --golden-hour-2: #8b7355;
  --golden-hour-3: #daa520;
  --golden-hour-4: #ffd700;
  --golden-hour-5: #fffacd;
}
Interactive Preview

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.

How to Use

Free to Copy,
Personal or Commercial

NO ATTRIBUTION REQUIRED

Use it in any project

The hex codes, gradient definitions, and CSS custom properties 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.

COPY-PASTE READY

No build step, no dependencies

Every snippet is plain CSS. Copy the hex codes, gradient declarations, or :root blocks and paste them into your stylesheet. Works with vanilla CSS, Tailwind, styled-components, or any other approach you already use.

CORRECTIONS & REQUESTS

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. The library is updated from time to time.

Contact the Editors →