色名 · #B4CEDF
Crystal Waters
Crystal Watersは#B4CEDF：rgb(180 206 223)、hsl(204 40% 79%)、oklch(0.838 0.037 236.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Crystal Waters color name →
#B4CEDF
oklch(0.838 0.037 236.6)
カラー変換
- HEX
- #b4cedf
- RGB
- rgb(180 206 223)
- HSL
- hsl(204 40% 79%)
- HWB
- hwb(204 71% 13%)
- OKLCH
- oklch(0.838 0.037 236.6)
- OKLab
- oklab(0.838 -0.02 -0.031)
- CIE Lab
- lab(81.22 -6.35 -11.54)
- LCH
- lch(81.22 13.17 241.2)
- CMYK
- cmyk(19% 8% 0% 13%)
ティント · シェード · トーン
ティント
- BBD3E2
- C3D8E5
- CADDE9
- D2E1EC
- D9E6EF
- E1EBF2
- E8F0F5
- F0F5F9
- F7FAFC
シェード
- 9CB3C2
- 8598A5
- 6E7F8A
- 58666F
- 444E56
- 30383D
- 1D2327
- 0C0F12
- 020202
トーン
- AFC6D5
- AABECB
- A4B6C2
- 9FAEB8
- 9AA6AE
- 959EA5
- 8F979C
- 8A8F92
- 858889
カラーハーモニー
補色 +180°
- B4CEDF
Crystal Waters
- DDC4B3
≈ Mission Stone
類似色 -30° +30°
- B4CEDF
Crystal Waters
- AFD1D6
≈ Hatchling Blue
- BFCAE3
≈ Hindsight
トライアド +120° +240°
- B4CEDF
Crystal Waters
- DFC0CA
≈ Baby Tone
- C8CDB2
≈ Chilled Cucumber
スプリットコンプリメンタリー +150° +210°
- B4CEDF
Crystal Waters
- E1C1BD
≈ Slubbed Silk
- D4C9AF
≈ Prairie House
テトラード +90° +180° +270°
- B4CEDF
Crystal Waters
- D7C2D7
≈ Tender Violet
- DDC4B3
≈ Mission Stone
- BBD1BC
≈ Sunlit Sea
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.63:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.83:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.83:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--crystal-waters: #b4cedf;
--crystal-waters-rgb: 180 206 223;
--crystal-waters-oklch: oklch(0.838 0.037 236.6);
}
.element {
color: var(--crystal-waters);
background-color: hsl(204 40% 79%);
border-color: oklch(0.838 0.037 236.6);
}Tailwind CSS v4
@theme {
--color-crystal-waters: #b4cedf;
--color-crystal-waters-50: #ecf7ff;
--color-crystal-waters-100: #ddeaf3;
--color-crystal-waters-200: #c7d7e2;
--color-crystal-waters-300: #a7bbc8;
--color-crystal-waters-400: #8ba2b2;
--color-crystal-waters-500: #6f8a9c;
--color-crystal-waters-600: #5f7584;
--color-crystal-waters-700: #4b5e69;
--color-crystal-waters-800: #36454d;
--color-crystal-waters-900: #252f36;
--color-crystal-waters-950: #141c21;
}SCSS
$crystal-waters: #b4cedf;
$crystal-waters-rgb: 180, 206, 223;
$crystal-waters-light: mix(#fff, $crystal-waters, 20%);
$crystal-waters-dark: mix(#000, $crystal-waters, 20%);
.element {
color: $crystal-waters;
box-shadow: 0 0 0 2px rgba($crystal-waters, 0.35);
}