Named color

Dark Orchid

Dark Orchid is a balanced purple color with HEX #9932CC. According to Colors Encyclopedia, it has RGB 153, 50, 204, HSL 280, 61%, 50%, cool temperature, and is useful for web design, CSS color systems, and UI prototyping.

#9932CC purple cool balanced

HEX #9932CC

RGB rgb(153, 50, 204)

HSL hsl(280 61% 50%)

CMYK cmyk(25, 75, 0, 20)

Luminance 0.1341

Contrast Black 3.68:1White 5.7:1

CSS Utilities

--color-dark-orchid: #9932CC;
.bg-dark-orchid { background-color: #9932CC; }
.text-dark-orchid { color: #9932CC; }

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

Luminance0.1341

Black text3.68:1AA Fail

White text5.7:1AA Pass

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": "#9932CC",
  "rgb": [
    153,
    50,
    204
  ],
  "hsl": [
    280,
    61,
    50
  ],
  "cmyk": [
    25,
    75,
    0,
    20
  ],
  "luminance": 0.1341,
  "contrast": {
    "black": 3.68,
    "white": 5.7
  }
}

WCAG

{
  "AA": [
    "#FFFFFF",
    "#F5F5F5"
  ],
  "AAA": []
}

Harmonies

{
  "complementary": "#66CD32",
  "analogous": [
    "#4C32CD",
    "#CD32B3"
  ],
  "triadic": [
    "#CD9932",
    "#32CD99"
  ],
  "tetradic": [
    "#CD4C32",
    "#66CD32",
    "#32B3CD"
  ],
  "splitComplementary": [
    "#B3CD32",
    "#32CD4C"
  ],
  "monochromatic": [
    "#BE7CDF",
    "#9932CC",
    "#622083"
  ]
}

Variants

{
  "light": "#BE7CDF",
  "dark": "#622083",
  "saturated": "#A316E9",
  "desaturated": "#904EB1",
  "pastel": "#C9A2DD",
  "neon": "#B829FF"
}

Pairings

{
  "best": [
    "#FFFFFF",
    "#66CD32",
    "#4C32CD",
    "#CD32B3"
  ],
  "avoid": [
    "#904EB1",
    "#BE7CDF"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#FFFFFF"
  ],
  "lowContrast": [
    "#BE7CDF",
    "#904EB1"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "blue-violet",
    "medium-orchid",
    "dark-violet",
    "amethyst",
    "grape"
  ],
  "generatedPalettes": [
    "dark-orchid"
  ],
  "generatedComparisons": [
    "blue-violet-vs-dark-orchid",
    "dark-orchid-vs-medium-orchid"
  ],
  "relatedFamilies": [
    "/colors/by-family/purple",
    "/colors/by-temperature/cool",
    "/colors/by-tone/balanced"
  ],
  "relatedTools": [
    "/harmonies/dark-orchid",
    "/wcag/dark-orchid",
    "/css/colors/dark-orchid",
    "/hex/9932cc"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/purple",
      "/colors/by-temperature/cool",
      "/colors/by-tone/balanced"
    ],
    "narrower": [
      "/palettes/dark-orchid"
    ],
    "related": [
      "/colors/blue-violet",
      "/colors/medium-orchid",
      "/colors/dark-violet",
      "/colors/amethyst",
      "/colors/grape",
      "/compare/blue-violet-vs-dark-orchid",
      "/compare/dark-orchid-vs-medium-orchid",
      "/harmonies/dark-orchid",
      "/wcag/dark-orchid",
      "/css/colors/dark-orchid",
      "/hex/9932cc"
    ]
  }
}

Full JSON dataset

