Nazwany kolor · #B4E0DE
Frosty Soft Blue
Frosty Soft Blue to #B4E0DE: rgb(180 224 222), hsl(177 42% 79%), oklch(0.875 0.046 192.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Frosty Soft Blue color name →
#B4E0DE
oklch(0.875 0.046 192.9)
Konwersje koloru
- HEX
- #b4e0de
- RGB
- rgb(180 224 222)
- HSL
- hsl(177 42% 79%)
- HWB
- hwb(177 71% 12%)
- OKLCH
- oklch(0.875 0.046 192.9)
- OKLab
- oklab(0.875 -0.045 -0.01)
- CIE Lab
- lab(86.02 -15.1 -3.99)
- LCH
- lch(86.02 15.62 194.8)
- CMYK
- cmyk(20% 0% 1% 12%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- BCE3E1
- C3E6E5
- CBE9E8
- D2ECEB
- DAF0EE
- E1F3F2
- E9F6F5
- F0F9F8
- F8FCFC
Odcienie ciemniejsze
- 9CC3C1
- 85A6A5
- 6E8A89
- 58706F
- 445655
- 303E3D
- 1D2726
- 0C1212
- 020202
Tony
- AFD6D4
- AACCCA
- A5C2C1
- A0B9B7
- 9AAFAE
- 95A5A4
- 909C9B
- 8B9292
- 858989
Harmonie kolorów
Komplementarna +180°
- B4E0DE
Frosty Soft Blue
- F3CACD
≈ Blushing Senorita
Analogowa -30° +30°
- B4E0DE
Frosty Soft Blue
- BCE0CD
≈ Refrigerator Green
- B6DDEC
≈ Bright and Breezy
Triada +120° +240°
- B4E0DE
Frosty Soft Blue
- E1CEEC
≈ Footie Pyjamas
- E9D2B6
≈ Dust Storm
Komplementarna rozszczepiona +150° +210°
- B4E0DE
Frosty Soft Blue
- EDCBDE
≈ LA Vibes
- F1CDBE
≈ Watusi
Tetrada +90° +180° +270°
- B4E0DE
Frosty Soft Blue
- D1D3F4
≈ Flax Bloom
- F3CACD
≈ Blushing Senorita
- DBD8B5
≈ Spring Day
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.43:1 · APCA Lc 21
Ag
AAANa czerni
WCAG 14.65:1 · APCA Lc 83
Najlepszy kolor tekstu: #000000
WCAG 14.65:1 (AAA) · APCA Lc 83
Contrast pairs
Fragmenty kodu
CSS
:root {
--frosty-soft-blue: #b4e0de;
--frosty-soft-blue-rgb: 180 224 222;
--frosty-soft-blue-oklch: oklch(0.875 0.046 192.9);
}
.element {
color: var(--frosty-soft-blue);
background-color: hsl(177 42% 79%);
border-color: oklch(0.875 0.046 192.9);
}Tailwind CSS v4
@theme {
--color-frosty-soft-blue: #b4e0de;
--color-frosty-soft-blue-50: #e7faf9;
--color-frosty-soft-blue-100: #d7edec;
--color-frosty-soft-blue-200: #bfdbda;
--color-frosty-soft-blue-300: #9dbfbe;
--color-frosty-soft-blue-400: #7fa7a6;
--color-frosty-soft-blue-500: #62908e;
--color-frosty-soft-blue-600: #537a78;
--color-frosty-soft-blue-700: #426260;
--color-frosty-soft-blue-800: #304846;
--color-frosty-soft-blue-900: #203230;
--color-frosty-soft-blue-950: #101e1d;
}SCSS
$frosty-soft-blue: #b4e0de;
$frosty-soft-blue-rgb: 180, 224, 222;
$frosty-soft-blue-light: mix(#fff, $frosty-soft-blue, 20%);
$frosty-soft-blue-dark: mix(#000, $frosty-soft-blue, 20%);
.element {
color: $frosty-soft-blue;
box-shadow: 0 0 0 2px rgba($frosty-soft-blue, 0.35);
}