#FFDE61#FFDE61
#FFDE61 is a very light, vivid yellow. Relative luminance 0.744; OKLCH L 90.5% C 0.147 H 94.5°. Best body text is #000000 at 15.87:1 contrast (WCAG AA passes).
Color values
| HEX | #FFDE61 |
|---|---|
| RGB | rgb(255, 222, 97) |
| HSL | hsl(47, 100%, 69%) |
| HSV | hsv(47, 62%, 100%) |
| CMYK | cmyk(0%, 12.9%, 62%, 0%) |
| CIE-LAB | lab(89.10, -2.50, 63.84) |
| CIE-LCH | lch(89.10, 63.89, 92.24°) |
| OKLab | oklab(90.52% -0.0114 0.1461) |
| OKLCH | oklch(90.52% 0.147 94.5) |
| XYZ | xyz(69.5221, 74.3691, 21.9997) |
| Luminance | 0.7437 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Light Gold
#FDDC5C
ΔE00 0.57
Pale Gold
#FDDE6C
ΔE00 1.34
Sand Yellow
#FCE166
ΔE00 1.64
Yellow Tan
#FFE36E
ΔE00 1.81
Light Mustard
#F7D560
ΔE00 2.20
Maize
#F4D054
ΔE00 3.19
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#FFDE61 #6182FF
analogous
#FF8F61 #FFDE61 #D1FF61
triadic
#FFDE61 #61FFDE #DE61FF
tetradic
#FFDE61 #61FF8F #6182FF #FF61D1
square
#FFDE61 #61FF8F #6182FF #FF61D1
split-complementary
#FFDE61 #61D1FF #8F61FF
monochromatic
#E6B600 #FFD124 #FFDE61 #FFEB9E #FFF8DB
Accessibility & contrast
On white
1.32
#FFDE61 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
15.87
#FFDE61 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #FFDE61
15.87:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##FFDE61 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FFDE61 | 1.00 | 1.32 | 15.87 | 15.87 |
| #FFFFFF | 1.32 | 1.00 | 21.00 | 21.00 |
| #000000 | 15.87 | 21.00 | 1.00 | 1.00 |
| ##000000 | 15.87 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#F3DA53
Deuteranopia (green-blind)
#FBE467
Tritanopia (blue-blind)
#FFCEC3
Achromatopsia (no color)
#E0E0E0
Design tokens & code
CSS
--color: #ffde61; /* rgb */ color: rgb(255, 222, 97); /* oklch */ color: oklch(90.5% 0.147 94.5);
Tailwind
colors: {
custom: {
50: '#ffe893',
500: '#ffde61',
950: '#000000',
},
}SCSS
$custom: #ffde61; $custom-light: #ffe893; $custom-dark: #000000;
JSON
{
"hex": "#ffde61",
"rgb": {
"r": 255,
"g": 222,
"b": 97
},
"hsl": {
"h": 47.468,
"s": 100,
"l": 69.02
},
"oklch": {
"l": 0.90522,
"c": 0.14658,
"h": 94.5
},
"luminance": 0.74366
}Semantic roles & 50–950 ramp
primary
#FFDE61
secondary
#2B4FDA
accent
#30E600
background
#FFFEFC
surface
#FFFCF4
border
#D7D5CE
text
#19160D
muted
#87847F