#8F8418#8F8418
#8F8418 is a mid, vivid yellow. Relative luminance 0.224; OKLCH L 60.5% C 0.120 H 103.1°. Best body text is #000000 at 5.48:1 contrast (WCAG AA passes).
Color values
| HEX | #8F8418 |
|---|---|
| RGB | rgb(143, 132, 24) |
| HSL | hsl(54, 71%, 33%) |
| HSV | hsv(54, 83%, 56%) |
| CMYK | cmyk(0%, 7.7%, 83.2%, 43.9%) |
| CIE-LAB | lab(54.46, -7.57, 54.18) |
| CIE-LCH | lch(54.46, 54.70, 97.96°) |
| OKLab | oklab(60.48% -0.0272 0.1169) |
| OKLCH | oklch(60.48% 0.12 103.1) |
| XYZ | xyz(19.7448, 22.4090, 4.1493) |
| Luminance | 0.2241 (WCAG relative) |
| Temperature | warm |
| Family | yellow |
Closest named colors
Olive
#808000
ΔE00 4.02
Baby Poop
#937C00
ΔE00 4.43
Diarrhea
#9F8303
ΔE00 5.44
Hazel
#8E7618
ΔE00 6.24
Puke Brown
#947706
ΔE00 6.80
Dark Mustard
#A88905
ΔE00 6.98
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#8F8418 #18238F
analogous
#8F4918 #8F8418 #5E8F18
triadic
#8F8418 #188F84 #84188F
tetradic
#8F8418 #188F49 #18238F #8F185E
square
#8F8418 #188F49 #18238F #8F185E
split-complementary
#8F8418 #185E8F #49188F
monochromatic
#262306 #5B540F #8F8418 #C3B421 #DFD142
Accessibility & contrast
On white
3.83
#8F8418 on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.48
#8F8418 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #8F8418
5.48:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##8F8418 | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##8F8418 | 1.00 | 3.83 | 5.48 | 5.48 |
| #FFFFFF | 3.83 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.48 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.48 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#917F00
Deuteranopia (green-blind)
#948421
Tritanopia (blue-blind)
#9B7A71
Achromatopsia (no color)
#828282
Design tokens & code
CSS
--color: #8f8418; /* rgb */ color: rgb(143, 132, 24); /* oklch */ color: oklch(60.5% 0.120 103.1);
Tailwind
colors: {
custom: {
50: '#b4a761',
500: '#8f8418',
950: '#000000',
},
}SCSS
$custom: #8f8418; $custom-light: #b4a761; $custom-dark: #000000;
JSON
{
"hex": "#8f8418",
"rgb": {
"r": 143,
"g": 132,
"b": 24
},
"hsl": {
"h": 54.454,
"s": 71.257,
"l": 32.745
},
"oklch": {
"l": 0.60482,
"c": 0.12001,
"h": 103.1
},
"luminance": 0.22408
}Semantic roles & 50–950 ramp
primary
#8F8418
secondary
#434EC0
accent
#4AEE3A
background
#FBFAF6
surface
#F6F4EB
border
#D0CEC6
text
#120F05
muted
#817F7A