色名 · #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);
}