Named color · #A6BCE2
Blue Lips
Blue Lips is #A6BCE2: rgb(166 188 226), hsl(218 51% 77%), oklch(0.792 0.059 261.3). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Blue mean? → · Blue Lips color name →
#A6BCE2
oklch(0.792 0.059 261.3)
Color conversions
- HEX
- #a6bce2
- RGB
- rgb(166 188 226)
- HSL
- hsl(218 51% 77%)
- HWB
- hwb(218 65% 11%)
- OKLCH
- oklch(0.792 0.059 261.3)
- OKLab
- oklab(0.792 -0.009 -0.059)
- CIE Lab
- lab(75.54 -1.43 -21.74)
- LCH
- lch(75.54 21.79 266.2)
- CMYK
- cmyk(27% 17% 0% 11%)
Tints · Shades · Tones
Tints
- AFC3E5
- B7C9E8
- C0D0EB
- C9D7EE
- D2DDF1
- DBE4F4
- E4EBF7
- EDF1F9
- F6F8FC
Shades
- 90A3C4
- 7A8BA8
- 65738C
- 515D71
- 3E4757
- 2B323E
- 1A1F27
- 0A0D12
- 010203
Tones
- A2B6D8
- 9EB0CE
- 9BAAC4
- 97A4BA
- 939EB0
- 8F98A6
- 8B929D
- 888C93
- 848689
Color harmonies
Complementary +180°
- A6BCE2
Blue Lips
- CFB890
≈ Flier Lie
Analogous -30° +30°
- A6BCE2
Blue Lips
- 95C3DB
≈ Caribbean Coast
- BBB5DF
≈ Beloved
Triadic +120° +240°
- A6BCE2
Blue Lips
- DFADAA
≈ Pink Stock
- A6C5A2
≈ French Market
Split-complementary +150° +210°
- A6BCE2
Blue Lips
- DBB199
≈ Spanish Villa
- BCBF93
≈ Beige and Sage
Tetradic +90° +180° +270°
Contrast & accessibility
Ag
FailOn white
WCAG 1.92:1 · APCA Lc 37
Ag
AAAOn black
WCAG 10.91:1 · APCA Lc 66
Best text color: #000000
WCAG 10.91:1 (AAA) · APCA Lc 66
Contrast pairs
Code snippets
CSS
:root {
--blue-lips: #a6bce2;
--blue-lips-rgb: 166 188 226;
--blue-lips-oklch: oklch(0.792 0.059 261.3);
}
.element {
color: var(--blue-lips);
background-color: hsl(218 51% 77%);
border-color: oklch(0.792 0.059 261.3);
}Tailwind CSS v4
@theme {
--color-blue-lips: #a6bce2;
--color-blue-lips-50: #ecf6ff;
--color-blue-lips-100: #dee8fc;
--color-blue-lips-200: #c7d5ee;
--color-blue-lips-300: #a8b8d7;
--color-blue-lips-400: #8b9fc2;
--color-blue-lips-500: #7087ae;
--color-blue-lips-600: #5f7293;
--color-blue-lips-700: #4c5b76;
--color-blue-lips-800: #364357;
--color-blue-lips-900: #252e3d;
--color-blue-lips-950: #141b26;
}SCSS
$blue-lips: #a6bce2;
$blue-lips-rgb: 166, 188, 226;
$blue-lips-light: mix(#fff, $blue-lips, 20%);
$blue-lips-dark: mix(#000, $blue-lips, 20%);
.element {
color: $blue-lips;
box-shadow: 0 0 0 2px rgba($blue-lips, 0.35);
}