이름 색상 · #BADBDF
Tender Waves
Tender Waves은(는) #BADBDF: rgb(186 219 223), hsl(186 37% 80%), oklch(0.869 0.035 205.5). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Cyan mean? → · Tender Waves color name →
#BADBDF
oklch(0.869 0.035 205.5)
색상 변환
- HEX
- #badbdf
- RGB
- rgb(186 219 223)
- HSL
- hsl(186 37% 80%)
- HWB
- hwb(186 73% 13%)
- OKLCH
- oklch(0.869 0.035 205.5)
- OKLab
- oklab(0.869 -0.032 -0.015)
- CIE Lab
- lab(85.09 -10.65 -5.81)
- LCH
- lch(85.09 12.13 208.6)
- CMYK
- cmyk(17% 2% 0% 13%)
틴트 · 셰이드 · 톤
틴트
- C1DFE2
- C8E2E5
- CFE6E9
- D6E9EC
- DDEDEF
- E3F1F2
- EAF4F5
- F1F8F9
- F8FBFC
셰이드
- A1BEC2
- 89A2A5
- 72878A
- 5C6D6F
- 465456
- 323C3D
- 1E2627
- 0D1112
- 020202
톤
- B4D2D5
- AEC8CB
- A9BFC2
- A3B6B8
- 9DACAE
- 97A3A5
- 919A9B
- 8C9292
- 868989
색 조화
보색 +180°
- BADBDF
Tender Waves
- EACCC8
≈ Whirligig
유사색 -30° +30°
- BADBDF
Tender Waves
- BDDCD3
≈ Pinnacle
- BFD8E8
≈ Breezy Touch
삼각 배색 +120° +240°
- BADBDF
Tender Waves
- E0CCE1
≈ Orchid Shimmer
- DED3BA
≈ Natural Almond
분열 보색 +150° +210°
- BADBDF
Tender Waves
- E8CBD5
≈ Queen Pink
- E7CEBE
≈ Farm-Fresh Eggs
사각 배색 +90° +180° +270°
- BADBDF
Tender Waves
- D5D0E9
≈ Air Castle
- EACCC8
≈ Whirligig
- D2D7BD
≈ Celery Satin
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.46:1 · APCA Lc 22
Ag
AAA검은색 위
WCAG 14.28:1 · APCA Lc 81
가장 좋은 글자색: #000000
WCAG 14.28:1 (AAA) · APCA Lc 81
Contrast pairs
코드 스니펫
CSS
:root {
--tender-waves: #badbdf;
--tender-waves-rgb: 186 219 223;
--tender-waves-oklch: oklch(0.869 0.035 205.5);
}
.element {
color: var(--tender-waves);
background-color: hsl(186 37% 80%);
border-color: oklch(0.869 0.035 205.5);
}Tailwind CSS v4
@theme {
--color-tender-waves: #badbdf;
--color-tender-waves-50: #eaf8fa;
--color-tender-waves-100: #dbebee;
--color-tender-waves-200: #c4d9dc;
--color-tender-waves-300: #a3bdc1;
--color-tender-waves-400: #87a5a8;
--color-tender-waves-500: #6b8d91;
--color-tender-waves-600: #5b787b;
--color-tender-waves-700: #486062;
--color-tender-waves-800: #344648;
--color-tender-waves-900: #243132;
--color-tender-waves-950: #121d1e;
}SCSS
$tender-waves: #badbdf;
$tender-waves-rgb: 186, 219, 223;
$tender-waves-light: mix(#fff, $tender-waves, 20%);
$tender-waves-dark: mix(#000, $tender-waves, 20%);
.element {
color: $tender-waves;
box-shadow: 0 0 0 2px rgba($tender-waves, 0.35);
}