#B2A138#B2A138
#B2A138 is a light, vivid yellow. Relative luminance 0.352; OKLCH L 70.4% C 0.124 H 100.0°. Best body text is #000000 at 8.05:1 contrast (WCAG AA passes).
Color values
| HEX | #B2A138 |
|---|---|
| RGB | rgb(178, 161, 56) |
| HSL | hsl(52, 52%, 46%) |
| HSV | hsv(52, 69%, 70%) |
| CMYK | cmyk(0%, 9.6%, 68.5%, 30.2%) |
| CIE-LAB | lab(65.94, -5.99, 54.58) |
| CIE-LCH | lch(65.94, 54.91, 96.26°) |
| OKLab | oklab(70.43% -0.0215 0.1225) |
| OKLCH | oklch(70.43% 0.124 100) |
| XYZ | xyz(31.8202, 35.2417, 8.8668) |
| Luminance | 0.3524 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Brown Yellow
#B29705
ΔE00 4.81
Muddy Yellow
#BFAC05
ΔE00 5.45
Puke
#A5A502
ΔE00 5.79
Vomit
#A2A415
ΔE00 5.83
Dark Gold
#B59410
ΔE00 6.01
Ocher
#BF9B0C
ΔE00 6.11
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#B2A138 #3849B2
analogous
#B26438 #B2A138 #86B238
triadic
#B2A138 #38B2A1 #A138B2
tetradic
#B2A138 #38B264 #3849B2 #B23886
square
#B2A138 #38B264 #3849B2 #B23886
split-complementary
#B2A138 #3886B2 #6438B2
monochromatic
#554D1B #837729 #B2A138 #CCBC5C #DACF8A
Accessibility & contrast
On white
2.61
#B2A138 on #FFFFFF
AA ✗AA large ✗AAA ✗
On black
8.05
#B2A138 on #000000
AA ✓AA large ✓AAA ✓
Best text color
#000000 on #B2A138
8.05:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##B2A138 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##B2A138 | 1.00 | 2.61 | 8.05 | 8.05 |
| #FFFFFF | 2.61 | 1.00 | 21.00 | 21.00 |
| #000000 | 8.05 | 21.00 | 1.00 | 1.00 |
| ##000000 | 8.05 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#B09D2A
Deuteranopia (green-blind)
#B5A33E
Tritanopia (blue-blind)
#C0958C
Achromatopsia (no color)
#A0A0A0
Design tokens & code
CSS
--color: #b2a138; /* rgb */ color: rgb(178, 161, 56); /* oklch */ color: oklch(70.4% 0.124 100.0);
Tailwind
colors: {
custom: {
50: '#ccbc75',
500: '#b2a138',
950: '#000000',
},
}SCSS
$custom: #b2a138; $custom-light: #ccbc75; $custom-dark: #000000;
JSON
{
"hex": "#b2a138",
"rgb": {
"r": 178,
"g": 161,
"b": 56
},
"hsl": {
"h": 51.639,
"s": 52.137,
"l": 45.882
},
"oklch": {
"l": 0.70431,
"c": 0.12435,
"h": 100
},
"luminance": 0.3524
}Semantic roles & 50–950 ramp
primary
#B2A138
secondary
#818BC5
accent
#60DC4C
background
#FDFBF7
surface
#FAF6ED
border
#D3D0C8
text
#141209
muted
#83817B