#B4701F#B4701F
#B4701F is a mid, vivid orange. Relative luminance 0.214; OKLCH L 60.6% C 0.124 H 64.9°. Best body text is #000000 at 5.28:1 contrast (WCAG AA passes).
Color values
| HEX | #B4701F |
|---|---|
| RGB | rgb(180, 112, 31) |
| HSL | hsl(33, 71%, 41%) |
| HSV | hsv(33, 83%, 71%) |
| CMYK | cmyk(0%, 37.8%, 82.8%, 29.4%) |
| CIE-LAB | lab(53.38, 20.75, 52.49) |
| CIE-LCH | lch(53.38, 56.45, 68.44°) |
| OKLab | oklab(60.57% 0.0527 0.1126) |
| OKLCH | oklch(60.57% 0.124 64.9) |
| XYZ | xyz(24.8660, 21.3931, 4.1158) |
| Luminance | 0.2139 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Caramel (survey)
#AF6F09
ΔE00 2.89
Brown Orange
#B96902
ΔE00 2.95
Leather
#AC7434
ΔE00 3.27
Copper
#B87333
ΔE00 3.34
Umber (survey)
#B26400
ΔE00 4.06
Dirty Orange
#C87606
ΔE00 4.84
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#B4701F #1F63B4
analogous
#B4251F #B4701F #AEB41F
triadic
#B4701F #1FB470 #701FB4
tetradic
#B4701F #1FB425 #1F63B4 #B41FAE
square
#B4701F #1FB425 #1F63B4 #B41FAE
split-complementary
#B4701F #1FAEB4 #251FB4
monochromatic
#4C2F0D #805016 #B4701F #DC8F34 #E5AC68
Accessibility & contrast
On white
3.98
#B4701F on #FFFFFF
AA ✗AA large ✓AAA ✗
On black
5.28
#B4701F on #000000
AA ✓AA large ✓AAA ✗
Best text color
#000000 on #B4701F
5.28:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##B4701F | #FFFFFF | #000000 | ##000000 |
|---|---|---|---|---|
| ##B4701F | 1.00 | 3.98 | 5.28 | 5.28 |
| #FFFFFF | 3.98 | 1.00 | 21.00 | 21.00 |
| #000000 | 5.28 | 21.00 | 1.00 | 1.00 |
| ##000000 | 5.28 | 21.00 | 1.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#86760F
Deuteranopia (green-blind)
#968621
Tritanopia (blue-blind)
#C56061
Achromatopsia (no color)
#7F7F7F
Design tokens & code
CSS
--color: #b4701f; /* rgb */ color: rgb(180, 112, 31); /* oklch */ color: oklch(60.6% 0.124 64.9);
Tailwind
colors: {
custom: {
50: '#d09962',
500: '#b4701f',
950: '#000000',
},
}SCSS
$custom: #b4701f; $custom-light: #d09962; $custom-dark: #000000;
JSON
{
"hex": "#b4701f",
"rgb": {
"r": 180,
"g": 112,
"b": 31
},
"hsl": {
"h": 32.617,
"s": 70.616,
"l": 41.373
},
"oklch": {
"l": 0.60571,
"c": 0.12429,
"h": 64.9
},
"luminance": 0.21391
}Semantic roles & 50–950 ramp
primary
#B4701F
secondary
#6493CB
accent
#8CED3A
background
#FDF9F6
surface
#FBF2EB
border
#D4CCC6
text
#150E05
muted
#837E7A