Named color

Lilac

Lilac is a muted pink color with HEX #C8A2C8. According to Colors Encyclopedia, it has RGB 200, 162, 200, HSL 300, 26%, 71%, warm temperature, and is useful for beauty branding, creative systems, and premium accents.

#C8A2C8 pink warm muted

HEX #C8A2C8

RGB rgb(200, 162, 200)

HSL hsl(300 26% 71%)

CMYK cmyk(0, 19, 0, 22)

Luminance 0.4229

Contrast Black 9.46:1White 2.22:1

CSS Utilities

--color-lilac: #C8A2C8;
.bg-lilac { background-color: #C8A2C8; }
.text-lilac { color: #C8A2C8; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.4229

Black text9.46:1AA Pass

White text2.22:1AA Fail

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#C8A2C8",
  "rgb": [
    200,
    162,
    200
  ],
  "hsl": [
    300,
    26,
    71
  ],
  "cmyk": [
    0,
    19,
    0,
    22
  ],
  "luminance": 0.4229,
  "contrast": {
    "black": 9.46,
    "white": 2.22
  }
}

WCAG

{
  "AA": [
    "#000000",
    "#1A1A1A"
  ],
  "AAA": [
    "#000000",
    "#1A1A1A"
  ]
}

Harmonies

{
  "complementary": "#A2C8A2",
  "analogous": [
    "#B5A2C8",
    "#C8A2B5"
  ],
  "triadic": [
    "#C8C8A2",
    "#A2C8C8"
  ],
  "tetradic": [
    "#C8B5A2",
    "#A2C8A2",
    "#A2B5C8"
  ],
  "splitComplementary": [
    "#B5C8A2",
    "#A2C8B5"
  ],
  "monochromatic": [
    "#EADCEA",
    "#C8A2C8",
    "#A668A6"
  ]
}

Variants

{
  "light": "#EADCEA",
  "dark": "#A668A6",
  "saturated": "#D992D9",
  "desaturated": "#B8B2B8",
  "pastel": "#F6F4F6",
  "neon": "#FF94FF"
}

Pairings

{
  "best": [
    "#000000",
    "#A2C8A2",
    "#B5A2C8",
    "#C8A2B5"
  ],
  "avoid": [
    "#B8B2B8",
    "#EADCEA"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#EADCEA",
    "#B8B2B8"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "heather",
    "pastel-lilac",
    "wisteria",
    "plum",
    "silver"
  ],
  "generatedPalettes": [
    "lilac"
  ],
  "generatedComparisons": [
    "heather-vs-lilac",
    "lilac-vs-pastel-lilac",
    "wisteria-vs-lilac"
  ],
  "relatedFamilies": [
    "/colors/by-family/pink",
    "/colors/by-temperature/warm",
    "/colors/by-tone/muted"
  ],
  "relatedTools": [
    "/harmonies/lilac",
    "/wcag/lilac",
    "/css/colors/lilac",
    "/hex/c8a2c8"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/pink",
      "/colors/by-temperature/warm",
      "/colors/by-tone/muted"
    ],
    "narrower": [
      "/palettes/lilac"
    ],
    "related": [
      "/colors/heather",
      "/colors/pastel-lilac",
      "/colors/wisteria",
      "/colors/plum",
      "/colors/silver",
      "/compare/heather-vs-lilac",
      "/compare/lilac-vs-pastel-lilac",
      "/compare/wisteria-vs-lilac",
      "/harmonies/lilac",
      "/wcag/lilac",
      "/css/colors/lilac",
      "/hex/c8a2c8"
    ]
  }
}

Full JSON dataset

