Named color · #5C503A
Arrow Shaft
Arrow Shaft is #5C503A: rgb(92 80 58), hsl(39 23% 29%), oklch(0.437 0.037 82.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Arrow Shaft color name →
#5C503A
oklch(0.437 0.037 82.4)
Color conversions
- HEX
- #5c503a
- RGB
- rgb(92 80 58)
- HSL
- hsl(39 23% 29%)
- HWB
- hwb(39 23% 64%)
- OKLCH
- oklch(0.437 0.037 82.4)
- OKLab
- oklab(0.437 0.005 0.037)
- CIE Lab
- lab(34.78 2.43 14.93)
- LCH
- lch(34.78 15.13 80.7)
- CMYK
- cmyk(0% 13% 37% 64%)
Tints · Shades · Tones
Tints
- 6B604C
- 7A705E
- 8A8171
- 9A9284
- AAA397
- BAB5AB
- CBC7C0
- DCD9D4
- EDECEA
Shades
- 4F4431
- 423928
- 362E20
- 2A2418
- 1F1A10
- 141009
- 0A0704
- 030201
- 000000
Tones
- 605541
- 635948
- 675E4F
- 6A6356
- 6E685D
- 716C64
- 75716B
- 797672
- 7C7B79
Color harmonies
Complementary +180°
- 5C503A
Arrow Shaft
- 475267
≈ Vintage Velvet
Analogous -30° +30°
- 5C503A
Arrow Shaft
- 634C3F
≈ Chocolate Coco
- 52543C
≈ Amazon Depths
Triadic +120° +240°
- 5C503A
Arrow Shaft
- 38585B
≈ Depth Charge
- 5C4B5E
≈ Plush Purple
Split-complementary +150° +210°
- 5C503A
Arrow Shaft
- 3D5663
≈ Alien
- 524E65
≈ Magic Spell
Tetradic +90° +180° +270°
- 5C503A
Arrow Shaft
- 3C594F
≈ Plantation
- 475267
≈ Vintage Velvet
- 634954
≈ Gǔ Tóng Hēi Copper
Contrast & accessibility
Ag
AAAOn white
WCAG 7.88:1 · APCA Lc 87
Ag
FailOn black
WCAG 2.66:1 · APCA Lc 15
Best text color: #FFFFFF
WCAG 7.88:1 (AAA) · APCA Lc 87
Contrast pairs
Code snippets
CSS
:root {
--arrow-shaft: #5c503a;
--arrow-shaft-rgb: 92 80 58;
--arrow-shaft-oklch: oklch(0.437 0.037 82.4);
}
.element {
color: var(--arrow-shaft);
background-color: hsl(39 23% 29%);
border-color: oklch(0.437 0.037 82.4);
}Tailwind CSS v4
@theme {
--color-arrow-shaft: #5c503a;
--color-arrow-shaft-50: #faf5e9;
--color-arrow-shaft-100: #eee7da;
--color-arrow-shaft-200: #dcd3c3;
--color-arrow-shaft-300: #c0b6a2;
--color-arrow-shaft-400: #a99d86;
--color-arrow-shaft-500: #93846a;
--color-arrow-shaft-600: #7c705a;
--color-arrow-shaft-700: #635a48;
--color-arrow-shaft-800: #494134;
--color-arrow-shaft-900: #332d23;
--color-arrow-shaft-950: #1e1a12;
}SCSS
$arrow-shaft: #5c503a;
$arrow-shaft-rgb: 92, 80, 58;
$arrow-shaft-light: mix(#fff, $arrow-shaft, 20%);
$arrow-shaft-dark: mix(#000, $arrow-shaft, 20%);
.element {
color: $arrow-shaft;
box-shadow: 0 0 0 2px rgba($arrow-shaft, 0.35);
}