이름 색상 · #4B373A

Vibrant Vine

Vibrant Vine은(는) #4B373A: rgb(75 55 58), hsl(351 15% 25%), oklch(0.36 0.029 8.6). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Vibrant Vine color name →

#4B373A

oklch(0.36 0.029 8.6)

색상 변환

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%)

틴트 · 셰이드 · 톤

틴트

5B494B
6C5B5D
7D6E70
8F8183
A19596
B3A9AA
C6BEBF
D8D3D4
ECE9E9

셰이드

402E31
352628
2B1E20
211618
170F10
0E0809
060304
020101
000000

톤

503E41
564547
5B4C4E
605355
655A5C
6B6263
70696A
757171
7B7879

색 조화

보색 +180°

4B373A
Vibrant Vine
2B4240
≈ Theatre Dress

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 11.01:1 · APCA Lc 95

AAA

검은색 위

WCAG 1.90:1 · APCA Lc 0

Fail

가장 좋은 글자색: #FFFFFF

WCAG 11.01:1 (AAA) · APCA Lc 95

Contrast pairs

코드 스니펫

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);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API