#BA5736#BA5736
#BA5736 is a mid, vivid orange. Relative luminance 0.175; OKLCH L 57.4% C 0.137 H 38.8°. Best body text is #FFFFFF at 4.66:1 contrast (WCAG AA passes).
Color values
| HEX | #BA5736 |
|---|---|
| RGB | rgb(186, 87, 54) |
| HSL | hsl(15, 55%, 47%) |
| HSV | hsv(15, 71%, 73%) |
| CMYK | cmyk(0%, 53.2%, 71%, 27.1%) |
| CIE-LAB | lab(48.91, 37.65, 37.59) |
| CIE-LCH | lch(48.91, 53.20, 44.95°) |
| OKLab | oklab(57.38% 0.1066 0.0855) |
| OKLCH | oklch(57.38% 0.137 38.8) |
| XYZ | xyz(24.3261, 17.5249, 5.5909) |
| Luminance | 0.1752 (WCAG relative) |
| Temperature | warm |
| Family | orange |
Closest named colors
Terra Cotta
#C9643B
ΔE00 5.28
Terracotta (survey)
#CA6641
ΔE00 5.60
Clay
#B66A50
ΔE00 5.98
Terracota
#CB6843
ΔE00 6.17
Sienna
#A0522D
ΔE00 6.30
Adobe
#BD6C48
ΔE00 6.34
Perceptual scales
Shades
Tints
Tones
OKLCH scale
Color harmonies
complementary
#BA5736 #3699BA
analogous
#BA3657 #BA5736 #BA9936
triadic
#BA5736 #36BA57 #5736BA
tetradic
#BA5736 #57BA36 #3699BA #9936BA
square
#BA5736 #57BA36 #3699BA #9936BA
split-complementary
#BA5736 #36BA99 #3657BA
monochromatic
#5B2B1A #8B4128 #BA5736 #D07A5D #DEA18D
Accessibility & contrast
On white
4.66
#BA5736 on #FFFFFF
AA ✓AA large ✓AAA ✗
On black
4.50
#BA5736 on #000000
AA ✓AA large ✓AAA ✗
Best text color
#FFFFFF on #BA5736
4.66:1 — WCAG AA (normal text) passes
Contrast matrix
| fg \ bg | ##BA5736 | #FFFFFF | #000000 | ##FFFFFF |
|---|---|---|---|---|
| ##BA5736 | 1.00 | 4.66 | 4.50 | 4.66 |
| #FFFFFF | 4.66 | 1.00 | 21.00 | 1.00 |
| #000000 | 4.50 | 21.00 | 1.00 | 21.00 |
| ##FFFFFF | 4.66 | 1.00 | 21.00 | 1.00 |
Color blindness preview
Protanopia (red-blind)
#726732
Deuteranopia (green-blind)
#8A7D34
Tritanopia (blue-blind)
#CC4350
Achromatopsia (no color)
#747474
Design tokens & code
CSS
--color: #ba5736; /* rgb */ color: rgb(186, 87, 54); /* oklch */ color: oklch(57.4% 0.137 38.8);
Tailwind
colors: {
custom: {
50: '#d5896e',
500: '#ba5736',
950: '#000000',
},
}SCSS
$custom: #ba5736; $custom-light: #d5896e; $custom-dark: #000000;
JSON
{
"hex": "#ba5736",
"rgb": {
"r": 186,
"g": 87,
"b": 54
},
"hsl": {
"h": 15,
"s": 55,
"l": 47.059
},
"oklch": {
"l": 0.57379,
"c": 0.13663,
"h": 38.8
},
"luminance": 0.17522
}Semantic roles & 50–950 ramp
primary
#BA5736
secondary
#84B7C8
accent
#B9DE49
background
#FEF8F6
surface
#FCF0EC
border
#D5CBC7
text
#160C07
muted
#847D7A