#C8A2C8Lilac hex code: #C8A2C8 · RGB 200, 162, 200. Also called pale lilac, lilac purple.
Lilac is a pale, soft purple with a hint of pink, named after the lilac shrub's spring flowers. The common reference value is #C8A2C8. It is pinker and grayer than lavender and lighter than mauve.
Lilac is feminine, nostalgic and gentle: popular for spring campaigns, Easter, beauty and wellness, bridal and stationery. In UI it works for tags, highlights and soft section backgrounds.
Use charcoal or deep plum text on lilac; white text fails contrast. Lilac pairs well with sage green, butter yellow, soft gray and silver. For a stronger primary, step down to deep lilac (#8E6C9E) or a plum; white labels on deep lilac pass only at large sizes.
Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.
#C8A2C8rgb(200, 162, 200) · reference#DCC6E0rgb(220, 198, 224) · HueWiz pick#B57EDCrgb(181, 126, 220) · HueWiz pick#8E6C9Ergb(142, 108, 158) · HueWiz pickThe same base color in a light and a dark theme. Surfaces and text are tinted with lilac's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.
Spring collection
Designed around lilac.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#FBF4FB · text #251B25 · link #866387Spring collection
Designed around lilac.
A short paragraph shows how body text reads on this surface, with an inline link in the brand color.
#191119 · text #F1EDF1 · link #C8A2C8Hand-picked combinations that work with lilac. Hover a swatch to see its code; click to copy.
WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on lilac | 2.22:1 | Fail | Fail |
| Black text on lilac | 9.45:1 | AAA | AAA |
| Lilac text on white | 2.22:1 | Fail | Fail |
| Lilac text on near-black #111111 | 8.50:1 | AAA | AAA |
| White text on deeper lilac #8C698D | 4.64:1 | AA | AAA |
An 11-step 50–950 ramp generated in OKLCH from #C8A2C8. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.
@import "tailwindcss";
@theme {
--color-lilac-50: #FFF2FF;
--color-lilac-100: #FFE2FF;
--color-lilac-200: #EFCEEF;
--color-lilac-300: #D9B5D9;
--color-lilac-400: #BC98BC;
--color-lilac-500: #9E7F9E;
--color-lilac-600: #806680;
--color-lilac-700: #665166;
--color-lilac-800: #4E3D4E;
--color-lilac-900: #372A37;
--color-lilac-950: #211821;
--color-lilac: #C8A2C8;
}:root {
--lilac: #C8A2C8;
--lilac-rgb: 200 162 200;
--lilac-light: #FFE2FF;
--lilac-dark: #4E3D4E;
}
.btn-lilac {
background: #8C698D;
color: #FFFFFF;
}Need semantic roles (surface, text, primary, accent) and exports? Open lilac in the Tailwind color generator.
#C8A2C8 is the value HueWiz uses for lilac; it equals rgb(200, 162, 200). Other common versions include #DCC6E0 (light lilac), #B57EDC (vivid lilac), #8E6C9E (deep lilac).
With an HSL hue of 300° and 26% saturation, lilac reads as a cool purple.
Use dark text. White on #C8A2C8 measures 2.22:1 and black measures 9.45:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #8C698D.
Try lilac & sage (#C8A2C8, #9CAF88, #F7F4F0); spring garden (#DCC6E0, #FFF1A8, #B5D99C); soft luxe (#C8A2C8, #C0C0C0, #F4F0F5). Each palette above can be copied or opened in the HueWiz studio.
Lilac isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.