Named color · #B2BADB
Lilac Flare
Lilac Flare is #B2BADB: rgb(178 186 219), hsl(228 36% 78%), oklch(0.794 0.048 274.5). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Lilac Flare color name →
#B2BADB
oklch(0.794 0.048 274.5)
Color conversions
- HEX
- #b2badb
- RGB
- rgb(178 186 219)
- HSL
- hsl(228 36% 78%)
- HWB
- hwb(228 70% 14%)
- OKLCH
- oklch(0.794 0.048 274.5)
- OKLab
- oklab(0.794 0.004 -0.047)
- CIE Lab
- lab(75.7 2.27 -17.63)
- LCH
- lch(75.7 17.77 277.3)
- CMYK
- cmyk(19% 15% 0% 14%)
Tints · Shades · Tones
Tints
- B9C1DF
- C1C8E2
- C9CEE6
- D0D5EA
- D8DCED
- E0E3F1
- E7EAF4
- EFF1F8
- F7F8FB
Shades
- 9AA1BE
- 8389A2
- 6D7287
- 575C6D
- 434654
- 2F323C
- 1D1E26
- 0C0D11
- 010202
Tones
- ADB4D2
- A8AEC8
- A3A8BF
- 9EA2B6
- 999DAD
- 9497A4
- 8F919B
- 8A8B92
- 858689
Color harmonies
Complementary +180°
- B2BADB
Lilac Flare
- C5BC9A
≈ Fields Afar
Analogous -30° +30°
- B2BADB
Lilac Flare
- A3C0D9
≈ Everlasting
- C2B5D5
≈ Plumeria
Triadic +120° +240°
- B2BADB
Lilac Flare
- D8B1A8
≈ Borlotti Bean
- A5C5AE
≈ Spring Leaves
Split-complementary +150° +210°
- B2BADB
Lilac Flare
- D2B69C
≈ Peach Petals
- B5C1A0
≈ Camping Grounds
Tetradic +90° +180° +270°
- B2BADB
Lilac Flare
- D8B0B8
≈ Floss
- C5BC9A
≈ Fields Afar
- 9AC6BF
≈ New-Age Green
Contrast & accessibility
Ag
FailOn white
WCAG 1.91:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.93:1 · APCA Lc 66
Best text color: #000000
WCAG 10.93:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--lilac-flare: #b2badb;
--lilac-flare-rgb: 178 186 219;
--lilac-flare-oklch: oklch(0.794 0.048 274.5);
}
.element {
color: var(--lilac-flare);
background-color: hsl(228 36% 78%);
border-color: oklch(0.794 0.048 274.5);
}Tailwind CSS v4
@theme {
--color-lilac-flare: #b2badb;
--color-lilac-flare-50: #f1f4ff;
--color-lilac-flare-100: #e3e7f8;
--color-lilac-flare-200: #ced3e9;
--color-lilac-flare-300: #b0b6d0;
--color-lilac-flare-400: #969dbb;
--color-lilac-flare-500: #7c84a6;
--color-lilac-flare-600: #69708d;
--color-lilac-flare-700: #545971;
--color-lilac-flare-800: #3d4253;
--color-lilac-flare-900: #2a2d3a;
--color-lilac-flare-950: #171a24;
}SCSS
$lilac-flare: #b2badb;
$lilac-flare-rgb: 178, 186, 219;
$lilac-flare-light: mix(#fff, $lilac-flare, 20%);
$lilac-flare-dark: mix(#000, $lilac-flare, 20%);
.element {
color: $lilac-flare;
box-shadow: 0 0 0 2px rgba($lilac-flare, 0.35);
}