이름 색상 · #AFD9D3

Wave Top

Wave Top은(는) #AFD9D3: rgb(175 217 211), hsl(171 36% 77%), oklch(0.854 0.045 185.7). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Teal mean? → · Wave Top color name →

#AFD9D3

oklch(0.854 0.045 185.7)

색상 변환

HEX: #afd9d3
RGB: rgb(175 217 211)
HSL: hsl(171 36% 77%)
HWB: hwb(171 69% 15%)
OKLCH: oklch(0.854 0.045 185.7)
OKLab: oklab(0.854 -0.045 -0.004)
CIE Lab: lab(83.56 -15.15 -1.82)
LCH: lch(83.56 15.26 186.9)
CMYK: cmyk(19% 0% 3% 15%)

틴트 · 셰이드 · 톤

틴트

B7DDD7
BFE1DC
C7E4E0
CFE8E4
D7ECE9
DFF0ED
E7F4F2
EFF7F6
F7FBFB

셰이드

98BCB7
81A19C
6B8682
566C69
415351
2E3B3A
1C2524
0B1110
010202

톤

AAD0CA
A6C7C2
A1BDB9
9DB4B1
98ACA9
93A3A0
8E9A98
8A9190
858988

색 조화

보색 +180°

AFD9D3
Wave Top
EAC3CA
≈ Light Blush

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 1.53:1 · APCA Lc 25

Fail

검은색 위

WCAG 13.68:1 · APCA Lc 78

AAA

가장 좋은 글자색: #000000

WCAG 13.68:1 (AAA) · APCA Lc 78

Contrast pairs

코드 스니펫

CSS

:root {
  --wave-top: #afd9d3;
  --wave-top-rgb: 175 217 211;
  --wave-top-oklch: oklch(0.854 0.045 185.7);
}

.element {
  color: var(--wave-top);
  background-color: hsl(171 36% 77%);
  border-color: oklch(0.854 0.045 185.7);
}

Tailwind CSS v4

@theme {
  --color-wave-top: #afd9d3;
  --color-wave-top-50: #e8faf7;
  --color-wave-top-100: #d8edea;
  --color-wave-top-200: #c0dbd8;
  --color-wave-top-300: #9ebfbb;
  --color-wave-top-400: #81a7a2;
  --color-wave-top-500: #64908a;
  --color-wave-top-600: #557a75;
  --color-wave-top-700: #44625e;
  --color-wave-top-800: #314844;
  --color-wave-top-900: #21322f;
  --color-wave-top-950: #101e1b;
}

SCSS

$wave-top: #afd9d3;
$wave-top-rgb: 175, 217, 211;
$wave-top-light: mix(#fff, $wave-top, 20%);
$wave-top-dark: mix(#000, $wave-top, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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