이름 색상 · #BA789E

Valentine Heart

Valentine Heart은(는) #BA789E: rgb(186 120 158), hsl(325 32% 60%), oklch(0.653 0.096 344.6). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Pink mean? → · Valentine Heart color name →

#BA789E

oklch(0.653 0.096 344.6)

색상 변환

HEX: #ba789e
RGB: rgb(186 120 158)
HSL: hsl(325 32% 60%)
HWB: hwb(325 47% 27%)
OKLCH: oklch(0.653 0.096 344.6)
OKLab: oklab(0.653 0.092 -0.025)
CIE Lab: lab(58.47 30.62 -9.29)
LCH: lch(58.47 32 343.1)
CMYK: cmyk(0% 35% 15% 27%)

틴트 · 셰이드 · 톤

틴트

C185A7
C992B1
D0A0BA
D7ADC4
DEBACE
E5C8D7
ECD6E1
F2E3EB
F9F1F5

셰이드

A16789
895774
724860
5C394D
462A3A
321D29
1E1018
0D0509
020101

톤

B5799B
AF7A98
A97B95
A47C92
9E7D8F
987E8C
927E89
8C7F86
868083

색 조화

보색 +180°

BA789E
Valentine Heart
51A381
≈ Inspiration Peak

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 3.35:1 · APCA Lc 61

Fail

검은색 위

WCAG 6.26:1 · APCA Lc 41

가장 좋은 글자색: #000000

WCAG 6.26:1 (AA) · APCA Lc 41

Contrast pairs

코드 스니펫

CSS

:root {
  --valentine-heart: #ba789e;
  --valentine-heart-rgb: 186 120 158;
  --valentine-heart-oklch: oklch(0.653 0.096 344.6);
}

.element {
  color: var(--valentine-heart);
  background-color: hsl(325 32% 60%);
  border-color: oklch(0.653 0.096 344.6);
}

Tailwind CSS v4

@theme {
  --color-valentine-heart: #ba789e;
  --color-valentine-heart-50: #ffebfb;
  --color-valentine-heart-100: #ffdcee;
  --color-valentine-heart-200: #f4c4dc;
  --color-valentine-heart-300: #dda4c1;
  --color-valentine-heart-400: #c787ac;
  --color-valentine-heart-500: #b36b95;
  --color-valentine-heart-600: #975b7e;
  --color-valentine-heart-700: #794965;
  --color-valentine-heart-800: #59354b;
  --color-valentine-heart-900: #3e2434;
  --color-valentine-heart-950: #271220;
}

SCSS

$valentine-heart: #ba789e;
$valentine-heart-rgb: 186, 120, 158;
$valentine-heart-light: mix(#fff, $valentine-heart, 20%);
$valentine-heart-dark: mix(#000, $valentine-heart, 20%);

.element {
  color: $valentine-heart;
  box-shadow: 0 0 0 2px rgba($valentine-heart, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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