Couleur nommée la plus proche · #9CB2E4
#9CB2E4
Couleur nommée la plus proche: Wondrous Wisteria
#9CB2E4 (rgb(156 178 228), hsl(222 57% 75%), oklch(0.765 0.076 266.1)) est la plus proche de la couleur nommée Wondrous Wisteria. Teintes, ombres, harmonies, contraste WCAG et APCA, et code CSS, Tailwind v4 et SCSS.
#9CB2E4
oklch(0.765 0.076 266.1)
Conversions de couleur
- HEX
- #9cb2e4
- RGB
- rgb(156 178 228)
- HSL
- hsl(222 57% 75%)
- HWB
- hwb(222 61% 11%)
- OKLCH
- oklch(0.765 0.076 266.1)
- OKLab
- oklab(0.765 -0.005 -0.076)
- CIE Lab
- lab(72.24 0.89 -27.9)
- LCH
- lch(72.24 27.91 271.8)
- CMYK
- cmyk(32% 22% 0% 11%)
Teintes · Ombres · Tons
Teintes
- A6BAE7
- AFC1EA
- B9C9ED
- C3D1F0
- CDD8F2
- D6E0F5
- E1E8F8
- EBEFFA
- F5F7FD
Ombres
- 879AC6
- 7383A9
- 5F6D8D
- 4C5772
- 394358
- 282F3F
- 181D28
- 090C12
- 010103
Tons
- 99ADDA
- 96A8D0
- 94A3C5
- 919EBB
- 8E99B1
- 8B94A7
- 888F9D
- 868A94
- 83858A
Harmonies de couleurs
Complémentaire +180°
- 9CB2E4
Wondrous Wisteria
- C8B07A
≈ Saucy
Analogue -30° +30°
- 9CB2E4
Wondrous Wisteria
- 83BBDD
≈ Enchanting
- B7A9DE
≈ Grape Illusion
Triadique +120° +240°
- 9CB2E4
Wondrous Wisteria
- DFA099
≈ Passive Pink
- 94C096
≈ Velvet Leaf
Complémentaire divisée +150° +210°
- 9CB2E4
Wondrous Wisteria
- D9A684
≈ Clay Fire
- B0B981
≈ Nile
Tétradique +90° +180° +270°
- 9CB2E4
Wondrous Wisteria
- DB9FB4
≈ Faded Pink
- C8B07A
≈ Saucy
- 7CC3B1
≈ Monte Carlo
Contraste et accessibilité
Ag
FailSur blanc
WCAG 2.12:1 · APCA Lc 42
Ag
AAASur noir
WCAG 9.90:1 · APCA Lc 61
Meilleure couleur de texte: #000000
WCAG 9.90:1 (AAA) · APCA Lc 61
Contrast pairs
Extraits de code
CSS
:root {
--wondrous-wisteria: #9cb2e4;
--wondrous-wisteria-rgb: 156 178 228;
--wondrous-wisteria-oklch: oklch(0.765 0.076 266.1);
}
.element {
color: var(--wondrous-wisteria);
background-color: hsl(222 57% 75%);
border-color: oklch(0.765 0.076 266.1);
}Tailwind CSS v4
@theme {
--color-wondrous-wisteria: #9cb2e4;
--color-wondrous-wisteria-50: #ecf5ff;
--color-wondrous-wisteria-100: #dde8ff;
--color-wondrous-wisteria-200: #c6d4f6;
--color-wondrous-wisteria-300: #a7b7df;
--color-wondrous-wisteria-400: #899ecc;
--color-wondrous-wisteria-500: #6f85b9;
--color-wondrous-wisteria-600: #5e719c;
--color-wondrous-wisteria-700: #4b5a7e;
--color-wondrous-wisteria-800: #35425d;
--color-wondrous-wisteria-900: #242e41;
--color-wondrous-wisteria-950: #131a2a;
}SCSS
$wondrous-wisteria: #9cb2e4;
$wondrous-wisteria-rgb: 156, 178, 228;
$wondrous-wisteria-light: mix(#fff, $wondrous-wisteria, 20%);
$wondrous-wisteria-dark: mix(#000, $wondrous-wisteria, 20%);
.element {
color: $wondrous-wisteria;
box-shadow: 0 0 0 2px rgba($wondrous-wisteria, 0.35);
}