Yellow #FFFF00

Yellow is a very light, vivid yellow with hex code #FFFF00 and RGB rgb(255, 255, 0).

Aa

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

About this color

#FFFF00 is a very light, vivid yellow. In OKLCH its lightness is 97%, its chroma 0.211 and its hue 110°. Its hue sits on the warm side of the wheel. It is the named color Yellow. Black text reads best on it, at 19.55:1.

Hue familyYellows
Lightnessvery light (97%)
Chromavivid (0.211)
Temperaturewarm
Nearest nameYellow
Black text19.55:1
White text1.07:1

Colors that go with Yellow

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

Color palettes with Yellow

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

Similar named colors

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

More about Yellow

How to make Yellow

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.

  • 1 part yellow
  • 1 part white

Recipe result: #FFE350, a difference of ΔE 0.081 from Yellow. Yellow is more vivid than these paints can mix, so start from a ready-made yellow paint and adjust it.

What colors make yellow? | Color mixing chart

Codes for Yellow in every format

HEX#FFFF00
RGBrgb(255, 255, 0)
HSLhsl(60, 100%, 50%)
OKLCHoklch(96.8% 0.211 109.8)

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 #FFFF00 1.07:1 Fails Lc 0.0 Not readable
Black text on #FFFF00 19.55:1 AAA Lc 101.4 Preferred for body text
#FFFF00 text on white 1.07:1 Fails Lc 0.0 Not readable
#FFFF00 text on black 19.55:1 AAA Lc -102.7 Preferred for body text

Shades and tints of Yellow

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 50.

  1. Step 50

    50 (this color)

    #FFFF00

    oklch(96.8% 0.211 109.8)

  2. Step 100

    100

    #EDEFB2

    oklch(93.6% 0.079 109.4)

  3. Step 200

    200

    #E0E160

    oklch(88.4% 0.15 109.5)

  4. Step 300

    300

    #C9C900

    oklch(80.9% 0.176 109.8)

  5. Step 400

    400

    #A8A800

    oklch(70.8% 0.154 109.8)

  6. Step 500

    500

    #909000

    oklch(63.2% 0.138 109.8)

  7. Step 600

    600

    #787800

    oklch(55.4% 0.121 109.8)

  8. Step 700

    700

    #656500

    oklch(49.1% 0.107 109.8)

  9. Step 800

    800

    #535300

    oklch(42.8% 0.093 109.8)

  10. Step 900

    900

    #454500

    oklch(37.8% 0.082 109.8)

  11. Step 950

    950

    #292900

    oklch(27.2% 0.059 109.8)

Export this scale for Tailwind in the Tailwind colors tool

Yellow 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)#FFF4000.027
Deuteranopia (no green cones)#FFFA310.018
Tritanopia (no blue cones)#FFEED90.186
Achromatopsia (no color)#F7F7F70.211

Use Yellow 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.