#FDD397#FDD397
#FDD397 is a very light, moderate orange. Relative luminance 0.697; OKLCH L 88.9% C 0.090 H 76.0°. Best body text is #000000 at 14.94:1 contrast (WCAG AA passes).
Color values
| HEX | #FDD397 |
|---|---|
| RGB | rgb(253, 211, 151) |
| HSL | hsl(35, 96%, 79%) |
| HSV | hsv(35, 40%, 99%) |
| CMYK | cmyk(0%, 16.6%, 40.3%, 0.8%) |
| CIE-LAB | lab(86.85, 6.88, 35.21) |
| CIE-LCH | lch(86.85, 35.88, 78.94°) |
| OKLab | oklab(88.93% 0.0216 0.0871) |
| OKLCH | oklch(88.93% 0.09 76) |
| XYZ | xyz(69.3902, 69.7088, 39.0723) |
| Luminance | 0.6971 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Navajowhite
#FFDEAD
ΔE00 3.72
Light Peach
#FFD8B1
ΔE00 5.47
Moccasin
#FFE4B5
ΔE00 5.60
Pale Peach
#FFE5AD
ΔE00 5.72
Wheat
#F5DEB3
ΔE00 6.20
Burlywood
#DEB887
ΔE00 7.04
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#FDD397 #97C1FD
analogous
#FDA097 #FDD397 #F4FD97
triadic
#FDD397 #97FDD3 #D397FD
tetradic
#FDD397 #97FDA0 #97C1FD #FD97F4
square
#FDD397 #97FDA0 #97C1FD #FD97F4
split-complementary
#FDD397 #97F4FD #A097FD
monochromatic
#FBA01F #FCBA5B #FDD397 #FEECD3 #FEF2E1
Accessibility & contrast
On white
1.41
#FDD397 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
14.94
#FDD397 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #FDD397
14.94:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##FDD397 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##FDD397 | 1.00 | 1.41 | 14.94 | 14.94 |
| #FFFFFF | 1.41 | 1.00 | 21.00 | 21.00 |
| #000000 | 14.94 | 21.00 | 1.00 | 1.00 |
| ##000000 | 14.94 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#E3D493
Deuteranopia (green-blind)
#EDDE98
Tritanopia (blue-blind)
#FFC8C4
Achromatopsia (no color)
#D9D9D9
Design tokens & code
CSS
--color: #fdd397; /* rgb */ color: rgb(253, 211, 151); /* oklch */ color: oklch(88.9% 0.090 76.0);
Tailwind
colors: {
custom: {
50: '#ffe0b6',
500: '#fdd397',
950: '#000000',
},
}SCSS
$custom: #fdd397; $custom-light: #ffe0b6; $custom-dark: #000000;
JSON
{
"hex": "#fdd397",
"rgb": {
"r": 253,
"g": 211,
"b": 151
},
"hsl": {
"h": 35.294,
"s": 96.226,
"l": 79.216
},
"oklch": {
"l": 0.88927,
"c": 0.08975,
"h": 76
},
"luminance": 0.69706
}Semantic roles & 50–950 ramp
primary
#FDD397
secondary
#5990DF
accent
#5FE600
background
#FFFEFD
surface
#FFFCF8
border
#D7D5D1
text
#181511
muted
#868481