Colors Encyclopedia

Named color

Mauve

Mauve color #E0B0FF: RGB 224, 176, 255 and HSL 276°, 100%, 85%. Explore its cool purple profile, contrast, CSS, palettes and harmonies.

#E0B0FF purple cool pastel
HEX #E0B0FF
RGB rgb(224, 176, 255)
HSL hsl(276 100% 85%)
CMYK cmyk(12, 31, 0, 0)
Luminance 0.5412
Contrast Black 11.82:1White 1.78:1

Use this color

Create with Mauve

Open a professional color tool with #E0B0FF already applied. Each configuration stays canonical to the tool and can be adjusted or shared.

All color tools
Generate palette & CSS variablesCreate 50–950 tokens and export CSS, SCSS, JSON, or Tailwind.Open configured tool →Open in Gradient StudioStart with Mauve and its complementary color.Open configured tool →Mix this colorBlend it with a complementary color and copy color-mix() CSS.Open configured tool →Check contrastOpen the strongest black or white background pairing.Open configured tool →Accessible combinationsReview AA and AAA text options, alternatives, warnings, and UI guidance.Open configured tool →Create glass surfaceUse this color as the tint for a translucent UI panel.Open configured tool →

CSS Utilities

--color-mauve: #E0B0FF;
.bg-mauve { background-color: #E0B0FF; }
.text-mauve { color: #E0B0FF; }
Open CSS utility pageReusable variables, classes, examples, and implementation notes

Color history, meaning and use · Editorially reviewed

About Mauve Color

Mauve is closely tied to the rise of synthetic textile color. William Henry Perkin discovered mauveine in 1856 while experimenting with coal-tar chemistry, and the vivid purple dye helped accelerate a new synthetic colorant industry. Its novelty was not merely the hue, but the ability to produce brilliant color at industrial scale.

Modern Mauve is usually quieter and grayer than the intense mauveine that startled nineteenth-century viewers. That difference makes the name especially context-sensitive: fashion history may suggest a technologically radical purple, while contemporary interiors often use it as a muted neutral. Pairing it with charcoal emphasizes the modern reading; pairing it with saturated violet recalls its synthetic-dye history.

The HEX value represents a current digital convention, not the chemical appearance of a specific mauveine-dyed textile.

WCAG Accessibility

Contrast checks for Mauve against black and white text.

Black text11.82:1AA Pass
White text1.78:1AA Fail
AA text options#000000, #1A1A1A, #36454F
AAA text options#000000, #1A1A1A
Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Downloadable color reference infographic

Mauve Color Reference Infographic

Save a high-resolution infographic of Mauve, including its color values, coordinated palette, and black and white text contrast.

1200 × 800
Mauve color reference infographic showing #E0B0FF, RGB and HSL values, a coordinated palette, and black and white text contrast.
Mauve color reference infographic generated from the verified Colors Encyclopedia dataset.
Download WebPDownload SVGOpen full size

Color Harmonies

#D1FFB3#D1FFB3#BAB3FF#BAB3FF#FFB3F7#FFB3F7#FFE0B3#FFE0B3#B3FFE0#B3FFE0
Open full Mauve harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

White#FFFFFF#BC57FF#BC57FF#E0B3FF#E0B3FF#DFBBF7#DFBBF7White#FFFFFF#F1DBFF#F1DBFF

Pairings

Black#000000#D1FFB3#D1FFB3#BAB3FF#BAB3FF#FFB3F7#FFB3F7Matte Black#1A1A1AWhite Smoke#F5F5F5

Machine-readable data

Machine-Readable Color Data (JSON)

Perfect for CSS, design systems, automation, and AI ingestion.

AI-Ready Dataset v1.0.0
Luminance0.5412
Black text11.82:1AA Pass
White text1.78: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
Download JSON Open API
Structured sections
Color systems
{
  "hex": "#E0B0FF",
  "rgb": [
    224,
    176,
    255
  ],
  "hsl": [
    276,
    100,
    85
  ],
  "cmyk": [
    12,
    31,
    0,
    0
  ],
  "luminance": 0.5412,
  "contrast": {
    "black": 11.82,
    "white": 1.78
  }
}
WCAG
{
  "AA": [
    "#000000",
    "#1A1A1A",
    "#36454F"
  ],
  "AAA": [
    "#000000",
    "#1A1A1A"
  ]
}
Harmonies
{
  "complementary": "#D1FFB3",
  "analogous": [
    "#BAB3FF",
    "#FFB3F7"
  ],
  "triadic": [
    "#FFE0B3",
    "#B3FFE0"
  ],
  "tetradic": [
    "#FFBAB3",
    "#D1FFB3",
    "#B3F7FF"
  ],
  "splitComplementary": [
    "#F7FFB3",
    "#B3FFBA"
  ],
  "monochromatic": [
    "#FFFFFF",
    "#E0B0FF",
    "#BC57FF"
  ]
}
Variants
{
  "light": "#FFFFFF",
  "dark": "#BC57FF",
  "saturated": "#E0B3FF",
  "desaturated": "#DFBBF7",
  "pastel": "#FFFFFF",
  "neon": "#F1DBFF"
}
Pairings
{
  "best": [
    "#000000",
    "#D1FFB3",
    "#BAB3FF",
    "#FFB3F7"
  ],
  "avoid": [
    "#DFBBF7",
    "#FFFFFF"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#000000"
  ],
  "lowContrast": [
    "#FFFFFF",
    "#DFBBF7"
  ]
}
Knowledge graph
{
  "nearestColors": [
    "powder-lavender",
    "periwinkle",
    "plum",
    "pastel-lavender",
    "thistle"
  ],
  "generatedPalettes": [
    "mauve"
  ],
  "generatedComparisons": [
    "mauve-vs-periwinkle",
    "mauve-vs-powder-lavender"
  ],
  "relatedFamilies": [
    "/colors/by-family/purple",
    "/colors/by-temperature/cool",
    "/colors/by-tone/pastel"
  ],
  "relatedTools": [
    "/harmonies/mauve",
    "/wcag/mauve",
    "/css/colors/mauve",
    "/hex/e0b0ff",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/purple",
      "/colors/by-temperature/cool",
      "/colors/by-tone/pastel"
    ],
    "narrower": [
      "/palettes/mauve"
    ],
    "related": [
      "/colors/powder-lavender",
      "/colors/periwinkle",
      "/colors/plum",
      "/colors/pastel-lavender",
      "/colors/thistle",
      "/compare/mauve-vs-periwinkle",
      "/compare/mauve-vs-powder-lavender",
      "/harmonies/mauve",
      "/wcag/mauve",
      "/css/colors/mauve",
      "/hex/e0b0ff",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  }
}
Full JSON dataset 
{
  "slug": "mauve",
  "name": "Mauve",
  "hex": "#E0B0FF",
  "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": "purple",
  "temperature": "cool",
  "tone": [
    "pastel"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "purple",
    "cool",
    "pastel",
    "beauty-branding",
    "creative-systems",
    "premium-accents",
    "creativity",
    "depth",
    "softness"
  ],
  "popularity": 84,
  "rgb": [
    224,
    176,
    255
  ],
  "hsl": [
    276,
    100,
    85
  ],
  "cmyk": [
    12,
    31,
    0,
    0
  ],
  "luminance": 0.5412,
  "contrast": {
    "black": 11.82,
    "white": 1.78
  },
  "harmonies": {
    "complementary": "#D1FFB3",
    "analogous": [
      "#BAB3FF",
      "#FFB3F7"
    ],
    "triadic": [
      "#FFE0B3",
      "#B3FFE0"
    ],
    "tetradic": [
      "#FFBAB3",
      "#D1FFB3",
      "#B3F7FF"
    ],
    "splitComplementary": [
      "#F7FFB3",
      "#B3FFBA"
    ],
    "monochromatic": [
      "#FFFFFF",
      "#E0B0FF",
      "#BC57FF"
    ]
  },
  "variants": {
    "light": "#FFFFFF",
    "dark": "#BC57FF",
    "saturated": "#E0B3FF",
    "desaturated": "#DFBBF7",
    "pastel": "#FFFFFF",
    "neon": "#F1DBFF"
  },
  "wcag": {
    "AA": [
      "#000000",
      "#1A1A1A",
      "#36454F"
    ],
    "AAA": [
      "#000000",
      "#1A1A1A"
    ]
  },
  "css": {
    "variable": "--color-mauve: #E0B0FF;",
    "utility": ".bg-mauve { background-color: #E0B0FF; }",
    "textUtility": ".text-mauve { color: #E0B0FF; }"
  },
  "nearestColors": [
    "powder-lavender",
    "periwinkle",
    "plum",
    "pastel-lavender",
    "thistle"
  ],
  "generatedPalettes": [
    "mauve"
  ],
  "generatedComparisons": [
    "mauve-vs-periwinkle",
    "mauve-vs-powder-lavender"
  ],
  "relatedFamilies": [
    "/colors/by-family/purple",
    "/colors/by-temperature/cool",
    "/colors/by-tone/pastel"
  ],
  "relatedTools": [
    "/harmonies/mauve",
    "/wcag/mauve",
    "/css/colors/mauve",
    "/hex/e0b0ff",
    "/tools/css-gradient-generator",
    "/tools/color-palette-generator",
    "/tools/css-color-mixer",
    "/tools/contrast-checker"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/purple",
      "/colors/by-temperature/cool",
      "/colors/by-tone/pastel"
    ],
    "narrower": [
      "/palettes/mauve"
    ],
    "related": [
      "/colors/powder-lavender",
      "/colors/periwinkle",
      "/colors/plum",
      "/colors/pastel-lavender",
      "/colors/thistle",
      "/compare/mauve-vs-periwinkle",
      "/compare/mauve-vs-powder-lavender",
      "/harmonies/mauve",
      "/wcag/mauve",
      "/css/colors/mauve",
      "/hex/e0b0ff",
      "/tools/css-gradient-generator",
      "/tools/color-palette-generator",
      "/tools/css-color-mixer",
      "/tools/contrast-checker"
    ]
  },
  "pairings": {
    "best": [
      "#000000",
      "#D1FFB3",
      "#BAB3FF",
      "#FFB3F7"
    ],
    "avoid": [
      "#DFBBF7",
      "#FFFFFF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#000000"
    ],
    "lowContrast": [
      "#FFFFFF",
      "#DFBBF7"
    ]
  }
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page

Similar Colors

Powder Lavender#DCD0FF
Periwinkle#CCCCFF
Plum#DDA0DD
Pastel Lavender#D8BFD8
Thistle#D8BFD8

Related Color Guides

Purple color familyBrowse named purple colors and compare nearby swatches.Cool colorsExplore colors with cool temperature behavior.Pastel colorsFind colors with pastel visual character.Mauve accessibilityCheck contrast and WCAG text options for #E0B0FF.Mauve CSS utilitiesUse Mauve in CSS variables and utility classes.#E0B0FF HEX atlasOpen the permanent HEX atlas record for conversions and variants.Mauve paletteOpen the generated palette based on Mauve.Mauve harmoniesExplore complementary, analogous, triadic, and tetradic harmonies.