Named color · #8B88F8
Lavender Blue Shadow
Lavender Blue Shadow is #8B88F8: rgb(139 136 248), hsl(242 89% 75%), oklch(0.68 0.162 282.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Lavender Blue Shadow color name →
#8B88F8
oklch(0.68 0.162 282.4)
Color conversions
- HEX
- #8b88f8
- RGB
- rgb(139 136 248)
- HSL
- hsl(242 89% 75%)
- HWB
- hwb(242 53% 3%)
- OKLCH
- oklch(0.68 0.162 282.4)
- OKLab
- oklab(0.68 0.035 -0.158)
- CIE Lab
- lab(60.86 22.55 -56.62)
- LCH
- lch(60.86 60.95 291.7)
- CMYK
- cmyk(44% 45% 0% 3%)
Tints · Shades · Tones
Tints
- 9595FA
- A0A1FB
- ABADFD
- B6B9FE
- C2C5FF
- CED0FF
- DADCFF
- E6E8FF
- F2F3FF
Shades
- 7875D8
- 6663B8
- 54529A
- 43417C
- 323160
- 232245
- 14132C
- 070615
- 010103
Tones
- 8988EC
- 8888E0
- 8787D4
- 8587C8
- 8486BC
- 8385B0
- 8284A4
- 818398
- 81828C
Color harmonies
Complementary +180°
- 8B88F8
Lavender Blue Shadow
- AA9A00
≈ Nuclear Fallout
Analogous -30° +30°
- 8B88F8
Lavender Blue Shadow
- 429BF8
≈ Sky Dancer
- BA77DF
≈ Lavender Blossom
Triadic +120° +240°
- 8B88F8
Lavender Blue Shadow
- E8713D
≈ Lava Lamp
- 00B47C
≈ April Fool’s Red
Split-complementary +150° +210°
- 8B88F8
Lavender Blue Shadow
- CE8700
≈ Lobster Butter Sauce
- 70AC35
≈ Leaf
Tetradic +90° +180° +270°
- 8B88F8
Lavender Blue Shadow
- EA677D
≈ Ambitious Rose
- AA9A00
≈ Nuclear Fallout
- 00AEAB
≈ Teal Me No Lies
Contrast & accessibility
Ag
FailOn white
WCAG 3.01:1 · APCA Lc 57
Ag
AAOn black
WCAG 6.97:1 · APCA Lc 45
Best text color: #000000
WCAG 6.97:1 (AA) · APCA Lc 45
Contrast pairs
Code snippets
CSS
:root {
--lavender-blue-shadow: #8b88f8;
--lavender-blue-shadow-rgb: 139 136 248;
--lavender-blue-shadow-oklch: oklch(0.68 0.162 282.4);
}
.element {
color: var(--lavender-blue-shadow);
background-color: hsl(242 89% 75%);
border-color: oklch(0.68 0.162 282.4);
}Tailwind CSS v4
@theme {
--color-lavender-blue-shadow: #8b88f8;
--color-lavender-blue-shadow-50: #eff0ff;
--color-lavender-blue-shadow-100: #e1e1ff;
--color-lavender-blue-shadow-200: #cccbff;
--color-lavender-blue-shadow-300: #aeabff;
--color-lavender-blue-shadow-400: #9190fa;
--color-lavender-blue-shadow-500: #7972ec;
--color-lavender-blue-shadow-600: #6761c7;
--color-lavender-blue-shadow-700: #524ea0;
--color-lavender-blue-shadow-800: #393978;
--color-lavender-blue-shadow-900: #272755;
--color-lavender-blue-shadow-950: #161539;
}SCSS
$lavender-blue-shadow: #8b88f8;
$lavender-blue-shadow-rgb: 139, 136, 248;
$lavender-blue-shadow-light: mix(#fff, $lavender-blue-shadow, 20%);
$lavender-blue-shadow-dark: mix(#000, $lavender-blue-shadow, 20%);
.element {
color: $lavender-blue-shadow;
box-shadow: 0 0 0 2px rgba($lavender-blue-shadow, 0.35);
}