#F2CCBA#F2CCBA
#F2CCBA is a very light, muted orange. Relative luminance 0.656; OKLCH L 87.3% C 0.050 H 46.8°. Best body text is #000000 at 14.12:1 contrast (WCAG AA passes).
Color values
| HEX | #F2CCBA |
|---|---|
| RGB | rgb(242, 204, 186) |
| HSL | hsl(19, 68%, 84%) |
| HSV | hsv(19, 23%, 95%) |
| CMYK | cmyk(0%, 15.7%, 23.1%, 5.1%) |
| CIE-LAB | lab(84.80, 10.68, 13.95) |
| CIE-LCH | lch(84.80, 17.57, 52.57°) |
| OKLab | oklab(87.3% 0.034 0.0362) |
| OKLCH | oklch(87.3% 0.05 46.8) |
| XYZ | xyz(67.0742, 65.6105, 55.5758) |
| Luminance | 0.6561 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Apricot
#FBCEB1
ΔE00 3.92
Peach
#FFDAB9
ΔE00 6.66
Light Peach
#FFD8B1
ΔE00 8.04
Mistyrose
#FFE4E1
ΔE00 8.24
Bisque
#FFE4C4
ΔE00 9.42
Pale Salmon
#FFB19A
ΔE00 9.89
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#F2CCBA #BAE0F2
analogous
#F2BAC4 #F2CCBA #F2E8BA
triadic
#F2CCBA #BAF2CC #CCBAF2
tetradic
#F2CCBA #C4F2BA #BAE0F2 #E8BAF2
square
#F2CCBA #C4F2BA #BAE0F2 #E8BAF2
split-complementary
#F2CCBA #BAF2E8 #BAC4F2
monochromatic
#DF8053 #E8A687 #F2CCBA #FAECE5 #FAECE5
Accessibility & contrast
On white
1.49
#F2CCBA on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
14.12
#F2CCBA on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #F2CCBA
14.12:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##F2CCBA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##F2CCBA | 1.00 | 1.49 | 14.12 | 14.12 |
| #FFFFFF | 1.49 | 1.00 | 21.00 | 21.00 |
| #000000 | 14.12 | 21.00 | 1.00 | 1.00 |
| ##000000 | 14.12 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#D6CFB9
Deuteranopia (green-blind)
#DED7BA
Tritanopia (blue-blind)
#FDC6C7
Achromatopsia (no color)
#D4D4D4
Design tokens & code
CSS
--color: #f2ccba; /* rgb */ color: rgb(242, 204, 186); /* oklch */ color: oklch(87.3% 0.050 46.8);
Tailwind
colors: {
custom: {
50: '#f7dbce',
500: '#f2ccba',
950: '#000000',
},
}SCSS
$custom: #f2ccba; $custom-light: #f7dbce; $custom-dark: #000000;
JSON
{
"hex": "#f2ccba",
"rgb": {
"r": 242,
"g": 204,
"b": 186
},
"hsl": {
"h": 19.286,
"s": 68.293,
"l": 83.922
},
"oklch": {
"l": 0.87298,
"c": 0.04964,
"h": 46.8
},
"luminance": 0.65608
}Semantic roles & 50–950 ramp
primary
#F2CCBA
secondary
#7FB7D2
accent
#94D015
background
#FFFEFE
surface
#FFFBFB
border
#D7D4D4
text
#171513
muted
#858483