You wanted a gold button for a premium product feature and typed color: yellow into your CSS. The result was a blinding, screen-glare yellow that looked nothing like gold. You tried color: gold next and got something much more appropriate: a rich, warm amber that reads as premium rather than alert. The CSS yellow family spans from that scream-bright primary yellow all the way through eleven named colors to muted khakis and warm golden-browns. Knowing where each one sits saves the guessing.
The Color Name Finder maps any custom yellow HEX to the closest named color. This guide covers all eleven named CSS yellows, how they differ from each other, and what each is actually useful for in design.
The Eleven Named Yellow Colors in CSS
The full CSS yellow family, ordered from most vivid to most muted:
| CSS Name | HEX | RGB | Character |
|---|---|---|---|
| yellow | #FFFF00 | R:255, G:255, B:0 | Pure vivid yellow, both channels maxed |
| gold | #FFD700 | R:255, G:215, B:0 | Warm amber-gold, darker than yellow |
| lightyellow | #FFFFE0 | R:255, G:255, B:224 | Very pale, cool-leaning pastel yellow |
| lemonchiffon | #FFFACD | R:255, G:250, B:205 | Pale warm yellow, named after a fabric |
| lightgoldenrodyellow | #FAFAD2 | R:250, G:250, B:210 | Extremely pale warm yellow |
| moccasin | #FFE4B5 | R:255, G:228, B:181 | Warm pale yellow-orange |
| palegoldenrod | #EEE8AA | R:238, G:232, B:170 | Muted warm yellow |
| khaki | #F0E68C | R:240, G:230, B:140 | Muted greenish-yellow, olive-adjacent |
| goldenrod | #DAA520 | R:218, G:165, B:32 | Medium warm golden-yellow |
| darkkhaki | #BDB76B | R:189, G:183, B:107 | Muted brownish-yellow |
| darkgoldenrod | #B8860B | R:184, G:134, B:11 | Dark warm bronze-gold |
The yellow family is the largest single-hue color family in CSS by named color count, tied with the blue family. The range from vivid primary yellow to dark bronze goldenrod covers more perceptual territory than the pink or orange families.
Pure Yellow and the Near-White Pale Yellows
Yellow (#FFFF00) is a primary RGB color. Its red and green channels are both at maximum (255), with zero blue. On screen, this produces the most intense, saturated yellow possible. CSS yellow is the same yellow used for caution tape, traffic signs, and highlighter pens. It is a signal color by nature. It attracts attention with minimal subtlety.
Pure yellow is rarely used in web design for large areas or body text because its intensity is fatiguing at scale and it provides poor contrast for dark text. It works for small accent elements, badges, and warning indicators where the signal quality is the point.
Lightyellow (#FFFFE0) introduces a tiny amount of blue (B:224) into the otherwise pure yellow. This slight blue addition cools the color very slightly, producing a pale, almost white yellow. It reads as barely yellow on most screens unless placed next to pure white. Lightyellow is used as a very subtle warm background tint.
Lemonchiffon (#FFFACD) is slightly warmer and more saturated than lightyellow, with G:250 and B:205. The name comes from lemon (color reference) and chiffon (a type of lightweight sheer fabric). In design, lemonchiffon suggests the color of a sheer lemon-colored cloth held up to light. It works as a warm paper-white alternative.
Lightgoldenrodyellow (#FAFAD2) is the longest CSS color name at 20 characters and one of the palest yellows. Its RGB is R:250, G:250, B:210, very close to lightyellow but with a slightly more pronounced warm tint. The longest color names guide documents this color at the top of the character-length ranking. On most screens it appears nearly identical to white without a direct comparison.
Gold vs Yellow: What Sets Them Apart
Gold (#FFD700) is the most important distinction in the CSS yellow family because it is the answer to the most common design problem in this color group.
Yellow's RGB is R:255, G:255, B:0. Gold's RGB is R:255, G:215, B:0. The only difference is the green channel: 255 for yellow, 215 for gold. That reduction of 40 points in the green channel is enough to push the color from blazing primary yellow into the warm amber range. Gold reads as richer, deeper, and more prestigious than yellow.
The reason this works visually is that lower green with maintained red creates a warmer hue. The balance shifts from a pure equal-red-green yellow toward a red-dominant, orange-adjacent warm color. Gold occupies the perceptual territory where yellows start feeling metallic and warm rather than electric and alert.
In design, yellow signals caution, energy, and brightness. Gold signals premium, warmth, and achievement. These associations are strong enough that using yellow instead of gold on a "Premium" badge or a trophy icon changes the message completely. Gold is the right choice for anything intended to read as valuable, autumnal, or warm.
The Goldenrod Family: Three Shades of Warm Gold-Brown
CSS has three goldenrod colors, all named after the goldenrod plant (genus Solidago), a North American wildflower with vivid yellow flower clusters that bloom in late summer and early fall.
Palegoldenrod (#EEE8AA) has RGB R:238, G:232, B:170. It is a muted, soft yellow with greenish undertones, less vivid than gold or yellow, and more of a warm background or secondary accent color. The relatively balanced RGB values give it a sandy quality. It pairs naturally with earth tones, warm grays, and dark greens.
Goldenrod (#DAA520) has RGB R:218, G:165, B:32. This is the most recognizable version: a warm, medium-intensity golden-yellow that resembles the actual plant's flower color. The green channel at 165 and blue at 32 create a distinctly orange-tinted warm yellow. Goldenrod is one of the better CSS choices for autumn-themed palettes, harvest-adjacent design, and warm illustration work.
Darkgoldenrod (#B8860B) has RGB R:184, G:134, B:11. It is the darkest of the three, reading as a deep bronze-gold that approaches brown from the yellow direction. With both the green (134) and red (184) channels at lower values, darkgoldenrod is substantially darker than goldenrod itself. It works as a shadow color in gold-based design systems and pairs with deep burgundy and forest green.
Khaki and Moccasin: The Muted and Warm Edge Colors
Khaki (#F0E68C) is an olive-adjacent muted yellow with RGB R:240, G:230, B:140. The word comes from the Hindi and Urdu word for "dusty" or "dust-colored," which explains why the color reads as sandy rather than bright. Khaki has a greenish cast from the relatively close red and green channels, placing it at the border between yellow and olive-green in the color families scheme.
Darkkhaki (#BDB76B) is a brownish-yellow at RGB R:189, G:183, B:107. It reads as an army-green adjacent warm tone: muted, desaturated, and earthy. It is rarely used in web design outside of military or outdoor-themed palettes where the earthy quality is intentional.
Moccasin (#FFE4B5) is warmer and more orange-adjacent than the khakis. Its RGB is R:255, G:228, B:181. The blue channel at 181 introduces enough warmth to pull the color away from yellow toward peachy-orange. Moccasin is named after the soft leather shoe color and reads as a warm, inviting neutral yellow-orange rather than a vivid yellow. It works as a background color in warm, natural design systems.
Why Yellow Is Rare as a Background Color
Yellow is an unusual color in web design because it simultaneously attracts maximum attention (it is the most visible color to the human eye) and provides poor readability conditions for most text. Pure yellow (#FFFF00) fails WCAG contrast requirements for dark text at normal body text sizes and is visually overwhelming at large scales.
The pale yellow variants, lightyellow, lemonchiffon, and lightgoldenrodyellow, solve the scale problem by reducing the saturation until the yellow quality is a gentle tint rather than a strong statement. These pale yellows are common as code editor backgrounds, sticky note interfaces, and document backgrounds where warmth is desired without the visual noise of full-saturation yellow.
Gold and goldenrod, being darker, provide better contrast for light text but still require careful checking. The contrast checker from the color section confirms whether any yellow-background and text-color combination passes WCAG AA or AAA requirements before you commit to it.
Finding the Closest CSS Name for Any Yellow HEX
Custom brand yellows and extracted palette yellows rarely match a CSS named color exactly. Paste your HEX into the Color Name Finder to identify the nearest match. For a vivid, saturated yellow, the result will be yellow or gold. For a pale yellow, the tool returns lightyellow, lemonchiffon, or lightgoldenrodyellow. For a muted, warm yellow, expect palegoldenrod or khaki.
For generating a full yellow scale from any base color, the tints and shades generator creates lighter and darker variants. Starting from goldenrod gives you a warm gold scale. Starting from yellow gives you a vivid scale from pale lemon through screaming yellow to dark olive-adjacent tones.
