Nazwany kolor · #B4CEDF
Crystal Waters
Crystal Waters to #B4CEDF: rgb(180 206 223), hsl(204 40% 79%), oklch(0.838 0.037 236.6). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Crystal Waters color name →
#B4CEDF
oklch(0.838 0.037 236.6)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BBD3E2
- C3D8E5
- CADDE9
- D2E1EC
- D9E6EF
- E1EBF2
- E8F0F5
- F0F5F9
- F7FAFC
Odcienie ciemniejsze
- 9CB3C2
- 8598A5
- 6E7F8A
- 58666F
- 444E56
- 30383D
- 1D2327
- 0C0F12
- 020202
Tony
- AFC6D5
- AABECB
- A4B6C2
- 9FAEB8
- 9AA6AE
- 959EA5
- 8F979C
- 8A8F92
- 858889
Harmonie kolorów
Komplementarna +180°
- B4CEDF
Crystal Waters
- DDC4B3
≈ Mission Stone
Analogowa -30° +30°
- B4CEDF
Crystal Waters
- AFD1D6
≈ Hatchling Blue
- BFCAE3
≈ Hindsight
Triada +120° +240°
- B4CEDF
Crystal Waters
- DFC0CA
≈ Baby Tone
- C8CDB2
≈ Chilled Cucumber
Komplementarna rozszczepiona +150° +210°
- B4CEDF
Crystal Waters
- E1C1BD
≈ Slubbed Silk
- D4C9AF
≈ Prairie House
Tetrada +90° +180° +270°
- B4CEDF
Crystal Waters
- D7C2D7
≈ Tender Violet
- DDC4B3
≈ Mission Stone
- BBD1BC
≈ Sunlit Sea
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.63:1 · APCA Lc 28
Ag
AAANa czerni
WCAG 12.83:1 · APCA Lc 75
Najlepszy kolor tekstu: #000000
WCAG 12.83:1 (AAA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
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);
}