Named color · #BF8FE5
Luminous Lavender
Luminous Lavender is #BF8FE5: rgb(191 143 229), hsl(273 62% 73%), oklch(0.728 0.131 309.1). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Luminous Lavender color name →
#BF8FE5
oklch(0.728 0.131 309.1)
Color conversions
- HEX
- #bf8fe5
- RGB
- rgb(191 143 229)
- HSL
- hsl(273 62% 73%)
- HWB
- hwb(273 56% 10%)
- OKLCH
- oklch(0.728 0.131 309.1)
- OKLab
- oklab(0.728 0.082 -0.102)
- CIE Lab
- lab(66.55 30.61 -36.87)
- LCH
- lch(66.55 47.93 309.7)
- CMYK
- cmyk(17% 38% 0% 10%)
Tints · Shades · Tones
Tints
- C59AE8
- CCA6EB
- D2B1EE
- D8BCF1
- DFC7F3
- E5D2F6
- ECDDF8
- F2E9FB
- F9F4FD
Shades
- A67CC7
- 8D69AA
- 75578E
- 5E4572
- 483458
- 33243F
- 1F1528
- 0D0712
- 020103
Tones
- B98EDB
- B28DD1
- AC8BC6
- A58ABC
- 9F89B2
- 9987A8
- 93859E
- 8C8494
- 86828A
Color harmonies
Complementary +180°
- BF8FE5
Luminous Lavender
- 8DB759
≈ Fresh Mown
Analogous -30° +30°
- BF8FE5
Luminous Lavender
- 969DF8
≈ Periwinkle Blue
- DC85C2
≈ Pink Punk
Triadic +120° +240°
- BF8FE5
Luminous Lavender
- DC963F
≈ Aged Gouda
- 00C0B7
≈ Turquoise Topaz
Split-complementary +150° +210°
- BF8FE5
Luminous Lavender
- BBA837
≈ Hey Pesto
- 50C089
≈ Garish Green
Tetradic +90° +180° +270°
- BF8FE5
Luminous Lavender
- EC8867
≈ Firewatch
- 8DB759
≈ Fresh Mown
- 07B9DE
≈ Maldives
Contrast & accessibility
Ag
FailOn white
WCAG 2.53:1 · APCA Lc 50
Ag
AAAOn black
WCAG 8.27:1 · APCA Lc 52
Best text color: #000000
WCAG 8.27:1 (AAA) · APCA Lc 52
Contrast pairs
Code snippets
CSS
:root {
--luminous-lavender: #bf8fe5;
--luminous-lavender-rgb: 191 143 229;
--luminous-lavender-oklch: oklch(0.728 0.131 309.1);
}
.element {
color: var(--luminous-lavender);
background-color: hsl(273 62% 73%);
border-color: oklch(0.728 0.131 309.1);
}Tailwind CSS v4
@theme {
--color-luminous-lavender: #bf8fe5;
--color-luminous-lavender-50: #ffebff;
--color-luminous-lavender-100: #f6dcff;
--color-luminous-lavender-200: #e6c5fe;
--color-luminous-lavender-300: #cda4e9;
--color-luminous-lavender-400: #b588d9;
--color-luminous-lavender-500: #a06bc7;
--color-luminous-lavender-600: #875ba8;
--color-luminous-lavender-700: #6c4987;
--color-luminous-lavender-800: #4e3565;
--color-luminous-lavender-900: #362447;
--color-luminous-lavender-950: #21122e;
}SCSS
$luminous-lavender: #bf8fe5;
$luminous-lavender-rgb: 191, 143, 229;
$luminous-lavender-light: mix(#fff, $luminous-lavender, 20%);
$luminous-lavender-dark: mix(#000, $luminous-lavender, 20%);
.element {
color: $luminous-lavender;
box-shadow: 0 0 0 2px rgba($luminous-lavender, 0.35);
}