#BFBBAA#BFBBAA
#BFBBAA is a light, muted yellow. Relative luminance 0.495; OKLCH L 79.1% C 0.024 H 96.0°. Best body text is #000000 at 10.90:1 contrast (WCAG AA passes).
Color values
| HEX | #BFBBAA |
|---|---|
| RGB | rgb(191, 187, 170) |
| HSL | hsl(49, 14%, 71%) |
| HSV | hsv(49, 11%, 75%) |
| CMYK | cmyk(0%, 2.1%, 11%, 25.1%) |
| CIE-LAB | lab(75.77, -1.56, 9.11) |
| CIE-LCH | lch(75.77, 9.24, 99.74°) |
| OKLab | oklab(79.06% -0.0025 0.0238) |
| OKLCH | oklch(79.06% 0.024 96) |
| XYZ | xyz(46.5111, 49.5197, 45.1304) |
| Luminance | 0.4952 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Warm Gray
#C9BEB0
ΔE00 4.38
Greige
#B8AB98
ΔE00 5.87
Greyish
#A8A495
ΔE00 6.47
Bland
#AFA88B
ΔE00 6.88
Cement
#A5A391
ΔE00 7.02
Khaki
#C3B091
ΔE00 7.61
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#BFBBAA #AAAEBF
analogous
#BFB0AA #BFBBAA #B8BFAA
triadic
#BFBBAA #AABFBB #BBAABF
tetradic
#BFBBAA #AABFB0 #AAAEBF #BFAAB8
square
#BFBBAA #AABFB0 #AAAEBF #BFAAB8
split-complementary
#BFBBAA #AAB8BF #B0AABF
monochromatic
#888266 #A59F87 #BFBBAA #D9D7CD #F2F1EE
Accessibility & contrast
On white
1.93
#BFBBAA on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
10.90
#BFBBAA on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #BFBBAA
10.90:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##BFBBAA | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##BFBBAA | 1.00 | 1.93 | 10.90 | 10.90 |
| #FFFFFF | 1.93 | 1.00 | 21.00 | 21.00 |
| #000000 | 10.90 | 21.00 | 1.00 | 1.00 |
| ##000000 | 10.90 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#BFBAA9
Deuteranopia (green-blind)
#C0BBAB
Tritanopia (blue-blind)
#C3B8B6
Achromatopsia (no color)
#BBBBBB
Design tokens & code
CSS
--color: #bfbbaa; /* rgb */ color: rgb(191, 187, 170); /* oklch */ color: oklch(79.1% 0.024 96.0);
Tailwind
colors: {
custom: {
50: '#d2cfc3',
500: '#bfbbaa',
950: '#000000',
},
}SCSS
$custom: #bfbbaa; $custom-light: #d2cfc3; $custom-dark: #000000;
JSON
{
"hex": "#bfbbaa",
"rgb": {
"r": 191,
"g": 187,
"b": 170
},
"hsl": {
"h": 48.571,
"s": 14.094,
"l": 70.784
},
"oklch": {
"l": 0.79061,
"c": 0.02389,
"h": 96
},
"luminance": 0.49519
}Semantic roles & 50–950 ramp
primary
#BFBBAA
secondary
#E0E1E5
accent
#5C984D
background
#FCFCFB
surface
#F9F9F7
border
#D2D2D0
text
#141312
muted
#828281