Named color · #4B373A
Vibrant Vine
Vibrant Vine is #4B373A: rgb(75 55 58), hsl(351 15% 25%), oklch(0.36 0.029 8.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Vibrant Vine color name →
#4B373A
oklch(0.36 0.029 8.6)
Color conversions
- HEX
- #4b373a
- RGB
- rgb(75 55 58)
- HSL
- hsl(351 15% 25%)
- HWB
- hwb(351 22% 71%)
- OKLCH
- oklch(0.36 0.029 8.6)
- OKLab
- oklab(0.36 0.029 0.004)
- CIE Lab
- lab(25.44 9.59 1.77)
- LCH
- lch(25.44 9.75 10.5)
- CMYK
- cmyk(0% 27% 23% 71%)
Tints · Shades · Tones
Tints
- 5B494B
- 6C5B5D
- 7D6E70
- 8F8183
- A19596
- B3A9AA
- C6BEBF
- D8D3D4
- ECE9E9
Shades
- 402E31
- 352628
- 2B1E20
- 211618
- 170F10
- 0E0809
- 060304
- 020101
- 000000
Tones
- 503E41
- 564547
- 5B4C4E
- 605355
- 655A5C
- 6B6263
- 70696A
- 757171
- 7B7879
Color harmonies
Complementary +180°
- 4B373A
Vibrant Vine
- 2B4240
≈ Theatre Dress
Analogous -30° +30°
- 4B373A
Vibrant Vine
- 483742
≈ Vincotto
- 4B3832
≈ Brown Beauty
Triadic +120° +240°
- 4B373A
Vibrant Vine
- 394030
≈ Kombu Green
- 313F4C
≈ Deepsea Core
Split-complementary +150° +210°
- 4B373A
Vibrant Vine
- 304238
≈ Timber Green
- 2C4147
≈ Deep River Green
Tetradic +90° +180° +270°
- 4B373A
Vibrant Vine
- 413E2C
≈ Scorched Metal
- 2B4240
≈ Theatre Dress
- 393C4C
≈ Mountain Fig
Contrast & accessibility
Ag
AAAOn white
WCAG 11.01:1 · APCA Lc 95
Ag
FailOn black
WCAG 1.90:1 · APCA Lc 0
Best text color: #FFFFFF
WCAG 11.01:1 (AAA) · APCA Lc 95
Contrast pairs
Code snippets
CSS
:root {
--vibrant-vine: #4b373a;
--vibrant-vine-rgb: 75 55 58;
--vibrant-vine-oklch: oklch(0.36 0.029 8.6);
}
.element {
color: var(--vibrant-vine);
background-color: hsl(351 15% 25%);
border-color: oklch(0.36 0.029 8.6);
}Tailwind CSS v4
@theme {
--color-vibrant-vine: #4b373a;
--color-vibrant-vine-50: #fdf2f3;
--color-vibrant-vine-100: #f1e4e5;
--color-vibrant-vine-200: #e0cfd1;
--color-vibrant-vine-300: #c6b2b4;
--color-vibrant-vine-400: #af989b;
--color-vibrant-vine-500: #987f82;
--color-vibrant-vine-600: #816b6e;
--color-vibrant-vine-700: #675658;
--color-vibrant-vine-800: #4c3e41;
--color-vibrant-vine-900: #352b2d;
--color-vibrant-vine-950: #20181a;
}SCSS
$vibrant-vine: #4b373a;
$vibrant-vine-rgb: 75, 55, 58;
$vibrant-vine-light: mix(#fff, $vibrant-vine, 20%);
$vibrant-vine-dark: mix(#000, $vibrant-vine, 20%);
.element {
color: $vibrant-vine;
box-shadow: 0 0 0 2px rgba($vibrant-vine, 0.35);
}