Couleur nommée · #B0DCED
Whimsy Blue
Whimsy Blue correspond à #B0DCED : rgb(176 220 237), hsl(197 63% 81%), oklch(0.869 0.051 223.4). Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
What does Cyan mean? → · Whimsy Blue color name →
#B0DCED
oklch(0.869 0.051 223.4)
Conversions de couleur
- HEX
- #b0dced
- RGB
- rgb(176 220 237)
- HSL
- hsl(197 63% 81%)
- HWB
- hwb(197 69% 7%)
- OKLCH
- oklch(0.869 0.051 223.4)
- OKLab
- oklab(0.869 -0.037 -0.035)
- CIE Lab
- lab(85.05 -12 -13.32)
- LCH
- lch(85.05 17.93 228)
- CMYK
- cmyk(26% 7% 0% 7%)
Teintes · Ombres · Tons
Teintes
- B8E0EF
- C0E3F1
- C8E7F3
- D0EAF4
- D8EEF6
- E0F1F8
- E8F5FA
- EFF8FC
- F7FCFD
Ombres
- 99BFCE
- 82A3B0
- 6C8893
- 566E77
- 42545C
- 2E3C42
- 1C262A
- 0B1114
- 010203
Tons
- ABD2E2
- A7C9D6
- A2C0CB
- 9DB6C0
- 98ADB5
- 94A4AA
- 8F9BA0
- 8A9295
- 85898A
Harmonies de couleurs
Complémentaire +180°
- B0DCED
Whimsy Blue
- F2CAB9
≈ Pink Pieris
Analogue -30° +30°
- B0DCED
Whimsy Blue
- ADDFDD
≈ Blue Light
- BDD7F6
≈ Oh Boy!
Triadique +120° +240°
- B0DCED
Whimsy Blue
- EDC7DD
≈ Pink Pony
- D9D6AF
≈ Morning Moor
Complémentaire divisée +150° +210°
- B0DCED
Whimsy Blue
- F4C7CA
≈ Old Fashioned Pink
- E9CFAF
≈ Sugar Cookie Crust
Tétradique +90° +180° +270°
- B0DCED
Whimsy Blue
- E0CBEC
≈ Syrian Violet
- F2CAB9
≈ Pink Pieris
- C7DCBA
≈ Pale Tidepool
Contraste et accessibilité
Ag
FailSur blanc
WCAG 1.46:1 · APCA Lc 22
Ag
AAASur noir
WCAG 14.30:1 · APCA Lc 81
Meilleure couleur de texte: #000000
WCAG 14.30:1 (AAA) · APCA Lc 81
Contrast pairs
Extraits de code
CSS
:root {
--whimsy-blue: #b0dced;
--whimsy-blue-rgb: 176 220 237;
--whimsy-blue-oklch: oklch(0.869 0.051 223.4);
}
.element {
color: var(--whimsy-blue);
background-color: hsl(197 63% 81%);
border-color: oklch(0.869 0.051 223.4);
}Tailwind CSS v4
@theme {
--color-whimsy-blue: #b0dced;
--color-whimsy-blue-50: #e6f9ff;
--color-whimsy-blue-100: #d7ecf5;
--color-whimsy-blue-200: #bed9e5;
--color-whimsy-blue-300: #9cbdcc;
--color-whimsy-blue-400: #7ea6b5;
--color-whimsy-blue-500: #608e9f;
--color-whimsy-blue-600: #517887;
--color-whimsy-blue-700: #41606c;
--color-whimsy-blue-800: #2e474f;
--color-whimsy-blue-900: #1f3137;
--color-whimsy-blue-950: #0f1d22;
}SCSS
$whimsy-blue: #b0dced;
$whimsy-blue-rgb: 176, 220, 237;
$whimsy-blue-light: mix(#fff, $whimsy-blue, 20%);
$whimsy-blue-dark: mix(#000, $whimsy-blue, 20%);
.element {
color: $whimsy-blue;
box-shadow: 0 0 0 2px rgba($whimsy-blue, 0.35);
}