HCHTML Color

Shades of yellow

Yellow is the lightest saturated hue there is. Pure #FFFF00 has an OKLCH lightness of 0.97, almost as light as white, which makes it great for highlights and hard to use for text.

yellow · #FFFF00

12 yellow color names

Every CSS named color in the yellow family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

lightyellow#ffffe0rgb(255 255 224)oklch(0.992 0.04 107.1)lemonchiffon#fffacdrgb(255 250 205)oklch(0.978 0.058 102.2)cornsilk#fff8dcrgb(255 248 220)oklch(0.977 0.037 95.4)lightgoldenrodyellow#fafad2rgb(250 250 210)oklch(0.975 0.052 107.3)yellow#ffff00rgb(255 255 0)oklch(0.968 0.211 109.8)moccasin#ffe4b5rgb(255 228 181)oklch(0.93 0.068 81.4)palegoldenrod#eee8aargb(238 232 170)oklch(0.921 0.08 103.2)khaki#f0e68crgb(240 230 140)oklch(0.913 0.112 102.8)gold#ffd700rgb(255 215 0)oklch(0.887 0.182 95.3)darkkhaki#bdb76brgb(189 183 107)oklch(0.767 0.098 104.5)goldenrod#daa520rgb(218 165 32)oklch(0.752 0.147 84)darkgoldenrod#b8860brgb(184 134 11)oklch(0.652 0.132 81.6)

Tailwind yellow scales

The Tailwind v4 default palette families closest to yellow, 50 to 950.

Using yellow in a UI

Pair yellow backgrounds with near-black text, and use the 700–900 shades when you need a yellow that works as a foreground color on white.

yellow-colors.css
:root {
  --lightyellow: oklch(0.992 0.04 107.1); /* #ffffe0 */
  --lemonchiffon: oklch(0.978 0.058 102.2); /* #fffacd */
  --cornsilk: oklch(0.977 0.037 95.4); /* #fff8dc */
  --lightgoldenrodyellow: oklch(0.975 0.052 107.3); /* #fafad2 */
  --yellow: oklch(0.968 0.211 109.8); /* #ffff00 */
  --moccasin: oklch(0.93 0.068 81.4); /* #ffe4b5 */
  --palegoldenrod: oklch(0.921 0.08 103.2); /* #eee8aa */
  --khaki: oklch(0.913 0.112 102.8); /* #f0e68c */
  --gold: oklch(0.887 0.182 95.3); /* #ffd700 */
  --darkkhaki: oklch(0.767 0.098 104.5); /* #bdb76b */
  --goldenrod: oklch(0.752 0.147 84); /* #daa520 */
  --darkgoldenrod: oklch(0.652 0.132 81.6); /* #b8860b */
}
Generate a yellow scaleBuild a palette

Frequently asked questions

What is the hex code for yellow?
The CSS keyword yellow is #FFFF00, which is rgb(255 255 0) or oklch(0.968 0.211 109.8). Tailwind's yellow-500 is #F0B100, a softer yellow that many design systems use instead.
How many shades of yellow have CSS color names?
This page lists 12 CSS named colors in the yellow family, from lightyellow (#FFFFE0) at the light end to darkgoldenrod (#B8860B) at the dark end. Every one can be used directly in CSS by name.
What colors go well with yellow?
Yellow pairs well with purple, blue and gray. For a guaranteed match, open any yellow shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a yellow color scale for my design system?
Pick a yellow you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeGreenTealBluePurplePinkBrownGrayWhite