#ECF166#ECF166
#ECF166 is a very light, vivid yellow. Relative luminance 0.817; OKLCH L 92.8% C 0.160 H 111.1°. Best body text is #000000 at 17.34:1 contrast (WCAG AA passes).
Color values
| HEX | #ECF166 |
|---|---|
| RGB | rgb(236, 241, 102) |
| HSL | hsl(62, 83%, 67%) |
| HSV | hsv(62, 58%, 95%) |
| CMYK | cmyk(2.1%, 0%, 57.7%, 5.5%) |
| CIE-LAB | lab(92.44, -19.26, 64.94) |
| CIE-LCH | lch(92.44, 67.74, 106.52°) |
| OKLab | oklab(92.82% -0.0576 0.1495) |
| OKLCH | oklch(92.82% 0.16 111.1) |
| XYZ | xyz(68.4474, 81.7043, 24.7327) |
| Luminance | 0.8170 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Butter Yellow
#FFFD74
ΔE00 3.16
Straw
#FCF679
ΔE00 3.17
Pastel Yellow
#FFFE71
ΔE00 3.21
Custard
#FFFD78
ΔE00 3.21
Yellowish Tan
#FCFC81
ΔE00 3.26
Light Yellow
#FFFE7A
ΔE00 3.28
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#ECF166 #6B66F1
analogous
#F1B066 #ECF166 #A7F166
triadic
#ECF166 #66ECF1 #F166EC
tetradic
#ECF166 #66F1B0 #6B66F1 #F166A7
square
#ECF166 #66F1B0 #6B66F1 #F166A7
split-complementary
#ECF166 #66A7F1 #B066F1
monochromatic
#C4CA12 #E5EC2E #ECF166 #F3F69E #FAFBD6
Accessibility & contrast
On white
1.21
#ECF166 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
17.34
#ECF166 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #ECF166
17.34:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##ECF166 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##ECF166 | 1.00 | 1.21 | 17.34 | 17.34 |
| #FFFFFF | 1.21 | 1.00 | 21.00 | 21.00 |
| #000000 | 17.34 | 21.00 | 1.00 | 1.00 |
| ##000000 | 17.34 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#FFE757
Deuteranopia (green-blind)
#FFEB6E
Tritanopia (blue-blind)
#FBE4D3
Achromatopsia (no color)
#E9E9E9
Design tokens & code
CSS
--color: #ecf166; /* rgb */ color: rgb(236, 241, 102); /* oklch */ color: oklch(92.8% 0.160 111.1);
Tailwind
colors: {
custom: {
50: '#f5f597',
500: '#ecf166',
950: '#000000',
},
}SCSS
$custom: #ecf166; $custom-light: #f5f597; $custom-dark: #000000;
JSON
{
"hex": "#ecf166",
"rgb": {
"r": 236,
"g": 241,
"b": 102
},
"hsl": {
"h": 62.158,
"s": 83.234,
"l": 67.255
},
"oklch": {
"l": 0.9282,
"c": 0.16026,
"h": 111.1
},
"luminance": 0.81703
}Semantic roles & 50–950 ramp
primary
#ECF166
secondary
#3A34C7
accent
#06E00E
background
#FFFFFC
surface
#FFFEF5
border
#D7D6CF
text
#17170E
muted
#85857F