Benoemde kleur · #CEA2FD
Lilac
Lilac is #CEA2FD: rgb(206 162 253), hsl(269 96% 81%), oklch(0.785 0.134 305.7). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Purple mean? → · Lilac color name →
#CEA2FD
oklch(0.785 0.134 305.7)
Kleurconversies
- HEX
- #cea2fd
- RGB
- rgb(206 162 253)
- HSL
- hsl(269 96% 81%)
- HWB
- hwb(269 64% 1%)
- OKLCH
- oklch(0.785 0.134 305.7)
- OKLab
- oklab(0.785 0.078 -0.108)
- CIE Lab
- lab(73.28 29.55 -39.39)
- LCH
- lch(73.28 49.24 306.9)
- CMYK
- cmyk(19% 36% 0% 1%)
Tinten · Schaduwen · Tonen
Tinten
- D3ACFE
- D8B5FE
- DCBEFF
- E1C8FF
- E6D1FF
- EBDAFF
- F0E3FF
- F5EDFF
- FAF6FF
Schaduwen
- B38CDC
- 9877BC
- 7F639D
- 664F7F
- 4E3C62
- 382A47
- 23192D
- 0F0A16
- 020103
Tonen
- C69FF0
- BE9CE3
- B699D7
- AE95CA
- A692BE
- 9E8EB1
- 978BA5
- 8F8799
- 87848C
Kleurharmonieën
Complementair +180°
- CEA2FD
Lilac
- A4C865
≈ Green Peridot
Analoog -30° +30°
- CEA2FD
Lilac
- A6B3FF
≈ Wondrous Wisteria
- EE97DA
≈ Love Dust
Triadisch +120° +240°
Gesplitst complementair +150° +210°
Tetradisch +90° +180° +270°
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 2.05:1 · APCA Lc 40
Ag
AAAOp zwart
WCAG 10.21:1 · APCA Lc 62
Beste tekstkleur: #000000
WCAG 10.21:1 (AAA) · APCA Lc 62
Contrast pairs
Codefragmenten
CSS
:root {
--lilac: #cea2fd;
--lilac-rgb: 206 162 253;
--lilac-oklch: oklch(0.785 0.134 305.7);
}
.element {
color: var(--lilac);
background-color: hsl(269 96% 81%);
border-color: oklch(0.785 0.134 305.7);
}Tailwind CSS v4
@theme {
--color-lilac: #cea2fd;
--color-lilac-50: #ffecff;
--color-lilac-100: #f4ddff;
--color-lilac-200: #e4c6ff;
--color-lilac-300: #caa5ed;
--color-lilac-400: #b289dd;
--color-lilac-500: #9c6ccc;
--color-lilac-600: #845cac;
--color-lilac-700: #6a498a;
--color-lilac-800: #4c3568;
--color-lilac-900: #352449;
--color-lilac-950: #201330;
}SCSS
$lilac: #cea2fd;
$lilac-rgb: 206, 162, 253;
$lilac-light: mix(#fff, $lilac, 20%);
$lilac-dark: mix(#000, $lilac, 20%);
.element {
color: $lilac;
box-shadow: 0 0 0 2px rgba($lilac, 0.35);
}