#FEF2C2#FEF2C2
#FEF2C2 is a very light, moderate yellow. Relative luminance 0.885; OKLCH L 95.9% C 0.063 H 95.7°. Best body text is #000000 at 18.69:1 contrast (WCAG AA passes).
Color values
| HEX | #FEF2C2 |
|---|---|
| RGB | rgb(254, 242, 194) |
| HSL | hsl(48, 97%, 88%) |
| HSV | hsv(48, 24%, 100%) |
| CMYK | cmyk(0%, 4.7%, 23.6%, 0.4%) |
| CIE-LAB | lab(95.36, -3.31, 24.67) |
| CIE-LCH | lch(95.36, 24.89, 97.64°) |
| OKLab | oklab(95.89% -0.0062 0.0628) |
| OKLCH | oklch(95.89% 0.063 95.7) |
| XYZ | xyz(82.3629, 88.4718, 63.7665) |
| Luminance | 0.8847 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Lemonchiffon
#FFFACD
ΔE00 2.83
Pale
#FFF9D0
ΔE00 2.89
Vanilla
#F3E5AB
ΔE00 3.69
Egg Shell
#FFFCC4
ΔE00 3.88
Cream
#FFFDD0
ΔE00 3.93
Light Tan
#FBEEAC
ΔE00 4.08
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#FEF2C2 #C2CEFE
analogous
#FED4C2 #FEF2C2 #ECFEC2
triadic
#FEF2C2 #C2FEF2 #F2C2FE
tetradic
#FEF2C2 #C2FED4 #C2CEFE #FEC2EC
square
#FEF2C2 #C2FED4 #C2CEFE #FEC2EC
split-complementary
#FEF2C2 #C2ECFE #D4C2FE
monochromatic
#FCD84A #FDE586 #FEF2C2 #FFF9E1 #FFF9E1
Accessibility & contrast
On white
1.12
#FEF2C2 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
18.69
#FEF2C2 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #FEF2C2
18.69:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##FEF2C2 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FEF2C2 | 1.00 | 1.12 | 18.69 | 18.69 |
| #FFFFFF | 1.12 | 1.00 | 21.00 | 21.00 |
| #000000 | 18.69 | 21.00 | 1.00 | 1.00 |
| ##000000 | 18.69 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#FCEFBF
Deuteranopia (green-blind)
#FFF3C4
Tritanopia (blue-blind)
#FFEBE5
Achromatopsia (no color)
#F2F2F2
Design tokens & code
CSS
--color: #fef2c2; /* rgb */ color: rgb(254, 242, 194); /* oklch */ color: oklch(95.9% 0.063 95.7);
Tailwind
colors: {
custom: {
50: '#fff6d4',
500: '#fef2c2',
950: '#000000',
},
}SCSS
$custom: #fef2c2; $custom-light: #fff6d4; $custom-dark: #000000;
JSON
{
"hex": "#fef2c2",
"rgb": {
"r": 254,
"g": 242,
"b": 194
},
"hsl": {
"h": 48,
"s": 96.774,
"l": 87.843
},
"oklch": {
"l": 0.95886,
"c": 0.06312,
"h": 95.7
},
"luminance": 0.8847
}Semantic roles & 50–950 ramp
primary
#FEF2C2
secondary
#7E93E6
accent
#2EE600
background
#FFFFFE
surface
#FFFEFB
border
#D7D6D4
text
#181714
muted
#868583