Couleur nommée · #BBD0E3
Bewitching Blue
Bewitching Blue correspond à #BBD0E3 : rgb(187 208 227), hsl(208 42% 81%), oklch(0.848 0.035 245.5). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Gray mean? → · Bewitching Blue color name →
#BBD0E3
oklch(0.848 0.035 245.5)
Conversions de couleur
- HEX
- #bbd0e3
- RGB
- rgb(187 208 227)
- HSL
- hsl(208 42% 81%)
- HWB
- hwb(208 73% 11%)
- OKLCH
- oklch(0.848 0.035 245.5)
- OKLab
- oklab(0.848 -0.014 -0.032)
- CIE Lab
- lab(82.34 -4.38 -11.95)
- LCH
- lch(82.34 12.72 249.9)
- CMYK
- cmyk(18% 8% 0% 11%)
Teintes · Ombres · Tons
Teintes
- C2D5E6
- C8D9E9
- CFDEEB
- D6E3EE
- DDE7F1
- E4ECF4
- EAF1F7
- F1F6F9
- F8FAFC
Ombres
- A2B5C5
- 8A9AA8
- 73808C
- 5C6771
- 464F57
- 32393F
- 1F2327
- 0D1012
- 020203
Tons
- B5C8D9
- AFBFCE
- A9B7C4
- A3AFBA
- 9DA7B0
- 979FA6
- 91979D
- 8C8F93
- 868889
Harmonies de couleurs
Complémentaire +180°
- BBD0E3
Bewitching Blue
- DEC9B6
≈ Loft Light
Analogue -30° +30°
- BBD0E3
Bewitching Blue
- B4D3DC
≈ Blue Glow
- C6CCE5
≈ Ace
Triadique +120° +240°
- BBD0E3
Bewitching Blue
- E2C4CA
≈ Pink Pandora
- C7D2B9
≈ Sweet Surrender
Complémentaire divisée +150° +210°
- BBD0E3
Bewitching Blue
- E3C6BE
≈ Rose Coloured Glasses
- D4CDB4
≈ Only Oatmeal
Tétradique +90° +180° +270°
- BBD0E3
Bewitching Blue
- DCC5D6
≈ Blissful
- DEC9B6
≈ Loft Light
- BCD4C3
≈ Garden Statue
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.58:1 · APCA Lc 27
Ag
AAASur noir
WCAG 13.24:1 · APCA Lc 76
Meilleure couleur de texte: #000000
WCAG 13.24:1 (AAA) · APCA Lc 76
Contrast pairs
Extraits de code
CSS
:root {
--bewitching-blue: #bbd0e3;
--bewitching-blue-rgb: 187 208 227;
--bewitching-blue-oklch: oklch(0.848 0.035 245.5);
}
.element {
color: var(--bewitching-blue);
background-color: hsl(208 42% 81%);
border-color: oklch(0.848 0.035 245.5);
}Tailwind CSS v4
@theme {
--color-bewitching-blue: #bbd0e3;
--color-bewitching-blue-50: #eef6ff;
--color-bewitching-blue-100: #dfe9f3;
--color-bewitching-blue-200: #c9d6e3;
--color-bewitching-blue-300: #aab9c9;
--color-bewitching-blue-400: #8ea1b2;
--color-bewitching-blue-500: #73899c;
--color-bewitching-blue-600: #627484;
--color-bewitching-blue-700: #4e5d6a;
--color-bewitching-blue-800: #38444e;
--color-bewitching-blue-900: #262f36;
--color-bewitching-blue-950: #151b21;
}SCSS
$bewitching-blue: #bbd0e3;
$bewitching-blue-rgb: 187, 208, 227;
$bewitching-blue-light: mix(#fff, $bewitching-blue, 20%);
$bewitching-blue-dark: mix(#000, $bewitching-blue, 20%);
.element {
color: $bewitching-blue;
box-shadow: 0 0 0 2px rgba($bewitching-blue, 0.35);
}