Sun Yellow #FFDF22
Sun Yellow is a very light, vivid yellow with hex code #FFDF22 and RGB rgb(255, 223, 34).
Aa
Black text reads best on this color (15.83:1).
About this color
#FFDF22 is a very light, vivid yellow. In OKLCH its lightness is 90%, its chroma 0.181 and its hue 98°. Its hue sits on the warm side of the wheel. It is the named color Sun Yellow. Black text reads best on it, at 15.83:1.
| Hue family | Yellows |
| Lightness | very light (90%) |
| Chroma | vivid (0.181) |
| Temperature | warm |
| Nearest name | Sun Yellow |
| Black text | 15.83:1 |
| White text | 1.32:1 |
Colors that go with Sun Yellow
Matches found by rotating Sun Yellow around the OKLCH hue wheel, each labelled with the closest name in our list.
Complementary
The opposite hue (180°).
Analogous
Neighbouring hues, 30° either side.
Triadic
Three hues spaced 120° apart.
Color palettes with Sun Yellow
Curated color palettes that contain a color within ΔE 0.06 (OKLab) of Sun Yellow, closest first.
Similar named colors
The eight named colors closest to Sun Yellow, with their ΔE distance.
- Dandelion #FEDF08 ΔE 0.006
- Sunflower Yellow #FFDA03 ΔE 0.012
- Gold #FFD700 ΔE 0.019
- Sand Yellow #FCE166 ΔE 0.037
- Dull Yellow #EEDC5B ΔE 0.038
- Yellow Tan #FFE36E ΔE 0.044
- Pale Gold #FDDE6C ΔE 0.045
- Off Yellow #F1F33F ΔE 0.049
More about Sun Yellow
How to make Sun 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.
- 2 parts yellow
- 1 part white
Recipe result: #FFD932, a difference of ΔE 0.018 from Sun Yellow. That is very close: most people will not see the difference.
Codes for Sun Yellow in every format
| HEX | #FFDF22 |
| RGB | rgb(255, 223, 34) |
| HSL | hsl(51, 100%, 57%) |
| OKLCH | oklch(90.3% 0.181 98.2) |
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.
| Pair | WCAG 2 | Result | APCA | APCA guidance |
|---|---|---|---|---|
| White text on #FFDF22 | 1.32:1 | Fails | Lc -18.3 | Dividers and decoration only |
| Black text on #FFDF22 | 15.83:1 | AAA | Lc 87.7 | Fine for body text |
| #FFDF22 text on white | 1.32:1 | Fails | Lc 15.9 | Dividers and decoration only |
| #FFDF22 text on black | 15.83:1 | AAA | Lc -87.8 | Fine for body text |
Shades and tints of Sun 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 200.
-
Step 50
50
#FBF6DF
oklch(97.1% 0.031 96.9)
-
Step 100
100
#F5EBB8
oklch(93.6% 0.067 98.2)
-
Step 200
200 (this color)
#FFDF22
oklch(90.3% 0.181 98.2)
-
Step 300
300
#DDC000
oklch(80.8% 0.167 98.2)
-
Step 400
400
#B9A000
oklch(70.6% 0.146 97.9)
-
Step 500
500
#9E8900
oklch(63% 0.13 98.3)
-
Step 600
600
#857300
oklch(55.6% 0.115 98.3)
-
Step 700
700
#706100
oklch(49.2% 0.102 98.7)
-
Step 800
800
#5C4F00
oklch(42.8% 0.088 98.3)
-
Step 900
900
#4D4100
oklch(37.6% 0.078 97.3)
-
Step 950
950
#2E2600
oklch(27% 0.056 97.1)
Sun 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.
| Vision | Seen as | Shift (ΔE) |
|---|---|---|
| Protanopia (no red cones) | #F6D900 | 0.021 |
| Deuteranopia (no green cones) | #FFE435 | 0.012 |
| Tritanopia (no blue cones) | #FFCDBF | 0.163 |
| Achromatopsia (no color) | #DFDFDF | 0.181 |
Use Sun 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.