Skip to content

CSS named color

LightGoldenrodYellow #FAFAD2

LightGoldenrodYellow (CSS keyword lightgoldenrodyellow) has the hex code #FAFAD2 and the RGB value rgb(250, 250, 210): an off-white with a yellow tint.

LightGoldenrodYellow#FAFAD2

At 20 characters, the longest CSS color name. The value is a pale yellow-cream that is hard to tell apart from lightyellow and lemonchiffon.

Color codes for LightGoldenrodYellow

Color codes for LightGoldenrodYellow
CSS keywordlightgoldenrodyellow
HEX#FAFAD2
RGBrgb(250, 250, 210)
HSLhsl(60, 80%, 90%)
HWBhwb(60 82% 2%)
OKLCHoklch(97.5% 0.052 107.3)
CMYK (naive, no ICC profile)cmyk(0%, 0%, 16%, 2%)
Decimal16,448,210
Hue familyYellows

Contrast and accessibility

On lightgoldenrodyellow, black text has a contrast ratio of 19.66:1 and passes AAA at any text size; white text reaches 1.06:1.

WCAG 2.2 contrast ratios (success criteria 1.4.3 and 1.4.6: AA needs 4.5:1 for normal text and 3:1 for large text, AAA needs 7:1 and 4.5:1). APCA Lc is the lightness contrast from the APCA-W3 0.0.98G model proposed for WCAG 3; a higher absolute value is more readable, and Lc 75 is its suggested minimum for body text.

Contrast and accessibility
PairRatioAAAA largeAAAAAA largeAPCA Lc
Black text on lightgoldenrodyellow19.66:1PassPassPassPass101.5
White text on lightgoldenrodyellow1.06:1FailFailFailFail0.0
Lightgoldenrodyellow text on white1.06:1FailFailFailFail0.0
Lightgoldenrodyellow text on black19.66:1PassPassPassPass−102.9

Tints and shades

Each step mixes lightgoldenrodyellow with white (tints) or black (shades) in gamma-encoded sRGB, the same result as color-mix(in srgb, lightgoldenrodyellow, white 25%) in CSS.

Tints (mixed with white)

  1. 5%
    #fafad4
  2. 15%
    #fbfbd9
  3. 25%
    #fbfbdd
  4. 35%
    #fcfce2
  5. 45%
    #fcfce6
  6. 55%
    #fdfdeb
  7. 65%
    #fdfdef
  8. 75%
    #fefef4
  9. 85%
    #fefef8
  10. 95%
    #fffffd

Shades (mixed with black)

  1. 5%
    #eeeec8
  2. 15%
    #d5d5b3
  3. 25%
    #bcbc9e
  4. 35%
    #a3a389
  5. 45%
    #8a8a74
  6. 55%
    #70705e
  7. 65%
    #58584a
  8. 75%
    #3f3f35
  9. 85%
    #262620
  10. 95%
    #0d0d0b

Color harmonies

Rotating the hue in OKLCH while keeping lightness and chroma, lightgoldenrodyellow's complementary color is #F5F4FF (close to ghostwhite), its analogous colors are #FFF3D0 and #E7FFDE, and its triadic partners are #DAFDFF and #FFECFC. For text on top, black gives the higher contrast.

Color harmonies
HarmonyRotationColor
Complementary+180°#f5f4ff
Analogous−30°, +30°#fff3d0#e7ffde
Triadic+120°, +240°#dafdff#ffecfc
Split-complementary+150°, +210°#e9f8ff#ffeeff

Computed in OKLCH: the hue is rotated by 180° (complementary), ±30° (analogous), ±120° (triadic) and 180° ±30° (split-complementary) while lightness and chroma stay fixed. Results that fall outside sRGB are brought back with the CSS Color 4 gamut mapping algorithm. Because this uses OKLCH, the values differ from tools that rotate hue in HSL, but every color keeps the same perceived lightness.

Warm or cool?

LightGoldenrodYellow is a warm color: its hue is 60° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.

Nearest named and Tailwind colors

Distance is ΔE OK, the Euclidean distance in OKLab multiplied by 100. Values under about 2 are hard to tell apart side by side.

Nearest CSS named colors

Nearest CSS named colors
ColorHEXΔE OK
lemonchiffon#fffacd0.9
cornsilk#fff8dc1.7
lightyellow#ffffe02.1

Nearest Tailwind v4 colors

Nearest Tailwind v4 colors
ColorHEXΔE OK
amber-100#fef3c61.9
yellow-100#fef9c22.0
lime-100#ecfcca2.3

Code snippets

CSS
.element {
  color: lightgoldenrodyellow;
  background-color: #fafad2;
  border-color: rgb(250 250 210);
  outline-color: oklch(97.5% 0.052 107.3);
}
Tailwind CSS
<div class="bg-[#fafad2] text-black">...</div>

/* or register it once in your CSS (Tailwind v4) */
@theme {
  --color-lightgoldenrodyellow: #fafad2;
}
/* then use bg-lightgoldenrodyellow, text-lightgoldenrodyellow, border-lightgoldenrodyellow */
SwiftUI
import SwiftUI

extension Color {
  static let lightgoldenrodyellow = Color(red: 0.980, green: 0.980, blue: 0.824)
}
Jetpack Compose
import androidx.compose.ui.graphics.Color

val Lightgoldenrodyellow = Color(0xFFFAFAD2)
Flutter
import 'package:flutter/material.dart';

const lightgoldenrodyellow = Color(0xFFFAFAD2);
Android XML
<!-- res/values/colors.xml -->
<color name="lightgoldenrodyellow">#FAFAD2</color>

Frequently asked questions

What is the hex code for lightgoldenrodyellow?
The hex code for lightgoldenrodyellow is #FAFAD2. The same color is rgb(250, 250, 210), hsl(60, 80%, 90%) and oklch(97.5% 0.052 107.3), and in CSS you can also write the keyword lightgoldenrodyellow directly.
Is lightgoldenrodyellow a warm or cool color?
LightGoldenrodYellow is a warm color: its hue is 60° on the HSL wheel, in the red, orange and yellow range (0° to about 70°, plus reds above 330°) that is conventionally called warm.
What colors go with lightgoldenrodyellow?
Rotating the hue in OKLCH while keeping lightness and chroma, lightgoldenrodyellow's complementary color is #F5F4FF (close to ghostwhite), its analogous colors are #FFF3D0 and #E7FFDE, and its triadic partners are #DAFDFF and #FFECFC. For text on top, black gives the higher contrast.
Can you use white text on lightgoldenrodyellow?
White text on lightgoldenrodyellow has a contrast ratio of 1.06:1, which fails AA even for large text under WCAG 2.2. Black text reaches 19.66:1 and passes both AA and AAA. In APCA terms that is Lc 0.0 for white and Lc 101.5 for black.
What is the RGB value of lightgoldenrodyellow?
LightGoldenrodYellow is rgb(250, 250, 210): red 250, green 250 and blue 210 on the 0 to 255 scale, or 98.0%, 98.0% and 82.4%. As a decimal integer it is 16448210.

Last reviewed by Arielton Oberek.