{
  "slug": "lilac",
  "name": "Lilac",
  "hex": "#C8A2C8",
  "uses": [
    "beauty branding",
    "creative systems",
    "premium accents"
  ],
  "psychology": {
    "associations": [
      "creativity",
      "depth",
      "softness"
    ],
    "contexts": [
      "beauty",
      "wellness",
      "luxury",
      "creative tools"
    ],
    "avoidIn": [
      "strict operational dashboards"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design and editorial color systems."
  },
  "family": "pink",
  "temperature": "warm",
  "tone": [
    "muted"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "pink",
    "warm",
    "muted",
    "beauty-branding",
    "creative-systems",
    "premium-accents",
    "creativity",
    "depth",
    "softness"
  ],
  "popularity": 84,
  "rgb": [
    200,
    162,
    200
  ],
  "hsl": [
    300,
    26,
    71
  ],
  "cmyk": [
    0,
    19,
    0,
    22
  ],
  "luminance": 0.4229,
  "contrast": {
    "black": 9.46,
    "white": 2.22
  },
  "harmonies": {
    "complementary": "#A2C8A2",
    "analogous": [
      "#B5A2C8",
      "#C8A2B5"
    ],
    "triadic": [
      "#C8C8A2",
      "#A2C8C8"
    ],
    "tetradic": [
      "#C8B5A2",
      "#A2C8A2",
      "#A2B5C8"
    ],
    "splitComplementary": [
      "#B5C8A2",
      "#A2C8B5"
    ],
    "monochromatic": [
      "#EADCEA",
      "#C8A2C8",
      "#A668A6"
    ]
  },
  "variants": {
    "light": "#EADCEA",
    "dark": "#A668A6",
    "saturated": "#D992D9",
    "desaturated": "#B8B2B8",
    "pastel": "#F6F4F6",
    "neon": "#FF94FF"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  },
  "css": {
    "variable": "--color-lilac: #C8A2C8;",
    "utility": ".bg-lilac { background-color: #C8A2C8; }",
    "textUtility": ".text-lilac { color: #C8A2C8; }"
  },
  "nearestColors": [
    "heather",
    "pastel-lilac",
    "wisteria",
    "plum",
    "silver"
  ],
  "generatedPalettes": [
    "lilac"
  ],
  "generatedComparisons": [
    "heather-vs-lilac",
    "lilac-vs-pastel-lilac",
    "wisteria-vs-lilac"
  ],
  "relatedFamilies": [
    "/colors/by-family/pink",
    "/colors/by-temperature/warm",
    "/colors/by-tone/muted"
  ],
  "relatedTools": [
    "/harmonies/lilac",
    "/wcag/lilac",
    "/css/colors/lilac",
    "/hex/c8a2c8"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/pink",
      "/colors/by-temperature/warm",
      "/colors/by-tone/muted"
    ],
    "narrower": [
      "/palettes/lilac"
    ],
    "related": [
      "/colors/heather",
      "/colors/pastel-lilac",
      "/colors/wisteria",
      "/colors/plum",
      "/colors/silver",
      "/compare/heather-vs-lilac",
      "/compare/lilac-vs-pastel-lilac",
      "/compare/wisteria-vs-lilac",
      "/harmonies/lilac",
      "/wcag/lilac",
      "/css/colors/lilac",
      "/hex/c8a2c8"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#A2C8A2",
      "#B5A2C8",
      "#C8A2B5"
    ],
    "avoid": [
      "#B8B2B8",
      "#EADCEA"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#EADCEA",
      "#B8B2B8"
    ]
  }
}

Color meaning and use

About Lilac Color

Lilac sits in the pink family with warm temperature and muted visual character. Lilac is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include creativity, depth, and softness, which makes it relevant for beauty and wellness. In design work, Lilac is most useful for beauty branding, creative systems, and premium accents, especially when paired with black text for stronger contrast.

WCAG Accessibility

Contrast checks for Lilac against black and white text.

Black text9.46:1AA Pass

White text2.22:1AA Fail

AA text options#000000, #1A1A1A

AAA text options#000000, #1A1A1A

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Heather#B7A1C7

Pastel Lilac#BDB0D0

Wisteria#C9A0DC

Plum#DDA0DD

Silver#C0C0C0

Color Harmonies

#A2C8A2#A2C8A2

#B5A2C8#B5A2C8

#C8A2B5#C8A2B5

#C8C8A2#C8C8A2

#A2C8C8#A2C8C8

Open full Lilac harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#EADCEA#EADCEA

#A668A6#A668A6

#D992D9#D992D9

#B8B2B8#B8B2B8

#F6F4F6#F6F4F6

#FF94FF#FF94FF

Pairings

Black#000000

#A2C8A2#A2C8A2

#B5A2C8#B5A2C8

#C8A2B5#C8A2B5

Matte Black#1A1A1A

White Smoke#F5F5F5

Lilac

CSS Utilities

Machine-Readable Color Data (JSON)

About Lilac Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings