이름 색상 · #DB6484

Surfer Girl

Surfer Girl은(는) #DB6484: rgb(219 100 132), hsl(344 62% 63%), oklch(0.656 0.152 5.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Red mean? → · Surfer Girl color name →

#DB6484

oklch(0.656 0.152 5.3)

색상 변환

HEX: #db6484
RGB: rgb(219 100 132)
HSL: hsl(344 62% 63%)
HWB: hwb(344 39% 14%)
OKLCH: oklch(0.656 0.152 5.3)
OKLab: oklab(0.656 0.151 0.014)
CIE Lab: lab(58.32 49.75 6.19)
LCH: lch(58.32 50.13 7.1)
CMYK: cmyk(0% 54% 40% 14%)

틴트 · 셰이드 · 톤

틴트

E07490
E6849B
EA94A7
EFA3B3
F2B3C0
F6C2CC
F9D1D9
FBE0E5
FDF0F2

셰이드

BE5672
A24860
873B4F
6D2E3F
54222F
3C1620
260B12
110306
020001

톤

D36884
CA6C83
C26F83
B97282
B07582
A77882
9E7A81
947C81
8A7E80

색 조화

보색 +180°

DB6484
Surfer Girl
00A79B
≈ Tropical Sea

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 3.40:1 · APCA Lc 61

Fail

검은색 위

WCAG 6.16:1 · APCA Lc 41

가장 좋은 글자색: #000000

WCAG 6.16:1 (AA) · APCA Lc 41

Contrast pairs

코드 스니펫

CSS

:root {
  --surfer-girl: #db6484;
  --surfer-girl-rgb: 219 100 132;
  --surfer-girl-oklch: oklch(0.656 0.152 5.3);
}

.element {
  color: var(--surfer-girl);
  background-color: hsl(344 62% 63%);
  border-color: oklch(0.656 0.152 5.3);
}

Tailwind CSS v4

@theme {
  --color-surfer-girl: #db6484;
  --color-surfer-girl-50: #ffe4ed;
  --color-surfer-girl-100: #ffd4df;
  --color-surfer-girl-200: #ffb9c9;
  --color-surfer-girl-300: #f996a9;
  --color-surfer-girl-400: #e77492;
  --color-surfer-girl-500: #d45278;
  --color-surfer-girl-600: #b34666;
  --color-surfer-girl-700: #903851;
  --color-surfer-girl-800: #6b283d;
  --color-surfer-girl-900: #4b1b2a;
  --color-surfer-girl-950: #310a17;
}

SCSS

$surfer-girl: #db6484;
$surfer-girl-rgb: 219, 100, 132;
$surfer-girl-light: mix(#fff, $surfer-girl, 20%);
$surfer-girl-dark: mix(#000, $surfer-girl, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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