#500066

Accessibility

AAA

13.7:1

Vs white / black

13.7:1 · 1.53:1

Sources

Library color

Codes

Formats

HEX

#500066

RGB

rgb(80, 0, 102)

RGBA

rgba(80, 0, 102, 1)

HSL

hsl(287, 100%, 20%)

HSLA

hsla(287, 100%, 20%, 1)

HSV

hsv(287, 100%, 40%)

LAB

lab(18.65% 46.43 -38.19)

LCH

lch(18.65% 60.12 320.56)

OKLAB

oklab(0.3201 0.1133 -0.108)

OKLCH

oklch(0.3201 0.1565 316.37)

XYZ

xyz(5.71, 2.67, 12.78)

CMYK

cmyk(22%, 100%, 0%, 60%)

CSS

color: #500066;

CSS variable

--color-500066: #500066;

SCSS

$color-500066: #500066;

JavaScript

const color = "#500066";

TypeScript

const color: string = "#500066";

React

style={{ backgroundColor: "#500066" }}

JSON

{ "hex": "#500066", "rgb": { "r": 80, "g": 0, "b": 102 }, "oklch": "oklch(0.3201 0.1565 316.37)" }

Export

Developer code

css

:root {
  --#500066-1: #500066;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

purple-950

Noticeably different · ΔE 4.3 · #3B0764

Nearest CSS named color

Indigo

Very different · ΔE 5.55 · #4B0082

Nearest Material color

purple-900

Very different · ΔE 7.5 · #4A148C

Nearest Bootstrap color

dark

Very different · ΔE 18.61 · #212529

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50ffe2ff 100ffd3ff 200f4bbff 300e1a1f9 400c780e2 500ab64c4 6008f53a6 700744186 800592f68 900401f4c 950280b32

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f0eaf2 e2d5e6 d3bfd9 c5aacc b695bf a880b3 996aa6 8a5599 7c408c 6d2b80 5f1573 500066 49005e 430055 3c004d 350044 2f003b 280033 21002a 1b0022 14001a 0d0011 070009

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f0eaf2 e2d5e6 d3bfd9 c5aacc b695bf a880b3 996aa6 8a5599 7c408c 6d2b80 5f1573

Palette

Shades

Mixed toward black — depth, text, and emphasis

49005e 430055 3c004d 350044 2f003b 280033 21002a 1b0022 14001a 0d0011 070009

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

540b68 58156a 5c206d 602b6f 643571 684073 6c4b75 705577 74607a 786b7c 7c757e

Harmony

Complementary

Opposite on the color wheel for contrast

#500066Stop 1 #166600Stop 2

Harmony

Analogous

Neighbors that sit comfortably together

#1D0066Stop 1 #500066Stop 2 #660049Stop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#500066Stop 1 #665000Stop 2 #006650Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#500066Stop 1 #496600Stop 2 #00661DStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#500066Stop 1 #8C00B3Stop 2 #C800FFStop 3 #D84DFFStop 4 #E999FFStop 5

Using this color

Where #500066 works

#500066 (#500066) sits in the purple family at about 287° hue, 100% saturation, and 20% lightness. Contrast is 13.7:1 on white and 1.53:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: purple-950 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

supporting UI accents
text or icons on a white canvas

On a black or near-black UI, #500066 is 1.53:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Imagination, luxury, and wisdom. Frequently used for premium, creative, and tech brands. Common uses still include buttons, charts, and accents in the Purple range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Tailwind purple 950#3B0764 Web Safe #660066#660066 Tailwind fuchsia 950#4A044E Indigo#4B0082 Web Safe #330066#330066 Tailwind purple 900#581C87 Tailwind violet 950#2E1065 Tailwind fuchsia 900#701A75 Material Purple 900#4A148C Web Safe #660099#660099 Tailwind violet 900#4C1D95 Purple#800080