Named color · #D8B8F8
Pink Illusion
Pink Illusion is #D8B8F8: rgb(216 184 248), hsl(270 82% 85%), oklch(0.832 0.094 307.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Purple mean? → · Pink Illusion color name →
#D8B8F8
oklch(0.832 0.094 307.2)
Color conversions
- HEX
- #d8b8f8
- RGB
- rgb(216 184 248)
- HSL
- hsl(270 82% 85%)
- HWB
- hwb(270 72% 3%)
- OKLCH
- oklch(0.832 0.094 307.2)
- OKLab
- oklab(0.832 0.057 -0.075)
- CIE Lab
- lab(79.23 20.69 -27.49)
- LCH
- lch(79.23 34.41 307)
- CMYK
- cmyk(13% 26% 0% 3%)
Tints · Shades · Tones
Tints
- DCBFF9
- E0C6FA
- E4CDFB
- E7D4FC
- EBDCFC
- EFE3FD
- F3EAFE
- F7F1FE
- FBF8FF
Shades
- BCA0D8
- A088B8
- 85719A
- 6B5B7C
- 534560
- 3B3145
- 251E2C
- 110C15
- 020203
Tones
- CFB2EC
- C6ADDF
- BDA7D3
- B4A2C7
- AB9CBB
- A296AF
- 9A91A3
- 918B97
- 88868C
Color harmonies
Complementary +180°
- D8B8F8
Pink Illusion
- B7D491
≈ Fresh Lettuce
Analogous -30° +30°
- D8B8F8
Pink Illusion
- BAC3FF
≈ Light Periwinkle
- F0B1DE
≈ Hanami Pink
Triadic +120° +240°
- D8B8F8
Pink Illusion
- F1BC85
≈ Melon Balls
- 7ADCD2
≈ Shimmering Blue
Split-complementary +150° +210°
- D8B8F8
Pink Illusion
- D9C980
≈ Spring Grass
- 93DBB0
≈ Peaceful Pastures
Tetradic +90° +180° +270°
- D8B8F8
Pink Illusion
- FEB39C
≈ Persicus
- B7D491
≈ Fresh Lettuce
- 7BD7F0
≈ Medium Sky Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.73:1 · APCA Lc 31
Ag
AAAOn black
WCAG 12.13:1 · APCA Lc 71
Best text color: #000000
WCAG 12.13:1 (AAA) · APCA Lc 71
Contrast pairs
Code snippets
CSS
:root {
--pink-illusion: #d8b8f8;
--pink-illusion-rgb: 216 184 248;
--pink-illusion-oklch: oklch(0.832 0.094 307.2);
}
.element {
color: var(--pink-illusion);
background-color: hsl(270 82% 85%);
border-color: oklch(0.832 0.094 307.2);
}Tailwind CSS v4
@theme {
--color-pink-illusion: #d8b8f8;
--color-pink-illusion-50: #fdeeff;
--color-pink-illusion-100: #f1e0ff;
--color-pink-illusion-200: #e0caf3;
--color-pink-illusion-300: #c6abdc;
--color-pink-illusion-400: #ad90ca;
--color-pink-illusion-500: #9775b7;
--color-pink-illusion-600: #7f639a;
--color-pink-illusion-700: #664f7c;
--color-pink-illusion-800: #4a3a5c;
--color-pink-illusion-900: #332841;
--color-pink-illusion-950: #1f1529;
}SCSS
$pink-illusion: #d8b8f8;
$pink-illusion-rgb: 216, 184, 248;
$pink-illusion-light: mix(#fff, $pink-illusion, 20%);
$pink-illusion-dark: mix(#000, $pink-illusion, 20%);
.element {
color: $pink-illusion;
box-shadow: 0 0 0 2px rgba($pink-illusion, 0.35);
}