#BD22D3#BD22D3

#BD22D3 is a mid, highly saturated purple. Relative luminance 0.167; OKLCH L 58.5% C 0.259 H 322.1°. Best body text is #FFFFFF at 4.85:1 contrast (WCAG AA passes).

Color values

HEX	#BD22D3
RGB	rgb(189, 34, 211)
HSL	hsl(293, 72%, 48%)
HSV	hsv(293, 84%, 83%)
CMYK	cmyk(10.4%, 83.9%, 0%, 17.3%)
CIE-LAB	lab(47.84, 77.37, -56.66)
CIE-LCH	lch(47.84, 95.90, 323.78°)
OKLab	oklab(58.5% 0.204 -0.1588)
OKLCH	oklch(58.5% 0.259 322.1)
XYZ	xyz(33.3149, 16.6680, 63.0779)
Luminance	0.1667 (WCAG relative)
Temperature	neutral
Family	purple

Closest named colors

Perceptual scales

Shades

Tints

Tones

OKLCH scale

Color harmonies

complementary

#BD22D3 #38D322

analogous

#6422D3 #BD22D3 #D32291

triadic

#BD22D3 #D3BD22 #22D3BD

tetradic

#BD22D3 #D36422 #38D322 #2291D3

square

#BD22D3 #D36422 #38D322 #2291D3

split-complementary

#BD22D3 #91D322 #22D364

monochromatic

#5F116A #8E1A9E #BD22D3 #D04FE3 #DE84EB

Accessibility & contrast

On white

4.85

#BD22D3 on #FFFFFF

AA ✓AA large ✓AAA ✗

On black

4.33

#BD22D3 on #000000

AA ✗AA large ✓AAA ✗

Best text color

#FFFFFF on #BD22D3

4.85:1 — WCAG AA (normal text) passes

Contrast matrix

fg \ bg	##BD22D3	#FFFFFF	#000000	##FFFFFF
##BD22D3	1.00	4.85	4.33	4.85
#FFFFFF	4.85	1.00	21.00	1.00
#000000	4.33	21.00	1.00	21.00
##FFFFFF	4.85	1.00	21.00	1.00

Color blindness preview

Protanopia (red-blind)

#0067D7

Deuteranopia (green-blind)

#4177CF

Tritanopia (blue-blind)

#BF4B7F

Achromatopsia (no color)

#717171

Design tokens & code

CSS

--color: #bd22d3;
/* rgb */ color: rgb(189, 34, 211);
/* oklch */ color: oklch(58.5% 0.259 322.1);

Tailwind

colors: {
  custom: {
    50: '#d674e1',
    500: '#bd22d3',
    950: '#000000',
  },
}

SCSS

$custom: #bd22d3;
$custom-light: #d674e1;
$custom-dark: #000000;

JSON

{
  "hex": "#bd22d3",
  "rgb": {
    "r": 189,
    "g": 34,
    "b": 211
  },
  "hsl": {
    "h": 292.542,
    "s": 72.245,
    "l": 48.039
  },
  "oklch": {
    "l": 0.58495,
    "c": 0.25855,
    "h": 322.1
  },
  "luminance": 0.16666
}

Semantic roles & 50–950 ramp

primary

#BD22D3

secondary

#87D47D

accent

#EF394F

background

#FDF7FD

surface

#FBEEFB

border

#D4C9D4

text

#150A15

muted

#837C83

Preview Lab

Preview with #BD22D3

Body copy rendered with the generated semantic roles for this colour.

Preview Lab → · Contrast checker → · Palette generator →