Named color · #A3B1F2
Wondrous Wisteria
Wondrous Wisteria is #A3B1F2: rgb(163 177 242), hsl(229 75% 79%), oklch(0.774 0.094 274.6). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Wondrous Wisteria color name →
#A3B1F2
oklch(0.774 0.094 274.6)
Color conversions
- HEX
- #a3b1f2
- RGB
- rgb(163 177 242)
- HSL
- hsl(229 75% 79%)
- HWB
- hwb(229 64% 5%)
- OKLCH
- oklch(0.774 0.094 274.6)
- OKLab
- oklab(0.774 0.008 -0.094)
- CIE Lab
- lab(72.92 6.27 -34.36)
- LCH
- lch(72.92 34.93 280.3)
- CMYK
- cmyk(33% 27% 0% 5%)
Tints · Shades · Tones
Tints
- ACB9F4
- B5C1F5
- BEC8F7
- C7D0F8
- D0D8FA
- D9E0FB
- E2E8FC
- ECEFFD
- F5F7FE
Shades
- 8D99D2
- 7883B4
- 636C96
- 4F5779
- 3C425E
- 2A2F43
- 191C2B
- 0A0C14
- 010103
Tones
- 9FACE6
- 9CA7DB
- 98A2CF
- 959EC4
- 9199B8
- 8E94AD
- 8A8FA2
- 878A96
- 83858B
Color harmonies
Complementary +180°
- A3B1F2
Wondrous Wisteria
- C8B56D
≈ Canadian Maple
Analogous -30° +30°
- A3B1F2
Wondrous Wisteria
- 81BCEE
≈ Electric Eel
- C3A6E6
≈ Silver Rust
Triadic +120° +240°
- A3B1F2
Wondrous Wisteria
- EBA08D
≈ Tonys Pink
- 84C79B
≈ Foul Green
Split-complementary +150° +210°
- A3B1F2
Wondrous Wisteria
- E0A974
≈ Sweet Cashew
- A8C07D
≈ Margarita
Tetradic +90° +180° +270°
- A3B1F2
Wondrous Wisteria
- E99CAE
≈ Second Blush
- C8B56D
≈ Canadian Maple
- 67C9BD
≈ Bayside
Contrast & accessibility
Ag
FailOn white
WCAG 2.07:1 · APCA Lc 40
Ag
AAAOn black
WCAG 10.12:1 · APCA Lc 62
Best text color: #000000
WCAG 10.12:1 (AAA) · APCA Lc 62
Contrast pairs
Code snippets
CSS
:root {
--wondrous-wisteria: #a3b1f2;
--wondrous-wisteria-rgb: 163 177 242;
--wondrous-wisteria-oklch: oklch(0.774 0.094 274.6);
}
.element {
color: var(--wondrous-wisteria);
background-color: hsl(229 75% 79%);
border-color: oklch(0.774 0.094 274.6);
}Tailwind CSS v4
@theme {
--color-wondrous-wisteria: #a3b1f2;
--color-wondrous-wisteria-50: #eef3ff;
--color-wondrous-wisteria-100: #dfe6ff;
--color-wondrous-wisteria-200: #c9d1fd;
--color-wondrous-wisteria-300: #aab4e8;
--color-wondrous-wisteria-400: #8d9ad7;
--color-wondrous-wisteria-500: #7481c5;
--color-wondrous-wisteria-600: #626da6;
--color-wondrous-wisteria-700: #4e5785;
--color-wondrous-wisteria-800: #374063;
--color-wondrous-wisteria-900: #262c46;
--color-wondrous-wisteria-950: #14192d;
}SCSS
$wondrous-wisteria: #a3b1f2;
$wondrous-wisteria-rgb: 163, 177, 242;
$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);
}