Najbliższy nazwany kolor · #9CB2E4
#9CB2E4
Najbliższy nazwany kolor: Wondrous Wisteria
#9CB2E4 (rgb(156 178 228), hsl(222 57% 75%), oklch(0.765 0.076 266.1)) jest najbliższy nazwanemu kolorowi Wondrous Wisteria. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#9CB2E4
oklch(0.765 0.076 266.1)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- A6BAE7
- AFC1EA
- B9C9ED
- C3D1F0
- CDD8F2
- D6E0F5
- E1E8F8
- EBEFFA
- F5F7FD
Odcienie ciemniejsze
- 879AC6
- 7383A9
- 5F6D8D
- 4C5772
- 394358
- 282F3F
- 181D28
- 090C12
- 010103
Tony
- 99ADDA
- 96A8D0
- 94A3C5
- 919EBB
- 8E99B1
- 8B94A7
- 888F9D
- 868A94
- 83858A
Harmonie kolorów
Komplementarna +180°
- 9CB2E4
Wondrous Wisteria
- C8B07A
≈ Saucy
Analogowa -30° +30°
- 9CB2E4
Wondrous Wisteria
- 83BBDD
≈ Enchanting
- B7A9DE
≈ Grape Illusion
Triada +120° +240°
- 9CB2E4
Wondrous Wisteria
- DFA099
≈ Passive Pink
- 94C096
≈ Velvet Leaf
Komplementarna rozszczepiona +150° +210°
- 9CB2E4
Wondrous Wisteria
- D9A684
≈ Clay Fire
- B0B981
≈ Nile
Tetrada +90° +180° +270°
- 9CB2E4
Wondrous Wisteria
- DB9FB4
≈ Faded Pink
- C8B07A
≈ Saucy
- 7CC3B1
≈ Monte Carlo
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.12:1 · APCA Lc 42
Ag
AAANa czerni
WCAG 9.90:1 · APCA Lc 61
Najlepszy kolor tekstu: #000000
WCAG 9.90:1 (AAA) · APCA Lc 61
Contrast pairs
Fragmenty kodu
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);
}