CSS NAMED COLORS

Autumn CSS
Color Names

Q: What is the CSS color name for olive green?

There are three: olive (#808000), olivedrab (#6b8e23) and darkolivegreen (#556b2f). Only darkolivegreen is dark enough for normal-size text on white (5.95:1).

Q: What hex code is CSS wheat?

wheat is #f5deb3, rgb(245, 222, 179). It is light, so use it as a background: saddlebrown text on wheat has a contrast ratio of 5.40:1, which passes WCAG AA for body text.

Q: Is there a dark orange in CSS?

Yes — darkorange is #ff8c00. Despite the name it is a bright orange with only 2.33:1 contrast against white, so use it for accents or with black text (9.00:1).

Q: Which CSS named colors make a good autumn palette?

Browns (saddlebrown, sienna, chocolate), rust reds (firebrick, indianred), oranges (darkorange), golds (goldenrod, darkgoldenrod), greens (olivedrab, darkolivegreen) and creams (cornsilk, linen, oldlace) cover most fall themes.

Every fall-friendly CSS named color — wheat, sienna, olive, goldenrod, firebrick and more — with hex and RGB values and real WCAG contrast ratios.

Browse the Colors Named-Color Palettes

Last reviewed on October 4, 2026

The Color List

Fall Colors
Built Into CSS

CSS defines 148 named color keywords (a few are spelling pairs such as gray/grey), and a surprising number of them are autumnal: wheat, burlywood, sienna, goldenrod, olivedrab. Named colors are handy for prototypes and readable stylesheets, and they are supported by every browser.

About the contrast columns: ratios are calculated with the WCAG 2 relative-luminance formula against pure white (#ffffff) and pure black (#000000). For normal-size text you need at least 4.5:1 (AA); large text (24px, or 18.66px bold) and UI components need 3:1. Test any other pair in the autumn contrast checker.

Browns, tans & wood tones

CSS name	Hex	RGB	vs white	vs black	Readable with
`wheat`	`#f5deb3`	rgb(245, 222, 179)	1.31:1	15.98:1	black text
`burlywood`	`#deb887`	rgb(222, 184, 135)	1.86:1	11.31:1	black text
`tan`	`#d2b48c`	rgb(210, 180, 140)	1.97:1	10.65:1	black text
`peru`	`#cd853f`	rgb(205, 133, 63)	2.99:1	7.02:1	black text
`sandybrown`	`#f4a460`	rgb(244, 164, 96)	2.03:1	10.33:1	black text
`rosybrown`	`#bc8f8f`	rgb(188, 143, 143)	2.81:1	7.46:1	black text
`chocolate`	`#d2691e`	rgb(210, 105, 30)	3.63:1	5.78:1	black text
`sienna`	`#a0522d`	rgb(160, 82, 45)	5.62:1	3.74:1	white text
`saddlebrown`	`#8b4513`	rgb(139, 69, 19)	7.10:1	2.96:1	white text
`brown`	`#a52a2a`	rgb(165, 42, 42)	7.08:1	2.96:1	white text
`maroon`	`#800000`	rgb(128, 0, 0)	10.95:1	1.92:1	white text

Reds & rusts (maple and sumac)

CSS name	Hex	RGB	vs white	vs black	Readable with
`indianred`	`#cd5c5c`	rgb(205, 92, 92)	3.98:1	5.28:1	black text
`firebrick`	`#b22222`	rgb(178, 34, 34)	6.68:1	3.14:1	white text
`darkred`	`#8b0000`	rgb(139, 0, 0)	10.01:1	2.10:1	white text
`crimson`	`#dc143c`	rgb(220, 20, 60)	4.99:1	4.21:1	white text
`orangered`	`#ff4500`	rgb(255, 69, 0)	3.44:1	6.10:1	black text
`tomato`	`#ff6347`	rgb(255, 99, 71)	2.95:1	7.13:1	black text
`coral`	`#ff7f50`	rgb(255, 127, 80)	2.50:1	8.40:1	black text
`salmon`	`#fa8072`	rgb(250, 128, 114)	2.50:1	8.40:1	black text
`darksalmon`	`#e9967a`	rgb(233, 150, 122)	2.31:1	9.11:1	black text
`lightsalmon`	`#ffa07a`	rgb(255, 160, 122)	1.99:1	10.56:1	black text

Oranges & pumpkin tones

CSS name	Hex	RGB	vs white	vs black	Readable with
`darkorange`	`#ff8c00`	rgb(255, 140, 0)	2.33:1	9.00:1	black text
`orange`	`#ffa500`	rgb(255, 165, 0)	1.97:1	10.63:1	black text
`sandybrown`	`#f4a460`	rgb(244, 164, 96)	2.03:1	10.33:1	black text
`peachpuff`	`#ffdab9`	rgb(255, 218, 185)	1.31:1	15.98:1	black text

Golds & harvest yellows

CSS name	Hex	RGB	vs white	vs black	Readable with
`goldenrod`	`#daa520`	rgb(218, 165, 32)	2.24:1	9.38:1	black text
`darkgoldenrod`	`#b8860b`	rgb(184, 134, 11)	3.25:1	6.45:1	black text
`gold`	`#ffd700`	rgb(255, 215, 0)	1.40:1	14.97:1	black text
`khaki`	`#f0e68c`	rgb(240, 230, 140)	1.28:1	16.40:1	black text
`darkkhaki`	`#bdb76b`	rgb(189, 183, 107)	2.07:1	10.15:1	black text
`palegoldenrod`	`#eee8aa`	rgb(238, 232, 170)	1.25:1	16.76:1	black text

Olive, moss & sage greens

CSS name	Hex	RGB	vs white	vs black	Readable with
`olive`	`#808000`	rgb(128, 128, 0)	4.20:1	5.01:1	black text
`olivedrab`	`#6b8e23`	rgb(107, 142, 35)	3.81:1	5.52:1	black text
`darkolivegreen`	`#556b2f`	rgb(85, 107, 47)	5.95:1	3.53:1	white text
`yellowgreen`	`#9acd32`	rgb(154, 205, 50)	1.88:1	11.15:1	black text
`darkseagreen`	`#8fbc8f`	rgb(143, 188, 143)	2.15:1	9.76:1	black text
`forestgreen`	`#228b22`	rgb(34, 139, 34)	4.39:1	4.78:1	black text
`darkgreen`	`#006400`	rgb(0, 100, 0)	7.44:1	2.82:1	white text
`seagreen`	`#2e8b57`	rgb(46, 139, 87)	4.25:1	4.95:1	black text

Creams & off-whites (backgrounds)

CSS name	Hex	RGB	vs white	vs black	Readable with
`cornsilk`	`#fff8dc`	rgb(255, 248, 220)	1.07:1	19.71:1	black text
`linen`	`#faf0e6`	rgb(250, 240, 230)	1.12:1	18.67:1	black text
`oldlace`	`#fdf5e6`	rgb(253, 245, 230)	1.08:1	19.38:1	black text
`antiquewhite`	`#faebd7`	rgb(250, 235, 215)	1.17:1	17.93:1	black text
`beige`	`#f5f5dc`	rgb(245, 245, 220)	1.11:1	18.98:1	black text
`bisque`	`#ffe4c4`	rgb(255, 228, 196)	1.22:1	17.15:1	black text
`blanchedalmond`	`#ffebcd`	rgb(255, 235, 205)	1.17:1	18.02:1	black text
`navajowhite`	`#ffdead`	rgb(255, 222, 173)	1.29:1	16.30:1	black text
`moccasin`	`#ffe4b5`	rgb(255, 228, 181)	1.23:1	17.02:1	black text
`papayawhip`	`#ffefd5`	rgb(255, 239, 213)	1.13:1	18.56:1	black text
`floralwhite`	`#fffaf0`	rgb(255, 250, 240)	1.04:1	20.18:1	black text
`ivory`	`#fffff0`	rgb(255, 255, 240)	1.01:1	20.81:1	black text
`seashell`	`#fff5ee`	rgb(255, 245, 238)	1.07:1	19.55:1	black text

Cool autumn accents (dusk blues & plums)

CSS name	Hex	RGB	vs white	vs black	Readable with
`midnightblue`	`#191970`	rgb(25, 25, 112)	14.85:1	1.41:1	white text
`darkslateblue`	`#483d8b`	rgb(72, 61, 139)	9.07:1	2.32:1	white text
`steelblue`	`#4682b4`	rgb(70, 130, 180)	4.11:1	5.11:1	black text
`slategray`	`#708090`	rgb(112, 128, 144)	4.05:1	5.18:1	black text
`darkslategray`	`#2f4f4f`	rgb(47, 79, 79)	8.93:1	2.35:1	white text
`cadetblue`	`#5f9ea0`	rgb(95, 158, 160)	3.05:1	6.88:1	black text
`plum`	`#dda0dd`	rgb(221, 160, 221)	2.07:1	10.15:1	black text
`purple`	`#800080`	rgb(128, 0, 128)	9.42:1	2.23:1	white text
`indigo`	`#4b0082`	rgb(75, 0, 130)	12.95:1	1.62:1	white text

Ready-Made

Palettes Using
Only Named Colors

Wheat field

Warm neutral page: wheat or cornsilk background, saddlebrown text (passes AA on wheat), sienna for links.

:root {
  --wheat-field-1: wheat; /* #f5deb3 */
  --wheat-field-2: burlywood; /* #deb887 */
  --wheat-field-3: sienna; /* #a0522d */
  --wheat-field-4: saddlebrown; /* #8b4513 */
  --wheat-field-5: darkolivegreen; /* #556b2f */
}

Autumn leaf

Leaf colors from red to green. Use as accents, charts or illustrations — most are too mid-toned for body text on white.

:root {
  --autumn-leaf-1: firebrick; /* #b22222 */
  --autumn-leaf-2: orangered; /* #ff4500 */
  --autumn-leaf-3: darkorange; /* #ff8c00 */
  --autumn-leaf-4: goldenrod; /* #daa520 */
  --autumn-leaf-5: olivedrab; /* #6b8e23 */
}

Olive & sage

Muted greens on an off-white base; darkolivegreen is dark enough for text on oldlace.

:root {
  --olive-sage-1: darkolivegreen; /* #556b2f */
  --olive-sage-2: olivedrab; /* #6b8e23 */
  --olive-sage-3: darkkhaki; /* #bdb76b */
  --olive-sage-4: darkseagreen; /* #8fbc8f */
  --olive-sage-5: oldlace; /* #fdf5e6 */
}

Blues & golds

Cool dusk blues against harvest golds — midnightblue on floralwhite gives very high contrast.

:root {
  --blues-golds-1: midnightblue; /* #191970 */
  --blues-golds-2: steelblue; /* #4682b4 */
  --blues-golds-3: goldenrod; /* #daa520 */
  --blues-golds-4: gold; /* #ffd700 */
  --blues-golds-5: floralwhite; /* #fffaf0 */
}

Pumpkin spice

Classic orange-brown run ending in a soft linen background.

:root {
  --pumpkin-spice-1: saddlebrown; /* #8b4513 */
  --pumpkin-spice-2: chocolate; /* #d2691e */
  --pumpkin-spice-3: darkorange; /* #ff8c00 */
  --pumpkin-spice-4: sandybrown; /* #f4a460 */
  --pumpkin-spice-5: linen; /* #faf0e6 */
}

Tips

Practical
Notes

Using named colors well

Names are case-insensitive: SaddleBrown and saddlebrown are the same color.
Watch the "dark" names. Some are counter-intuitive: darkgray (#a9a9a9) is lighter than gray (#808080), and darkorange is still bright.
Pair light warm backgrounds with dark brown or green text. saddlebrown on cornsilk = 6.66:1, darkolivegreen on linen = 5.29:1, maroon on oldlace = 10.11:1, sienna on floralwhite = 5.40:1.
Need transparency or tints? Use the hex or RGB value instead, e.g. rgb(139 69 19 / 0.15) for a 15% saddlebrown wash.
For hand-tuned palettes with custom hex codes and gradients, see the autumn design system.

Frequently asked questions

Is there a sage green color name in CSS?

No. CSS has 148 named colors and none is called sage. Designers usually write sage as a hex value — muted grey-greens such as #9caf88 or #b2ac88 are common choices — or pick the closest named colors, darkseagreen (#8fbc8f) and darkkhaki (#bdb76b).

What is the CSS color name for olive green?

There are three: olive (#808000), olivedrab (#6b8e23) and darkolivegreen (#556b2f). Only darkolivegreen is dark enough for normal-size text on white (5.95:1).

What hex code is CSS wheat?

wheat is #f5deb3, rgb(245, 222, 179). It is light, so use it as a background: saddlebrown text on wheat has a contrast ratio of 5.40:1, which passes WCAG AA for body text.

Is there a dark orange in CSS?

Yes — darkorange is #ff8c00. Despite the name it is a bright orange with only 2.33:1 contrast against white, so use it for accents or with black text (9.00:1).

Which CSS named colors make a good autumn palette?

Browns (saddlebrown, sienna, chocolate), rust reds (firebrick, indianred), oranges (darkorange), golds (goldenrod, darkgoldenrod), greens (olivedrab, darkolivegreen) and creams (cornsilk, linen, oldlace) cover most fall themes.

Autumn CSSColor Names

Browns, tans & wood tones

Reds & rusts (maple and sumac)

Oranges & pumpkin tones

Golds & harvest yellows

Olive, moss & sage greens

Creams & off-whites (backgrounds)

Cool autumn accents (dusk blues & plums)

Wheat field

Autumn leaf

Olive & sage

Blues & golds

Pumpkin spice

Using named colors well

Frequently asked questions

Is there a sage green color name in CSS?

What is the CSS color name for olive green?

What hex code is CSS wheat?

Is there a dark orange in CSS?

Which CSS named colors make a good autumn palette?

Check Your Pairs

Autumn CSS
Color Names