Couleur nommée · #BCD4E6
Beau Blue
Beau Blue correspond à #BCD4E6 : rgb(188 212 230), hsl(206 46% 82%), oklch(0.858 0.036 240.3). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Blue mean? → · Beau Blue color name →
#BCD4E6
oklch(0.858 0.036 240.3)
Conversions de couleur
- HEX
- #bcd4e6
- RGB
- rgb(188 212 230)
- HSL
- hsl(206 46% 82%)
- HWB
- hwb(206 74% 10%)
- OKLCH
- oklch(0.858 0.036 240.3)
- OKLab
- oklab(0.858 -0.018 -0.031)
- CIE Lab
- lab(83.54 -5.52 -11.76)
- LCH
- lch(83.54 12.99 244.9)
- CMYK
- cmyk(18% 8% 0% 10%)
Teintes · Ombres · Tons
Teintes
- C3D8E9
- C9DDEB
- D0E1EE
- D7E5F0
- DDE9F3
- E4EEF5
- EBF2F8
- F1F6FA
- F8FBFD
Ombres
- A3B8C8
- 8B9DAB
- 73838E
- 5D6973
- 475159
- 323A40
- 1F2428
- 0D1013
- 020203
Tons
- B6CBDB
- B0C3D1
- AABAC6
- A4B2BC
- 9EA9B2
- 98A1A8
- 92989E
- 8C9094
- 86888A
Harmonies de couleurs
Complémentaire +180°
- BCD4E6
Beau Blue
- E3CBB9
≈ Safari Map
Analogue -30° +30°
- BCD4E6
Beau Blue
- B6D7DD
≈ Everglade Mist
- C7D0E9
≈ Arctic Glow
Triadique +120° +240°
- BCD4E6
Beau Blue
- E6C7CF
≈ Tinted Rosewood
- CDD4BA
≈ Canary Green
Complémentaire divisée +150° +210°
- BCD4E6
Beau Blue
- E7C8C2
≈ Kashmir Pink
- D9D0B6
≈ Lake Bluff Putty
Tétradique +90° +180° +270°
- BCD4E6
Beau Blue
- DFC8DC
≈ Decadial Pink
- E3CBB9
≈ Safari Map
- C0D7C4
≈ Edgewater
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.53:1 · APCA Lc 25
Ag
AAASur noir
WCAG 13.69:1 · APCA Lc 78
Meilleure couleur de texte: #000000
WCAG 13.69:1 (AAA) · APCA Lc 78
Contrast pairs
Extraits de code
CSS
:root {
--beau-blue: #bcd4e6;
--beau-blue-rgb: 188 212 230;
--beau-blue-oklch: oklch(0.858 0.036 240.3);
}
.element {
color: var(--beau-blue);
background-color: hsl(206 46% 82%);
border-color: oklch(0.858 0.036 240.3);
}Tailwind CSS v4
@theme {
--color-beau-blue: #bcd4e6;
--color-beau-blue-50: #edf7ff;
--color-beau-blue-100: #deeaf3;
--color-beau-blue-200: #c8d7e3;
--color-beau-blue-300: #a8bac9;
--color-beau-blue-400: #8ca2b2;
--color-beau-blue-500: #718a9c;
--color-beau-blue-600: #607584;
--color-beau-blue-700: #4d5d6a;
--color-beau-blue-800: #37444e;
--color-beau-blue-900: #262f36;
--color-beau-blue-950: #141c21;
}SCSS
$beau-blue: #bcd4e6;
$beau-blue-rgb: 188, 212, 230;
$beau-blue-light: mix(#fff, $beau-blue, 20%);
$beau-blue-dark: mix(#000, $beau-blue, 20%);
.element {
color: $beau-blue;
box-shadow: 0 0 0 2px rgba($beau-blue, 0.35);
}