이름 색상 · #CAE0DF
Thin Heights
Thin Heights은(는) #CAE0DF: rgb(202 224 223), hsl(177 26% 84%), oklch(0.89 0.023 193.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Gray mean? → · Thin Heights color name →
#CAE0DF
oklch(0.89 0.023 193.4)
색상 변환
- HEX
- #cae0df
- RGB
- rgb(202 224 223)
- HSL
- hsl(177 26% 84%)
- HWB
- hwb(177 79% 12%)
- OKLCH
- oklch(0.89 0.023 193.4)
- OKLab
- oklab(0.89 -0.023 -0.005)
- CIE Lab
- lab(87.51 -7.71 -2.13)
- LCH
- lch(87.51 8 195.5)
- CMYK
- cmyk(10% 0% 0% 12%)
틴트 · 셰이드 · 톤
틴트
- CFE3E2
- D5E6E5
- DAE9E9
- DFECEC
- E4EFEF
- EAF3F2
- EFF6F5
- F4F9F9
- FAFCFC
셰이드
- AFC3C2
- 95A6A5
- 7C8A8A
- 64706F
- 4D5656
- 373E3D
- 222727
- 0F1212
- 020202
톤
- C2D6D5
- BBCCCB
- B3C2C2
- ACB8B8
- A4AFAE
- 9DA5A5
- 969C9B
- 8E9292
- 878989
색 조화
보색 +180°
- CAE0DF
Thin Heights
- EAD5D6
≈ Demure
유사색 -30° +30°
- CAE0DF
Thin Heights
- CEE0D6
≈ Light Soft Fresco
- CBDFE6
≈ Bird Bath Blue
삼각 배색 +120° +240°
- CAE0DF
Thin Heights
- E0D7E6
≈ Lavender Vista
- E4D9CA
≈ Riviera Dune
분열 보색 +150° +210°
- CAE0DF
Thin Heights
- E7D5DF
≈ Swiss Rose
- E9D6CF
≈ Coral Cream
사각 배색 +90° +180° +270°
- CAE0DF
Thin Heights
- D8D9EA
≈ Eyeshadow
- EAD5D6
≈ Demure
- DDDCCA
≈ Desert Springs
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.37:1 · APCA Lc 18
Ag
AAA검은색 위
WCAG 15.23:1 · APCA Lc 85
가장 좋은 글자색: #000000
WCAG 15.23:1 (AAA) · APCA Lc 85
Contrast pairs
코드 스니펫
CSS
:root {
--thin-heights: #cae0df;
--thin-heights-rgb: 202 224 223;
--thin-heights-oklch: oklch(0.89 0.023 193.4);
}
.element {
color: var(--thin-heights);
background-color: hsl(177 26% 84%);
border-color: oklch(0.89 0.023 193.4);
}Tailwind CSS v4
@theme {
--color-thin-heights: #cae0df;
--color-thin-heights-50: #eef7f7;
--color-thin-heights-100: #dfeaea;
--color-thin-heights-200: #c9d8d7;
--color-thin-heights-300: #aabbbb;
--color-thin-heights-400: #8fa3a2;
--color-thin-heights-500: #758b8a;
--color-thin-heights-600: #637675;
--color-thin-heights-700: #4f5e5e;
--color-thin-heights-800: #394544;
--color-thin-heights-900: #27302f;
--color-thin-heights-950: #151c1c;
}SCSS
$thin-heights: #cae0df;
$thin-heights-rgb: 202, 224, 223;
$thin-heights-light: mix(#fff, $thin-heights, 20%);
$thin-heights-dark: mix(#000, $thin-heights, 20%);
.element {
color: $thin-heights;
box-shadow: 0 0 0 2px rgba($thin-heights, 0.35);
}