Named color · #520C17
Maroon Oak
Maroon Oak is #520C17: rgb(82 12 23), hsl(351 74% 18%), oklch(0.289 0.1 18.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Maroon Oak color name →
#520C17
oklch(0.289 0.1 18.2)
Color conversions
- HEX
- #520c17
- RGB
- rgb(82 12 23)
- HSL
- hsl(351 74% 18%)
- HWB
- hwb(351 5% 68%)
- OKLCH
- oklch(0.289 0.1 18.2)
- OKLab
- oklab(0.289 0.095 0.031)
- CIE Lab
- lab(16.47 32.32 13.96)
- LCH
- lch(16.47 35.2 23.4)
- CMYK
- cmyk(0% 85% 72% 68%)
Tints · Shades · Tones
Tints
- 64262B
- 763D3F
- 885355
- 996A6B
- AA8282
- BB9A9A
- CCB2B2
- DDCBCB
- EEE5E5
Shades
- 460912
- 3B060E
- 2F040A
- 250306
- 1A0204
- 110102
- 080001
- 020000
- 000000
Tones
- 581B21
- 5E272B
- 633235
- 683E3F
- 6D4949
- 715454
- 765F5F
- 796A6A
- 7D7575
Color harmonies
Complementary +180°
- 520C17
Maroon Oak
- 003234
≈ Roof Tile Green
Analogous -30° +30°
- 520C17
Maroon Oak
- 4C0E34
≈ Chilli Black Red
- 491C00
≈ Chocolate Castle
Triadic +120° +240°
- 520C17
Maroon Oak
- 103500
≈ Witch Wart
- 04285C
≈ Blue Leviathan
Split-complementary +150° +210°
- 520C17
Maroon Oak
- 003426
≈ Coach Green
- 003041
≈ Nordic Noir
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 14.75:1 · APCA Lc 101
Ag
FailOn black
WCAG 1.42:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 14.75:1 (AAA) · APCA Lc 101
Contrast pairs
Code snippets
CSS
:root {
--maroon-oak: #520c17;
--maroon-oak-rgb: 82 12 23;
--maroon-oak-oklch: oklch(0.289 0.1 18.2);
}
.element {
color: var(--maroon-oak);
background-color: hsl(351 74% 18%);
border-color: oklch(0.289 0.1 18.2);
}Tailwind CSS v4
@theme {
--color-maroon-oak: #520c17;
--color-maroon-oak-50: #ffeae9;
--color-maroon-oak-100: #ffdbda;
--color-maroon-oak-200: #fdc4c2;
--color-maroon-oak-300: #e6a3a2;
--color-maroon-oak-400: #d38688;
--color-maroon-oak-500: #bf696d;
--color-maroon-oak-600: #a2595c;
--color-maroon-oak-700: #824749;
--color-maroon-oak-800: #603336;
--color-maroon-oak-900: #442325;
--color-maroon-oak-950: #2b1214;
}SCSS
$maroon-oak: #520c17;
$maroon-oak-rgb: 82, 12, 23;
$maroon-oak-light: mix(#fff, $maroon-oak, 20%);
$maroon-oak-dark: mix(#000, $maroon-oak, 20%);
.element {
color: $maroon-oak;
box-shadow: 0 0 0 2px rgba($maroon-oak, 0.35);
}