#BCAF3C#BCAF3C
#BCAF3C is a light, vivid yellow. Relative luminance 0.417; OKLCH L 74.4% C 0.133 H 102.8°. Best body text is #000000 at 9.34:1 contrast (WCAG AA passes).
Color values
| HEX | #BCAF3C |
|---|---|
| RGB | rgb(188, 175, 60) |
| HSL | hsl(54, 52%, 49%) |
| HSV | hsv(54, 68%, 74%) |
| CMYK | cmyk(0%, 6.9%, 68.1%, 26.3%) |
| CIE-LAB | lab(70.65, -8.78, 58.04) |
| CIE-LCH | lch(70.65, 58.70, 98.60°) |
| OKLab | oklab(74.4% -0.0296 0.1301) |
| OKLCH | oklch(74.4% 0.133 102.8) |
| XYZ | xyz(36.8861, 41.6791, 10.3760) |
| Luminance | 0.4168 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Muddy Yellow
#BFAC05
ΔE00 3.87
Olive Yellow
#C2B709
ΔE00 4.43
Brownish Yellow
#C9B003
ΔE00 5.03
Puke
#A5A502
ΔE00 5.59
Mustard (survey)
#CEB301
ΔE00 5.74
Puke Yellow
#C2BE0E
ΔE00 5.81
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#BCAF3C #3C49BC
analogous
#BC6F3C #BCAF3C #89BC3C
triadic
#BCAF3C #3CBCAF #AF3CBC
tetradic
#BCAF3C #3CBC6F #3C49BC #BC3C89
square
#BCAF3C #3CBC6F #3C49BC #BC3C89
split-complementary
#BCAF3C #3C89BC #6F3CBC
monochromatic
#5F591E #8E842D #BCAF3C #CEC467 #DDD695
Accessibility & contrast
On white
2.25
#BCAF3C on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
9.34
#BCAF3C on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #BCAF3C
9.34:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##BCAF3C | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##BCAF3C | 1.00 | 2.25 | 9.34 | 9.34 |
| #FFFFFF | 2.25 | 1.00 | 21.00 | 21.00 |
| #000000 | 9.34 | 21.00 | 1.00 | 1.00 |
| ##000000 | 9.34 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#BFA92C
Deuteranopia (green-blind)
#C3AF43
Tritanopia (blue-blind)
#CAA398
Achromatopsia (no color)
#ADADAD
Design tokens & code
CSS
--color: #bcaf3c; /* rgb */ color: rgb(188, 175, 60); /* oklch */ color: oklch(74.4% 0.133 102.8);
Tailwind
colors: {
custom: {
50: '#d3c678',
500: '#bcaf3c',
950: '#000000',
},
}SCSS
$custom: #bcaf3c; $custom-light: #d3c678; $custom-dark: #000000;
JSON
{
"hex": "#bcaf3c",
"rgb": {
"r": 188,
"g": 175,
"b": 60
},
"hsl": {
"h": 53.906,
"s": 51.613,
"l": 48.627
},
"oklch": {
"l": 0.74397,
"c": 0.13346,
"h": 102.8
},
"luminance": 0.41678
}Semantic roles & 50–950 ramp
primary
#BCAF3C
secondary
#8B91C9
accent
#5BDB4D
background
#FDFCF7
surface
#FAF8EE
border
#D3D1C9
text
#151309
muted
#83827B