Named color · #A3713F
Splinter
Splinter is #A3713F: rgb(163 113 63), hsl(30 44% 44%), oklch(0.59 0.092 64.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Orange mean? → · Splinter color name →
#A3713F
oklch(0.59 0.092 64.4)
Color conversions
- HEX
- #a3713f
- RGB
- rgb(163 113 63)
- HSL
- hsl(30 44% 44%)
- HWB
- hwb(30 25% 36%)
- OKLCH
- oklch(0.59 0.092 64.4)
- OKLab
- oklab(0.59 0.04 0.083)
- CIE Lab
- lab(52.16 16.47 35.64)
- LCH
- lch(52.16 39.26 65.2)
- CMYK
- cmyk(0% 31% 61% 36%)
Tints · Shades · Tones
Tints
- AC7F53
- B68D66
- BF9A78
- C8A88B
- D2B79E
- DBC5B1
- E4D3C4
- EDE2D8
- F6F0EB
Shades
- 8D6135
- 78522C
- 634323
- 4F351B
- 3C2712
- 2A1A0A
- 190E04
- 0A0401
- 010100
Tones
- A07347
- 9D754E
- 997655
- 96785C
- 927962
- 8F7B68
- 8B7C6F
- 887E74
- 847F7A
Color harmonies
Complementary +180°
- A3713F
Splinter
- 4A83B0
≈ Seabrook
Analogous -30° +30°
- A3713F
Splinter
- AD6858
≈ Soho Red
- 8F7C37
≈ Koke Moss
Triadic +120° +240°
- A3713F
Splinter
- 2A8F84
≈ Ocean Liner
- 896FA9
≈ Fairy Wren
Split-complementary +150° +210°
- A3713F
Splinter
- 298B9F
≈ Waikiki
- 6D79B4
≈ Regal Azure
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 4.20:1 · APCA Lc 69
Ag
AAOn black
WCAG 4.99:1 · APCA Lc 33
Best text color: #000000
WCAG 4.99:1 (AA) · APCA Lc 33
Contrast pairs
Code snippets
CSS
:root {
--splinter: #a3713f;
--splinter-rgb: 163 113 63;
--splinter-oklch: oklch(0.59 0.092 64.4);
}
.element {
color: var(--splinter);
background-color: hsl(30 44% 44%);
border-color: oklch(0.59 0.092 64.4);
}Tailwind CSS v4
@theme {
--color-splinter: #a3713f;
--color-splinter-50: #fff1da;
--color-splinter-100: #fee3c8;
--color-splinter-200: #f0cdab;
--color-splinter-300: #d8af85;
--color-splinter-400: #c59364;
--color-splinter-500: #b07840;
--color-splinter-600: #956637;
--color-splinter-700: #77522c;
--color-splinter-800: #593b1f;
--color-splinter-900: #3e2814;
--color-splinter-950: #271606;
}SCSS
$splinter: #a3713f;
$splinter-rgb: 163, 113, 63;
$splinter-light: mix(#fff, $splinter, 20%);
$splinter-dark: mix(#000, $splinter, 20%);
.element {
color: $splinter;
box-shadow: 0 0 0 2px rgba($splinter, 0.35);
}