Nearest named color · #422C2A
#422C2A
Nearest named color: Ethereal Espresso
#422C2A (rgb(66 44 42), hsl(5 22% 21%), oklch(0.319 0.033 24.9)) is closest to the named color Ethereal Espresso. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#422C2A
oklch(0.319 0.033 24.9)
Color conversions
- HEX
- #422c2a
- RGB
- rgb(66 44 42)
- HSL
- hsl(5 22% 21%)
- HWB
- hwb(5 16% 74%)
- OKLCH
- oklch(0.319 0.033 24.9)
- OKLab
- oklab(0.319 0.03 0.014)
- CIE Lab
- lab(20.67 10.25 5.59)
- LCH
- lch(20.67 11.67 28.6)
- CMYK
- cmyk(0% 33% 36% 74%)
Tints · Shades · Tones
Tints
- 533E3C
- 65514F
- 776563
- 897978
- 9C8E8D
- AFA4A3
- C3BAB9
- D6D1D0
- EBE8E7
Shades
- 382523
- 2F1E1C
- 251716
- 1C1110
- 140A0A
- 0B0505
- 050202
- 010101
- 000000
Tones
- 483432
- 4E3C3A
- 554442
- 5B4C4B
- 615453
- 675D5C
- 6D6665
- 746E6E
- 7A7777
Color harmonies
Complementary +180°
- 422C2A
Ethereal Espresso
- 1D383A
≈ Nordic
Analogous -30° +30°
- 422C2A
Ethereal Espresso
- 402C33
≈ Chocolate Plum
- 402E22
≈ After Eight
Triadic +120° +240°
- 422C2A
Ethereal Espresso
- 283728
≈ Black Leather Jacket
- 2A3244
≈ Dress Blues
Split-complementary +150° +210°
- 422C2A
Ethereal Espresso
- 203831
≈ Palm Green
- 213541
≈ Into the Night
Tetradic +90° +180° +270°
- 422C2A
Ethereal Espresso
- 323521
≈ Fuchsia Berries
- 1D383A
≈ Nordic
- 342F42
≈ Oil Rush
Contrast & accessibility
Ag
AAAOn white
WCAG 12.92:1 · APCA Lc 99
Ag
FailOn black
WCAG 1.62:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 12.92:1 (AAA) · APCA Lc 99
Contrast pairs
Code snippets
CSS
:root {
--ethereal-espresso: #422c2a;
--ethereal-espresso-rgb: 66 44 42;
--ethereal-espresso-oklch: oklch(0.319 0.033 24.9);
}
.element {
color: var(--ethereal-espresso);
background-color: hsl(5 22% 21%);
border-color: oklch(0.319 0.033 24.9);
}Tailwind CSS v4
@theme {
--color-ethereal-espresso: #422c2a;
--color-ethereal-espresso-50: #fff2f0;
--color-ethereal-espresso-100: #f3e4e2;
--color-ethereal-espresso-200: #e2cfcd;
--color-ethereal-espresso-300: #c8b1ae;
--color-ethereal-espresso-400: #b19795;
--color-ethereal-espresso-500: #9b7e7b;
--color-ethereal-espresso-600: #836b68;
--color-ethereal-espresso-700: #695553;
--color-ethereal-espresso-800: #4d3e3d;
--color-ethereal-espresso-900: #362b2a;
--color-ethereal-espresso-950: #211818;
}SCSS
$ethereal-espresso: #422c2a;
$ethereal-espresso-rgb: 66, 44, 42;
$ethereal-espresso-light: mix(#fff, $ethereal-espresso, 20%);
$ethereal-espresso-dark: mix(#000, $ethereal-espresso, 20%);
.element {
color: $ethereal-espresso;
box-shadow: 0 0 0 2px rgba($ethereal-espresso, 0.35);
}