Nazwany kolor · #B0C5E0
Simply Sparkling
Simply Sparkling to #B0C5E0: rgb(176 197 224), hsl(214 44% 78%), oklch(0.816 0.045 254.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Blue mean? → · Simply Sparkling color name →
#B0C5E0
oklch(0.816 0.045 254.8)
Konwersje koloru
- HEX
- #b0c5e0
- RGB
- rgb(176 197 224)
- HSL
- hsl(214 44% 78%)
- HWB
- hwb(214 69% 12%)
- OKLCH
- oklch(0.816 0.045 254.8)
- OKLab
- oklab(0.816 -0.012 -0.043)
- CIE Lab
- lab(78.58 -3.06 -16.03)
- LCH
- lch(78.58 16.32 259.2)
- CMYK
- cmyk(21% 12% 0% 12%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B8CBE3
- C0D0E6
- C7D6E9
- CFDCED
- D7E2F0
- DFE8F3
- E7EDF6
- EFF3F9
- F7F9FC
Odcienie ciemniejsze
- 99ABC3
- 8292A6
- 6C798A
- 566170
- 424B56
- 2E353E
- 1C2127
- 0B0E12
- 010202
Tony
- ABBED6
- A6B7CC
- A1B0C2
- 9DA9B9
- 98A2AF
- 939BA5
- 8E949C
- 898D93
- 858789
Harmonie kolorów
Komplementarna +180°
- B0C5E0
Simply Sparkling
- D4BFA4
≈ Pine Strain
Analogowa -30° +30°
- B0C5E0
Simply Sparkling
- A5CAD9
≈ Vast Sky
- BFC0DF
≈ Rhapsody Lilac
Triada +120° +240°
- B0C5E0
Simply Sparkling
- DEB8BA
≈ Pink Softness
- B7CAAD
≈ Relish
Komplementarna rozszczepiona +150° +210°
- B0C5E0
Simply Sparkling
- DDBBAC
≈ Pickled Pork
- C7C5A4
≈ Ta Prohm
Tetrada +90° +180° +270°
- B0C5E0
Simply Sparkling
- D9B8CA
≈ Spring Boutique
- D4BFA4
≈ Pine Strain
- A9CDBC
≈ Greywacke
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.76:1 · APCA Lc 32
Ag
AAANa czerni
WCAG 11.90:1 · APCA Lc 70
Najlepszy kolor tekstu: #000000
WCAG 11.90:1 (AAA) · APCA Lc 70
Contrast pairs
Fragmenty kodu
CSS
:root {
--simply-sparkling: #b0c5e0;
--simply-sparkling-rgb: 176 197 224;
--simply-sparkling-oklch: oklch(0.816 0.045 254.8);
}
.element {
color: var(--simply-sparkling);
background-color: hsl(214 44% 78%);
border-color: oklch(0.816 0.045 254.8);
}Tailwind CSS v4
@theme {
--color-simply-sparkling: #b0c5e0;
--color-simply-sparkling-50: #edf6ff;
--color-simply-sparkling-100: #dfe9f7;
--color-simply-sparkling-200: #c8d5e8;
--color-simply-sparkling-300: #a9b9cf;
--color-simply-sparkling-400: #8da0b9;
--color-simply-sparkling-500: #7288a4;
--color-simply-sparkling-600: #61738a;
--color-simply-sparkling-700: #4d5c6f;
--color-simply-sparkling-800: #384452;
--color-simply-sparkling-900: #262f39;
--color-simply-sparkling-950: #141b23;
}SCSS
$simply-sparkling: #b0c5e0;
$simply-sparkling-rgb: 176, 197, 224;
$simply-sparkling-light: mix(#fff, $simply-sparkling, 20%);
$simply-sparkling-dark: mix(#000, $simply-sparkling, 20%);
.element {
color: $simply-sparkling;
box-shadow: 0 0 0 2px rgba($simply-sparkling, 0.35);
}