{
  "slug": "dark-orchid",
  "name": "Dark Orchid",
  "cssName": "darkorchid",
  "hex": "#9932CC",
  "family": "purple",
  "temperature": "cool",
  "tone": [
    "balanced"
  ],
  "uses": [
    "web design",
    "CSS color systems",
    "UI prototyping"
  ],
  "psychology": {
    "associations": [
      "context dependent"
    ],
    "contexts": [
      "web interfaces",
      "design systems",
      "technical color references"
    ],
    "avoidIn": [
      "claims that require brand or cultural specificity"
    ]
  },
  "aliases": [
    "darkorchid"
  ],
  "sourceType": "standard",
  "confidence": "high",
  "sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
  "origin": {
    "type": "css",
    "notes": "Standard CSS named color."
  },
  "reviewStatus": "auto",
  "editorialNotes": "Generated from CSS named color data and computed color-system properties.",
  "tags": [
    "purple",
    "cool",
    "balanced",
    "web-design",
    "css-color-systems",
    "ui-prototyping",
    "context-dependent"
  ],
  "popularity": 63,
  "rgb": [
    153,
    50,
    204
  ],
  "hsl": [
    280,
    61,
    50
  ],
  "cmyk": [
    25,
    75,
    0,
    20
  ],
  "luminance": 0.1341,
  "contrast": {
    "black": 3.68,
    "white": 5.7
  },
  "harmonies": {
    "complementary": "#66CD32",
    "analogous": [
      "#4C32CD",
      "#CD32B3"
    ],
    "triadic": [
      "#CD9932",
      "#32CD99"
    ],
    "tetradic": [
      "#CD4C32",
      "#66CD32",
      "#32B3CD"
    ],
    "splitComplementary": [
      "#B3CD32",
      "#32CD4C"
    ],
    "monochromatic": [
      "#BE7CDF",
      "#9932CC",
      "#622083"
    ]
  },
  "variants": {
    "light": "#BE7CDF",
    "dark": "#622083",
    "saturated": "#A316E9",
    "desaturated": "#904EB1",
    "pastel": "#C9A2DD",
    "neon": "#B829FF"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": []
  },
  "css": {
    "variable": "--color-dark-orchid: #9932CC;",
    "utility": ".bg-dark-orchid { background-color: #9932CC; }",
    "textUtility": ".text-dark-orchid { color: #9932CC; }"
  },
  "nearestColors": [
    "blue-violet",
    "medium-orchid",
    "dark-violet",
    "amethyst",
    "grape"
  ],
  "generatedPalettes": [
    "dark-orchid"
  ],
  "generatedComparisons": [
    "blue-violet-vs-dark-orchid",
    "dark-orchid-vs-medium-orchid"
  ],
  "relatedFamilies": [
    "/colors/by-family/purple",
    "/colors/by-temperature/cool",
    "/colors/by-tone/balanced"
  ],
  "relatedTools": [
    "/harmonies/dark-orchid",
    "/wcag/dark-orchid",
    "/css/colors/dark-orchid",
    "/hex/9932cc"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/purple",
      "/colors/by-temperature/cool",
      "/colors/by-tone/balanced"
    ],
    "narrower": [
      "/palettes/dark-orchid"
    ],
    "related": [
      "/colors/blue-violet",
      "/colors/medium-orchid",
      "/colors/dark-violet",
      "/colors/amethyst",
      "/colors/grape",
      "/compare/blue-violet-vs-dark-orchid",
      "/compare/dark-orchid-vs-medium-orchid",
      "/harmonies/dark-orchid",
      "/wcag/dark-orchid",
      "/css/colors/dark-orchid",
      "/hex/9932cc"
    ]
  },
  "pairings": {
    "best": [
      "#FFFFFF",
      "#66CD32",
      "#4C32CD",
      "#CD32B3"
    ],
    "avoid": [
      "#904EB1",
      "#BE7CDF"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#FFFFFF"
    ],
    "lowContrast": [
      "#BE7CDF",
      "#904EB1"
    ]
  }
}

Color meaning and use

About Dark Orchid Color

Dark Orchid sits in the purple family with cool temperature and balanced visual character. Standard CSS named color.

Its common associations include context dependent, which makes it relevant for web interfaces and design systems. In design work, Dark Orchid is most useful for web design, css color systems, and ui prototyping, especially when paired with white text for stronger contrast.

WCAG Accessibility

Contrast checks for Dark Orchid against black and white text.

Black text3.68:1AA Fail

White text5.7:1AA Pass

AA text options#FFFFFF, #F5F5F5

AAA text optionsNone in seed set

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

Similar Colors

Blue Violet#8A2BE2

Medium Orchid#BA55D3

Dark Violet#9400D3

Amethyst#9966CC

Grape#6F2DA8

Color Harmonies

#66CD32#66CD32

#4C32CD#4C32CD

#CD32B3#CD32B3

#CD9932#CD9932

#32CD99#32CD99

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

Variants

#BE7CDF#BE7CDF

#622083#622083

#A316E9#A316E9

#904EB1#904EB1

#C9A2DD#C9A2DD

#B829FF#B829FF

Pairings

White#FFFFFF

#66CD32#66CD32

#4C32CD#4C32CD

#CD32B3#CD32B3

Matte Black#1A1A1A

White Smoke#F5F5F5

Dark Orchid

CSS Utilities

Machine-Readable Color Data (JSON)

About Dark Orchid Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings