Named color · #7C583A
Château Mantle
Château Mantle is #7C583A: rgb(124 88 58), hsl(27 36% 36%), oklch(0.491 0.065 60.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Brown mean? → · Château Mantle color name →
#7C583A
oklch(0.491 0.065 60.3)
Color conversions
- HEX
- #7c583a
- RGB
- rgb(124 88 58)
- HSL
- hsl(27 36% 36%)
- HWB
- hwb(27 23% 51%)
- OKLCH
- oklch(0.491 0.065 60.3)
- OKLab
- oklab(0.491 0.032 0.056)
- CIE Lab
- lab(40.79 12.58 23.51)
- LCH
- lch(40.79 26.66 61.9)
- CMYK
- cmyk(0% 29% 53% 51%)
Tints · Shades · Tones
Tints
- 89684C
- 96775F
- A28772
- AF9885
- BDA899
- CAB9AC
- D7CAC1
- E4DCD5
- F2EDEA
Shades
- 6B4B31
- 5A3F28
- 4A3320
- 3B2818
- 2C1D10
- 1E1209
- 110904
- 050301
- 010000
Tones
- 7D5C41
- 7D6049
- 7E6450
- 7E6857
- 7F6C5E
- 7F7064
- 80746B
- 807872
- 807C79
Color harmonies
Complementary +180°
- 7C583A
Château Mantle
- 3D6682
≈ Good Samaritan
Analogous -30° +30°
- 7C583A
Château Mantle
- 82534B
≈ Root Beer
- 6F5F34
≈ Rationality
Triadic +120° +240°
- 7C583A
Château Mantle
- 316D62
≈ Antique Green
- 675880
≈ Charoite Violet
Split-complementary +150° +210°
- 7C583A
Château Mantle
- 2D6B75
≈ Ocean’s Embrace
- 535F86
≈ Karmic Grape
Tetradic +90° +180° +270°
- 7C583A
Château Mantle
- 456B4D
≈ Sabal Palm
- 3D6682
≈ Good Samaritan
- 765372
≈ Opulent Ostrich
Contrast & accessibility
Ag
AAOn white
WCAG 6.33:1 · APCA Lc 81
Ag
FailOn black
WCAG 3.31:1 · APCA Lc 20
Best text color: #FFFFFF
WCAG 6.33:1 (AA) · APCA Lc 81
Contrast pairs
Code snippets
CSS
:root {
--chateau-mantle: #7c583a;
--chateau-mantle-rgb: 124 88 58;
--chateau-mantle-oklch: oklch(0.491 0.065 60.3);
}
.element {
color: var(--chateau-mantle);
background-color: hsl(27 36% 36%);
border-color: oklch(0.491 0.065 60.3);
}Tailwind CSS v4
@theme {
--color-chateau-mantle: #7c583a;
--color-chateau-mantle-50: #fff2e3;
--color-chateau-mantle-100: #f8e4d2;
--color-chateau-mantle-200: #e9cfb9;
--color-chateau-mantle-300: #d0b196;
--color-chateau-mantle-400: #bb9678;
--color-chateau-mantle-500: #a67c5a;
--color-chateau-mantle-600: #8c694c;
--color-chateau-mantle-700: #71543d;
--color-chateau-mantle-800: #543d2c;
--color-chateau-mantle-900: #3a2a1d;
--color-chateau-mantle-950: #24170d;
}SCSS
$chateau-mantle: #7c583a;
$chateau-mantle-rgb: 124, 88, 58;
$chateau-mantle-light: mix(#fff, $chateau-mantle, 20%);
$chateau-mantle-dark: mix(#000, $chateau-mantle, 20%);
.element {
color: $chateau-mantle;
box-shadow: 0 0 0 2px rgba($chateau-mantle, 0.35);
}