Purple

#8B0DD3

Purple

Color Codes

All color formats for development

HEX

#8B0DD3

RGB

rgb(139, 13, 211)

HSL

hsl(278, 88%, 44%)

OKLCH

oklch(0.506 0.255 306.4)

CMYK

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

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

#F9F1

100

#F1DD

200

#E6C1

300

#D291

400

#BB57

500

#A727

600

#8B0D

700

#6E0B

800

#4F08

900

#3205

950

#1F03

Shades

Darker variations

1#7D0CBE

2#6F0BA9

3#610994

4#53087F

5#450769

6#370554

7#2A043F

8#1C032A

9#0E0115

Tints

Lighter variations

1#9C0FEE

2#A828F1

3#B243F3

4#BD5EF5

5#C879F6

6#D394F8

7#DEAEFA

8#E9C9FC

9#F4E4FD

Tones

Muted variations

1#8817C9

2#8521BF

3#832BB5

4#8035AB

5#7D3FA2

6#7B4998

7#78538E

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	E6C1 `#E6C1FB`	Secondary backgroundsInput backgroundsDividers
300	D291 `#D291F8`	BordersInactive statesPlaceholder text
400	BB57 `#BB57F4`	Disabled statesSecondary iconsMuted text
500	A727 `#A727F1`	Primary brand colorCTAsActive elementsLinks
600	8B0D `#8B0DD3`	Hover statesFocus ringsPrimary buttons hover
700	6E0B `#6E0BA8`	Active/pressed statesDark mode accentsSecondary text
800	4F08 `#4F0878`	Text on light backgroundsHeadingsStrong borders
900	3205 `#32054D`	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: #E6C1FB;
  --purple-300: #D291F8;
  --purple-400: #BB57F4;
  --purple-500: #A727F1;
  --purple-600: #8B0DD3;
  --purple-700: #6E0BA8;
  --purple-800: #4F0878;
  --purple-900: #32054D;
  --purple-950: #1F0330;
}

Generate More Shades Create Palette Convert Color