Sunglow #FFD166

Sunglow is a light, moderately saturated orange with hex code #FFD166 and RGB rgb(255, 209, 102).

Aa

Black text reads best on this color (14.56:1).

About this color

#FFD166 is a light, moderately saturated orange. In OKLCH its lightness is 88%, its chroma 0.135 and its hue 86°. Its hue sits on the warm side of the wheel. It is the named color Sunglow. Black text reads best on it, at 14.56:1.

Hue familyOranges
Lightnesslight (88%)
Chromamoderately saturated (0.135)
Temperaturewarm
Nearest nameSunglow
Black text14.56:1
White text1.44:1

Colors that go with Sunglow

Matches found by rotating Sunglow around the OKLCH hue wheel, each labelled with the closest name in our list.

Color palettes with Sunglow

Curated color palettes that contain a color within ΔE 0.06 (OKLab) of Sunglow, closest first.

Similar named colors

The eight named colors closest to Sunglow, with their ΔE distance.

More about Sunglow

How to make Sunglow

A starting recipe from common paint colors, found with a spectral paint model (the color mixer’s paint mode). Real pigments vary, so mix a small test batch and adjust.

  • 2 parts white
  • 1 part orange
  • 1 part yellow

Recipe result: #FDD168, a difference of ΔE 0.003 from Sunglow. That is very close: most people will not see the difference.

What colors make yellow? | Color mixing chart

Codes for Sunglow in every format

HEX#FFD166
RGBrgb(255, 209, 102)
HSLhsl(42, 100%, 70%)
OKLCHoklch(88% 0.135 86.1)

Contrast

WCAG 2 contrast ratios are the conformance target: AA needs 4.5:1 for body text and 3:1 for large text, AAA needs 7:1. APCA Lc values are supplementary guidance from the WCAG 3 drafts.

PairWCAG 2ResultAPCAAPCA guidance
White text on #FFD166 1.44:1 Fails Lc -23.9 Dividers and decoration only
Black text on #FFD166 14.56:1 AAA Lc 82.7 Fine for body text
#FFD166 text on white 1.44:1 Fails Lc 21.0 Dividers and decoration only
#FFD166 text on black 14.56:1 AAA Lc -82.4 Fine for body text

Shades and tints of Sunglow

A 50–950 scale built in OKLCH: the hue is held, lightness follows a Tailwind v4-like curve, and every step is kept inside the sRGB gamut. This color sits at step 200.

  1. Step 50

    50

    #FCF5E4

    oklch(97.1% 0.024 88.2)

  2. Step 100

    100

    #F9E8C5

    oklch(93.6% 0.049 85.1)

  3. Step 200

    200 (this color)

    #FFD166

    oklch(88% 0.135 86.1)

  4. Step 300

    300

    #F0B700

    oklch(80.9% 0.166 85.9)

  5. Step 400

    400

    #C89900

    oklch(70.8% 0.145 86.5)

  6. Step 500

    500

    #AC8200

    oklch(63% 0.129 85.7)

  7. Step 600

    600

    #916D00

    oklch(55.6% 0.114 85.6)

  8. Step 700

    700

    #7A5C00

    oklch(49.2% 0.101 86.4)

  9. Step 800

    800

    #644B00

    oklch(42.8% 0.087 86.6)

  10. Step 900

    900

    #543E00

    oklch(37.8% 0.077 85.9)

  11. Step 950

    950

    #322400

    oklch(27% 0.055 86.6)

Export this scale for Tailwind in the Tailwind colors tool

Sunglow with color blindness

Simulated with the Machado et al. (2009) model. ΔE is how far the color moves: below about 0.02 you would not notice a change.

VisionSeen asShift (ΔE)
Protanopia (no red cones)#E7D05B0.039
Deuteranopia (no green cones)#F2DC6A0.031
Tritanopia (no blue cones)#FFC1B90.117
Achromatopsia (no color)#D7D7D70.135

Use Sunglow in your product

Turn it into light and dark UI roles checked for contrast, then export to Tailwind v4, shadcn/ui, CSS or design tokens.