Nearest named color · #322C26
#322C26
Nearest named color: Noir
#322C26 (rgb(50 44 38), hsl(30 14% 17%), oklch(0.298 0.014 67.3)) is closest to the named color Noir. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#322C26
oklch(0.298 0.014 67.3)
Color conversions
- HEX
- #322c26
- RGB
- rgb(50 44 38)
- HSL
- hsl(30 14% 17%)
- HWB
- hwb(30 15% 80%)
- OKLCH
- oklch(0.298 0.014 67.3)
- OKLab
- oklab(0.298 0.005 0.013)
- CIE Lab
- lab(18.51 1.92 4.96)
- LCH
- lch(18.51 5.32 68.9)
- CMYK
- cmyk(0% 12% 24% 80%)
Tints · Shades · Tones
Tints
- 443E38
- 56514C
- 696560
- 7D7975
- 928E8A
- A7A4A1
- BCBAB7
- D2D0CF
- E8E7E7
Shades
- 2A2520
- 221E19
- 1B1713
- 14110D
- 0D0A08
- 070504
- 030202
- 010101
- 000000
Tones
- 39342E
- 413C37
- 48443F
- 504C48
- 585451
- 5F5D5A
- 676563
- 706E6D
- 787776
Color harmonies
Complementary +180°
- 322C26
Noir
- 282E34
≈ Deep Space Echo
Analogous -30° +30°
- 322C26
Noir
- 342B28
≈ Industrial Black
- 2F2D26
≈ Karaka
Triadic +120° +240°
- 322C26
Noir
- 26302E
≈ Concealed Green
- 2F2B33
≈ Bastille
Split-complementary +150° +210°
- 322C26
Noir
- 262F32
≈ Navy Black
- 2B2D34
≈ Bastille
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
AAAOn white
WCAG 13.78:1 · APCA Lc 100
Ag
FailOn black
WCAG 1.52:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 13.78:1 (AAA) · APCA Lc 100
Contrast pairs
Code snippets
CSS
:root {
--noir: #322c26;
--noir-rgb: 50 44 38;
--noir-oklch: oklch(0.298 0.014 67.3);
}
.element {
color: var(--noir);
background-color: hsl(30 14% 17%);
border-color: oklch(0.298 0.014 67.3);
}Tailwind CSS v4
@theme {
--color-noir: #322c26;
--color-noir-50: #f8f4f1;
--color-noir-100: #ebe7e3;
--color-noir-200: #d8d3ce;
--color-noir-300: #bcb6b0;
--color-noir-400: #a49d96;
--color-noir-500: #8d857d;
--color-noir-600: #77706a;
--color-noir-700: #5f5a54;
--color-noir-800: #46413d;
--color-noir-900: #302d2a;
--color-noir-950: #1d1a18;
}SCSS
$noir: #322c26;
$noir-rgb: 50, 44, 38;
$noir-light: mix(#fff, $noir, 20%);
$noir-dark: mix(#000, $noir, 20%);
.element {
color: $noir;
box-shadow: 0 0 0 2px rgba($noir, 0.35);
}