Named color · #A6BADF
Lavender Phlox
Lavender Phlox is #A6BADF: rgb(166 186 223), hsl(219 47% 76%), oklch(0.786 0.057 262.7). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Lavender Phlox color name →
#A6BADF
oklch(0.786 0.057 262.7)
Color conversions
- HEX
- #a6badf
- RGB
- rgb(166 186 223)
- HSL
- hsl(219 47% 76%)
- HWB
- hwb(219 65% 13%)
- OKLCH
- oklch(0.786 0.057 262.7)
- OKLab
- oklab(0.786 -0.007 -0.057)
- CIE Lab
- lab(74.92 -0.96 -21.05)
- LCH
- lch(74.92 21.08 267.4)
- CMYK
- cmyk(26% 17% 0% 13%)
Tints · Shades · Tones
Tints
- AFC1E2
- B7C8E6
- C0CEE9
- C9D5EC
- D2DCEF
- DBE3F3
- E4EAF6
- EDF1F9
- F6F8FC
Shades
- 90A1C2
- 7A89A5
- 65728A
- 515C6F
- 3E4656
- 2B323D
- 1A1E27
- 0A0D12
- 010202
Tones
- A2B4D5
- 9EAECB
- 9BA8C2
- 97A3B8
- 939DAF
- 8F97A5
- 8B919C
- 888B92
- 848689
Color harmonies
Complementary +180°
- A6BADF
Lavender Phlox
- CCB790
≈ Goldfrapp
Analogous -30° +30°
- A6BADF
Lavender Phlox
- 95C0D8
≈ Sky Bus
- BAB3DC
≈ Beloved
Triadic +120° +240°
- A6BADF
Lavender Phlox
- DCACA8
≈ Pink Stock
- A5C3A2
≈ Pale Mint
Split-complementary +150° +210°
- A6BADF
Lavender Phlox
- D8B098
≈ Cinnamon Mocha
- B9BE94
≈ Paspalum Grass
Tetradic +90° +180° +270°
- A6BADF
Lavender Phlox
- D8ABBD
≈ Apple Infusion
- CCB790
≈ Goldfrapp
- 94C6B6
≈ Float Your Boat
Contrast & accessibility
Ag
FailOn white
WCAG 1.96:1 · APCA Lc 38
Ag
AAAOn black
WCAG 10.71:1 · APCA Lc 65
Best text color: #000000
WCAG 10.71:1 (AAA) · APCA Lc 65
Contrast pairs
Code snippets
CSS
:root {
--lavender-phlox: #a6badf;
--lavender-phlox-rgb: 166 186 223;
--lavender-phlox-oklch: oklch(0.786 0.057 262.7);
}
.element {
color: var(--lavender-phlox);
background-color: hsl(219 47% 76%);
border-color: oklch(0.786 0.057 262.7);
}Tailwind CSS v4
@theme {
--color-lavender-phlox: #a6badf;
--color-lavender-phlox-50: #edf5ff;
--color-lavender-phlox-100: #dee8fc;
--color-lavender-phlox-200: #c8d5ee;
--color-lavender-phlox-300: #a9b8d6;
--color-lavender-phlox-400: #8d9fc1;
--color-lavender-phlox-500: #7286ad;
--color-lavender-phlox-600: #617292;
--color-lavender-phlox-700: #4d5b75;
--color-lavender-phlox-800: #374357;
--color-lavender-phlox-900: #262e3c;
--color-lavender-phlox-950: #141b26;
}SCSS
$lavender-phlox: #a6badf;
$lavender-phlox-rgb: 166, 186, 223;
$lavender-phlox-light: mix(#fff, $lavender-phlox, 20%);
$lavender-phlox-dark: mix(#000, $lavender-phlox, 20%);
.element {
color: $lavender-phlox;
box-shadow: 0 0 0 2px rgba($lavender-phlox, 0.35);
}