Purple

#880AD6

Purple

Color Codes

All color formats for development

HEX

#880AD6

RGB

rgb(136, 10, 214)

HSL

hsl(277, 91%, 44%)

OKLCH

oklch(0.504 0.258 304.7)

CMYK

cmyk(36%, 95%, 0%, 16%)

Accessibility

WCAG contrast compliance

On White Background

6.86:1

AA ✓AAA ✗

On Black Background

3.06:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F0

100

#F1DD

200

#E5C0

300

#D18F

400

#B955

500

#A524

600

#880A

700

#6C08

800

#4D06

900

#3104

950

#1F02

Shades

Darker variations

1#7A09C1

2#6D08AB

3#5F0796

4#520681

5#44056B

6#360456

7#290340

8#1B022B

9#0E0115

Tints

Lighter variations

1#990BF2

2#A525F5

3#B040F6

4#BC5BF7

5#C777F9

6#D292FA

7#DDADFB

8#E9C8FC

9#F4E4FE

Tones

Muted variations

1#8614CC

2#831FC2

3#8129B8

4#7E33AD

5#7C3DA3

6#7A4799

7#77528F

8#755C85

9#73667A

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	F9F0 `#F9F0FE`	BackgroundsSubtle highlightsCard backgrounds
100	F1DD `#F1DDFD`	Light backgroundsTable row hoverSkeleton loading
200	E5C0 `#E5C0FC`	Secondary backgroundsInput backgroundsDividers
300	D18F `#D18FFA`	BordersInactive statesPlaceholder text
400	B955 `#B955F7`	Disabled statesSecondary iconsMuted text
500	A524 `#A524F5`	Primary brand colorCTAsActive elementsLinks
600	880A `#880AD6`	Hover statesFocus ringsPrimary buttons hover
700	6C08 `#6C08AA`	Active/pressed statesDark mode accentsSecondary text
800	4D06 `#4D067A`	Text on light backgroundsHeadingsStrong borders
900	3104 `#31044E`	Primary textHigh emphasis contentDark headings
950	1F02 `#1F0231`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #F9F0FE;
  --purple-100: #F1DDFD;
  --purple-200: #E5C0FC;
  --purple-300: #D18FFA;
  --purple-400: #B955F7;
  --purple-500: #A524F5;
  --purple-600: #880AD6;
  --purple-700: #6C08AA;
  --purple-800: #4D067A;
  --purple-900: #31044E;
  --purple-950: #1F0231;
}

Generate More Shades Create Palette Convert Color