Purple

#8D1BC5

Purple

Color Codes

All color formats for development

HEX

#8D1BC5

RGB

rgb(141, 27, 197)

HSL

hsl(280, 76%, 44%)

OKLCH

oklch(0.503 0.237 310.2)

CMYK

cmyk(28%, 86%, 0%, 23%)

Accessibility

WCAG contrast compliance

On White Background

6.78:1

AA ✓AAA ✗

On Black Background

3.10:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F2

100

#F2E0

200

#E6C5

300

#D398

400

#BC62

500

#A935

600

#8D1B

700

#7015

800

#500F

900

#330A

950

#2006

Shades

Darker variations

1#7F18B2

2#70169E

3#62138A

4#541076

5#460D63

6#380B4F

7#2A083B

8#1C0527

9#0E0314

Tints

Lighter variations

1#9F1EDF

2#AA36E4

3#B44FE7

4#BF68EA

5#CA81EE

6#D49AF1

7#DFB4F5

8#EACDF8

9#F4E6FC

Tones

Muted variations

1#8A23BD

2#872CB4

3#8435AC

4#813DA3

5#7E469B

6#7C4E92

7#79578A

8#765F81

9#736879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F2 `#F9F2FD`	BackgroundsSubtle highlightsCard backgrounds
100	F2E0 `#F2E0FB`	Light backgroundsTable row hoverSkeleton loading
200	E6C5 `#E6C5F7`	Secondary backgroundsInput backgroundsDividers
300	D398 `#D398F1`	BordersInactive statesPlaceholder text
400	BC62 `#BC62EA`	Disabled statesSecondary iconsMuted text
500	A935 `#A935E3`	Primary brand colorCTAsActive elementsLinks
600	8D1B `#8D1BC5`	Hover statesFocus ringsPrimary buttons hover
700	7015 `#70159D`	Active/pressed statesDark mode accentsSecondary text
800	500F `#500F70`	Text on light backgroundsHeadingsStrong borders
900	330A `#330A48`	Primary textHigh emphasis contentDark headings
950	2006 `#20062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F2FD;
  --purple-100: #F2E0FB;
  --purple-200: #E6C5F7;
  --purple-300: #D398F1;
  --purple-400: #BC62EA;
  --purple-500: #A935E3;
  --purple-600: #8D1BC5;
  --purple-700: #70159D;
  --purple-800: #500F70;
  --purple-900: #330A48;
  --purple-950: #20062D;
}

Generate More Shades Create Palette Convert Color