Nearest named color · #7C0D00
#7C0D00
Nearest named color: Maroon
#7C0D00 (rgb(124 13 0), hsl(6 100% 24%), oklch(0.375 0.145 31.3)) is closest to the named color Maroon. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#7C0D00
oklch(0.375 0.145 31.3)
Color conversions
- HEX
- #7c0d00
- RGB
- rgb(124 13 0)
- HSL
- hsl(6 100% 24%)
- HWB
- hwb(6 0% 51%)
- OKLCH
- oklch(0.375 0.145 31.3)
- OKLab
- oklab(0.375 0.124 0.075)
- CIE Lab
- lab(26.08 44.96 38.93)
- LCH
- lch(26.08 59.47 40.9)
- CMYK
- cmyk(0% 90% 100% 51%)
Tints · Shades · Tones
Tints
- 8B2D1F
- 9A4638
- A85D4F
- B67467
- C38A7F
- D0A198
- DCB8B1
- E8CFCA
- F4E7E4
Shades
- 6B0A00
- 5A0700
- 4A0500
- 3B0300
- 2C0200
- 1E0100
- 110000
- 050000
- 010000
Tones
- 7E2113
- 802F22
- 823A2E
- 83453A
- 845046
- 845A52
- 84635D
- 836D69
- 827774
Color harmonies
Complementary +180°
- 7C0D00
Maroon
- 004A55
≈ Midnight Green
Analogous -30° +30°
- 7C0D00
Maroon
- 78083C
≈ Merlot
- 613400
≈ Beasty Brown
Triadic +120° +240°
Split-complementary +150° +210°
- 7C0D00
Maroon
- 004C43
≈ Aqua Deep
- 00456B
≈ Lush Aqua
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 10.96:1 · APCA Lc 94
Ag
FailOn black
WCAG 1.91:1 · APCA Lc 9
Best text color: #FFFFFF
WCAG 10.96:1 (AAA) · APCA Lc 94
Contrast pairs
Code snippets
CSS
:root {
--maroon: #7c0d00;
--maroon-rgb: 124 13 0;
--maroon-oklch: oklch(0.375 0.145 31.3);
}
.element {
color: var(--maroon);
background-color: hsl(6 100% 24%);
border-color: oklch(0.375 0.145 31.3);
}Tailwind CSS v4
@theme {
--color-maroon: #7c0d00;
--color-maroon-50: #ffe7db;
--color-maroon-100: #ffd7c9;
--color-maroon-200: #ffbeac;
--color-maroon-300: #f89b87;
--color-maroon-400: #e77b68;
--color-maroon-500: #d55a46;
--color-maroon-600: #b44d3c;
--color-maroon-700: #903d30;
--color-maroon-800: #6c2b23;
--color-maroon-900: #4c1d17;
--color-maroon-950: #320c08;
}SCSS
$maroon: #7c0d00;
$maroon-rgb: 124, 13, 0;
$maroon-light: mix(#fff, $maroon, 20%);
$maroon-dark: mix(#000, $maroon, 20%);
.element {
color: $maroon;
box-shadow: 0 0 0 2px rgba($maroon, 0.35);
}