이름 색상 · #24BCA8
Tealish
Tealish은(는) #24BCA8: rgb(36 188 168), hsl(172 68% 44%), oklch(0.716 0.122 181.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Teal mean? → · Tealish color name →
#24BCA8
oklch(0.716 0.122 181.2)
색상 변환
- HEX
- #24bca8
- RGB
- rgb(36 188 168)
- HSL
- hsl(172 68% 44%)
- HWB
- hwb(172 14% 26%)
- OKLCH
- oklch(0.716 0.122 181.2)
- OKLab
- oklab(0.716 -0.122 -0.003)
- CIE Lab
- lab(68.62 -42.8 -1.26)
- LCH
- lch(68.62 42.82 181.7)
- CMYK
- cmyk(81% 0% 11% 26%)
틴트 · 셰이드 · 톤
틴트
- 4BC3B0
- 65CAB9
- 7CD1C1
- 91D7CA
- A4DED3
- B7E5DB
- C9EBE4
- DCF2ED
- EDF9F6
셰이드
- 1EA392
- 188B7C
- 127367
- 0C5D52
- 07473F
- 04322C
- 021F1A
- 000D0A
- 000201
톤
- 3BB6A4
- 4AB0A0
- 55AA9C
- 5FA498
- 669E94
- 6D9890
- 73928C
- 788C88
- 7C8684
색 조화
보색 +180°
- 24BCA8
Tealish
- E2819F
≈ Hope
유사색 -30° +30°
- 24BCA8
Tealish
- 64B97C
≈ Citronella
- 11B7CF
≈ Utopia Beckons
삼각 배색 +120° +240°
- 24BCA8
Tealish
- B191E4
≈ Dreamy Candy Forest
- DA904D
≈ Jasper Orange
분열 보색 +150° +210°
- 24BCA8
Tealish
- CF86C6
≈ Pink Punk
- E68573
≈ Peach Posey
사각 배색 +90° +180° +270°
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.37:1 · APCA Lc 46
Ag
AAA검은색 위
WCAG 8.83:1 · APCA Lc 56
가장 좋은 글자색: #000000
WCAG 8.83:1 (AAA) · APCA Lc 56
Contrast pairs
코드 스니펫
CSS
:root {
--tealish: #24bca8;
--tealish-rgb: 36 188 168;
--tealish-oklch: oklch(0.716 0.122 181.2);
}
.element {
color: var(--tealish);
background-color: hsl(172 68% 44%);
border-color: oklch(0.716 0.122 181.2);
}Tailwind CSS v4
@theme {
--color-tealish: #24bca8;
--color-tealish-50: #cffff8;
--color-tealish-100: #bbf6ec;
--color-tealish-200: #97e6d9;
--color-tealish-300: #66ccbd;
--color-tealish-400: #2cb6a3;
--color-tealish-500: #009f8b;
--color-tealish-600: #008776;
--color-tealish-700: #006c5e;
--color-tealish-800: #005043;
--color-tealish-900: #00372e;
--color-tealish-950: #00221b;
}SCSS
$tealish: #24bca8;
$tealish-rgb: 36, 188, 168;
$tealish-light: mix(#fff, $tealish, 20%);
$tealish-dark: mix(#000, $tealish, 20%);
.element {
color: $tealish;
box-shadow: 0 0 0 2px rgba($tealish, 0.35);
}