Nazwany kolor · #BCD6E9
Light Tidal Foam
Light Tidal Foam to #BCD6E9: rgb(188 214 233), hsl(205 51% 83%), oklch(0.863 0.038 239.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Light Tidal Foam color name →
#BCD6E9
oklch(0.863 0.038 239.7)
Konwersje koloru
- HEX
- #bcd6e9
- RGB
- rgb(188 214 233)
- HSL
- hsl(205 51% 83%)
- HWB
- hwb(205 74% 9%)
- OKLCH
- oklch(0.863 0.038 239.7)
- OKLab
- oklab(0.863 -0.019 -0.033)
- CIE Lab
- lab(84.14 -6 -12.45)
- LCH
- lch(84.14 13.82 244.3)
- CMYK
- cmyk(19% 8% 0% 9%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- C3DAEB
- C9DEED
- D0E2F0
- D7E6F2
- DDEAF4
- E4EFF6
- EBF3F9
- F2F7FB
- F8FBFD
Odcienie ciemniejsze
- A3BACB
- 8B9EAD
- 738490
- 5D6A74
- 47525A
- 323B41
- 1F2529
- 0D1013
- 020203
Tony
- B6CDDE
- B0C4D3
- AABBC8
- A4B3BE
- 9EAAB3
- 98A1A9
- 92999E
- 8C9194
- 86888A
Harmonie kolorów
Komplementarna +180°
- BCD6E9
Light Tidal Foam
- E6CDB9
≈ Take-Out
Analogowa -30° +30°
- BCD6E9
Light Tidal Foam
- B6D9E0
≈ Tear
- C8D1EC
≈ Arctic Glow
Triada +120° +240°
- BCD6E9
Light Tidal Foam
- E9C8D1
≈ Cradle Pink
- CED6BA
≈ Canary Green
Komplementarna rozszczepiona +150° +210°
- BCD6E9
Light Tidal Foam
- EAC9C3
≈ Harmony
- DCD1B6
≈ Dirty Martini
Tetrada +90° +180° +270°
- BCD6E9
Light Tidal Foam
- E1C9DE
≈ Decadial Pink
- E6CDB9
≈ Take-Out
- C1D9C5
≈ Edgewater
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.50:1 · APCA Lc 24
Ag
AAANa czerni
WCAG 13.93:1 · APCA Lc 79
Najlepszy kolor tekstu: #000000
WCAG 13.93:1 (AAA) · APCA Lc 79
Contrast pairs
Fragmenty kodu
CSS
:root {
--light-tidal-foam: #bcd6e9;
--light-tidal-foam-rgb: 188 214 233;
--light-tidal-foam-oklch: oklch(0.863 0.038 239.7);
}
.element {
color: var(--light-tidal-foam);
background-color: hsl(205 51% 83%);
border-color: oklch(0.863 0.038 239.7);
}Tailwind CSS v4
@theme {
--color-light-tidal-foam: #bcd6e9;
--color-light-tidal-foam-50: #ecf7ff;
--color-light-tidal-foam-100: #ddeaf4;
--color-light-tidal-foam-200: #c7d7e4;
--color-light-tidal-foam-300: #a7baca;
--color-light-tidal-foam-400: #8aa2b3;
--color-light-tidal-foam-500: #6f8a9d;
--color-light-tidal-foam-600: #5e7585;
--color-light-tidal-foam-700: #4b5d6b;
--color-light-tidal-foam-800: #36454e;
--color-light-tidal-foam-900: #252f36;
--color-light-tidal-foam-950: #141c21;
}SCSS
$light-tidal-foam: #bcd6e9;
$light-tidal-foam-rgb: 188, 214, 233;
$light-tidal-foam-light: mix(#fff, $light-tidal-foam, 20%);
$light-tidal-foam-dark: mix(#000, $light-tidal-foam, 20%);
.element {
color: $light-tidal-foam;
box-shadow: 0 0 0 2px rgba($light-tidal-foam, 0.35);
}