Lilac Color — #C8A2C8 HEX Code
Lilac uses #C8A2C8, or RGB(200, 162, 200), in this color catalog. Explore complementary colors, palettes and text contrast below.
Color Wheel
Colors adjacent on the wheel create a serene, comfortable palette. Ideal for nature-inspired designs and cohesive UI themes. Explore analogous harmonies for Lilac.
Click a swatch to select · Click hex to copy
Colors adjacent on the wheel create a serene, comfortable palette. Ideal for nature-inspired designs and cohesive UI themes.
Lilac
#C8A2C8
Lilac color reference
Updated
Lilac here is a muted purple with matching red and blue channels. It is darker than CSS lavender and less saturated than our mauve swatch.
This descriptive name identifies our chosen sRGB swatch, not a CSS keyword or a universal material standard.
- HEX — exact
- #C8A2C8
- RGB — exact 8-bit channels
- 200, 162, 200
- HSL — rounded
- 300°, 26%, 71%
What is the complementary color?
An HSL hue rotation of 180° gives #A2C8A2, keeping the rounded saturation and lightness values. This reference calculation rounds HSL before converting back to RGB. It is a digital harmony starting point, not a pigment-mixing rule or a guarantee of readable text.
Black or white text on Lilac?
AA requires at least 4.5:1 for normal text. Results use opaque colors and unrounded contrast values; a passing pair does not establish complete accessibility.
A worked palette in this color family
For a lilac-led interface, inspect the lilac, peach and aubergine palette, then use the worked form to check field boundaries separately from text.
The collection uses its own listed HEX values; it does not substitute them for this #C8A2C8 reference.
Pastel Color Palettes: roles, contrast checks and CSSUse #C8A2C8 in a real interface
Exact match in the Color Match reference list: Lilac. Reference names are browsing labels; not every name is a CSS keyword.
This value falls short for normal text on white. Try it as an accent surface with the tested label below, or use the contrast fixer for a darker text role.
A passing foreground/background check covers that pair only. Inspect focus, hover and meaningful boundaries against their actual neighbors.
Assign roles and check the pair
The lightest and darkest supplied values are the starting reading pair. The accent label adds black or white, whichever has greater contrast. You can change the accent below.
A palette in context
Use this preview to inspect reading text and an accent label.
Example actionReading text #111827 on #C8A2C8: 7.990:1 - Pass normal text AA.
Accent label #000000 on #C8A2C8: 9.458:1.
Checks use unrounded ratios and opaque sRGB. The example action is a visual sample. Test boundaries, focus and hover in your actual component.
All color pairs: normal text AA
| Text / background | #C8A2C8 | #111827 |
|---|---|---|
| #C8A2C8 | 1.00:1 Fail | 7.99:1 Pass |
| #111827 | 7.99:1 Pass | 1.00:1 Fail |
:root {
--surface: #C8A2C8;
--text: #111827;
--accent: #C8A2C8;
--on-accent: #000000;
}Shades & Tints
Tints (Adding White)
Shades (Adding Black)
Theme Palettes
Pastel
Vintage
Neon
Dark Mode
Nature
Live Website Preview
Preview your landing page
See your selected colors on headings, surfaces and example actions.
Accessibility
Text contrast on Lilac
Each sample uses this color as the background. Results describe opaque text contrast, not the accessibility of a whole design.
White text
A normal-size text example.
#FFFFFF on #C8A2C8
WCAG: 2.220:1
Normal text: Fail. Large text: Fail.
APCA: -48.49 Lc (supplementary).
Inspect this pair and find a fixBlack text
A normal-size text example.
#000000 on #C8A2C8
WCAG: 9.458:1
Normal text: AAA. Large text: AAA.
APCA: 60.26 Lc (supplementary).
Inspect this pair and find a fixAA needs 4.5:1 for normal text and 3:1 for large text. Large text is at least 24 CSS px, or about 18.67 CSS px and bold. Methods and limitations
Vision Simulator
Normal Vision
Vision: Viénot 1999 + Machado 2009. Environment: approximate perceptual simulation.
Extract Colors from Image
Drop image, click, or paste
PNG · JPG · WebP · GIF