Purple

#870DD3

Purple

Color Codes

All color formats for development

HEX

#870DD3

RGB

rgb(135, 13, 211)

HSL

hsl(277, 88%, 44%)

OKLCH

oklch(0.501 0.254 305)

CMYK

cmyk(36%, 94%, 0%, 17%)

Accessibility

WCAG contrast compliance

On White Background

6.93:1

AA ✓AAA ✗

On Black Background

3.03:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F1

100

#F1DD

200

#E5C1

300

#D091

400

#B857

500

#A427

600

#870D

700

#6C0B

800

#4D08

900

#3105

950

#1F03

Shades

Darker variations

1#7A0CBE

2#6C0BA9

3#5F0994

4#51087F

5#440769

6#360554

7#29043F

8#1B032A

9#0E0115

Tints

Lighter variations

1#980FEE

2#A428F1

3#B043F3

4#BB5EF5

5#C679F6

6#D294F8

7#DDAEFA

8#E8C9FC

9#F4E4FD

Tones

Muted variations

1#8517C9

2#8321BF

3#802BB5

4#7E35AB

5#7C3FA2

6#794998

7#77538E

8#755C84

9#73667A

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F1 `#F9F1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F1DD `#F1DDFD`	Light backgroundsTable row hoverSkeleton loading
200	E5C1 `#E5C1FB`	Secondary backgroundsInput backgroundsDividers
300	D091 `#D091F8`	BordersInactive statesPlaceholder text
400	B857 `#B857F4`	Disabled statesSecondary iconsMuted text
500	A427 `#A427F1`	Primary brand colorCTAsActive elementsLinks
600	870D `#870DD3`	Hover statesFocus ringsPrimary buttons hover
700	6C0B `#6C0BA8`	Active/pressed statesDark mode accentsSecondary text
800	4D08 `#4D0878`	Text on light backgroundsHeadingsStrong borders
900	3105 `#31054D`	Primary textHigh emphasis contentDark headings
950	1F03 `#1F0330`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F1FE;
  --purple-100: #F1DDFD;
  --purple-200: #E5C1FB;
  --purple-300: #D091F8;
  --purple-400: #B857F4;
  --purple-500: #A427F1;
  --purple-600: #870DD3;
  --purple-700: #6C0BA8;
  --purple-800: #4D0878;
  --purple-900: #31054D;
  --purple-950: #1F0330;
}

Generate More Shades Create Palette Convert Color