色名 · #B2E4D0
Crystal Rapids
Crystal Rapidsは#B2E4D0：rgb(178 228 208)、hsl(156 48% 80%)、oklch(0.878 0.059 168.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Teal mean? → · Crystal Rapids color name →
#B2E4D0
oklch(0.878 0.059 168.6)
カラー変換
- HEX
- #b2e4d0
- RGB
- rgb(178 228 208)
- HSL
- hsl(156 48% 80%)
- HWB
- hwb(156 70% 11%)
- OKLCH
- oklch(0.878 0.059 168.6)
- OKLab
- oklab(0.878 -0.057 0.012)
- CIE Lab
- lab(86.68 -19.73 4.25)
- LCH
- lch(86.68 20.18 167.8)
- CMYK
- cmyk(22% 0% 9% 11%)
ティント · シェード · トーン
ティント
- BAE7D5
- C2E9D9
- CAECDE
- D1EFE3
- D9F2E7
- E1F4EC
- E8F7F1
- F0FAF5
- F7FCFA
シェード
- 9AC6B5
- 83A99A
- 6D8D80
- 577267
- 43584F
- 2F3F39
- 1D2823
- 0C1210
- 010302
トーン
- ADDAC8
- A8CFBF
- A3C5B7
- 9EBBAF
- 9AB1A7
- 94A79F
- 8F9D97
- 8A938F
- 858A88
カラーハーモニー
補色 +180°
- B2E4D0
Crystal Rapids
- F6C8DD
≈ Laelia Pink
類似色 -30° +30°
- B2E4D0
Crystal Rapids
- C4E1BC
≈ Ambrosia
- AAE3E5
≈ Timeless Seafoam
トライアド +120° +240°
- B2E4D0
Crystal Rapids
- D5D1FC
≈ Pale Lavender
- F8CCB6
≈ Biscuit Cream
スプリットコンプリメンタリー +150° +210°
- B2E4D0
Crystal Rapids
- E8CBF0
≈ Mousse aux Pruneaux
- FBC8C8
≈ Sunday Best
テトラード +90° +180° +270°
- B2E4D0
Crystal Rapids
- C0D9FE
≈ Broad Daylight
- F6C8DD
≈ Laelia Pink
- ECD3AC
≈ Givry
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.40:1 · APCA Lc 20
Ag
AAA黒の上
WCAG 14.90:1 · APCA Lc 84
最適な文字色: #000000
WCAG 14.90:1 (AAA) · APCA Lc 84
Contrast pairs
コードスニペット
CSS
:root {
--crystal-rapids: #b2e4d0;
--crystal-rapids-rgb: 178 228 208;
--crystal-rapids-oklch: oklch(0.878 0.059 168.6);
}
.element {
color: var(--crystal-rapids);
background-color: hsl(156 48% 80%);
border-color: oklch(0.878 0.059 168.6);
}Tailwind CSS v4
@theme {
--color-crystal-rapids: #b2e4d0;
--color-crystal-rapids-50: #e6fbf3;
--color-crystal-rapids-100: #d6efe5;
--color-crystal-rapids-200: #bdddd1;
--color-crystal-rapids-300: #9ac2b3;
--color-crystal-rapids-400: #7caa98;
--color-crystal-rapids-500: #5e937f;
--color-crystal-rapids-600: #507c6c;
--color-crystal-rapids-700: #406456;
--color-crystal-rapids-800: #2e493e;
--color-crystal-rapids-900: #1f332b;
--color-crystal-rapids-950: #0f1e18;
}SCSS
$crystal-rapids: #b2e4d0;
$crystal-rapids-rgb: 178, 228, 208;
$crystal-rapids-light: mix(#fff, $crystal-rapids, 20%);
$crystal-rapids-dark: mix(#000, $crystal-rapids, 20%);
.element {
color: $crystal-rapids;
box-shadow: 0 0 0 2px rgba($crystal-rapids, 0.35);
}