Purple

#880BD5

Purple

Color Codes

All color formats for development

HEX

#880BD5

RGB

rgb(136, 11, 213)

HSL

hsl(277, 90%, 44%)

OKLCH

oklch(0.503 0.256 304.9)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

6.87: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

#D190

400

#B855

500

#A425

600

#880B

700

#6C09

800

#4D06

900

#3104

950

#1F03

Shades

Darker variations

1#7A0AC0

2#6D09AB

3#5F0895

4#510780

5#44066B

6#360455

7#290340

8#1B022B

9#0E0115

Tints

Lighter variations

1#990DF0

2#A526F4

3#B041F5

4#BB5CF6

5#C777F8

6#D292F9

7#DDAEFB

8#E8C9FC

9#F4E4FE

Tones

Muted variations

1#8515CB

2#831FC1

3#812AB7

4#7E34AD

5#7C3EA3

6#7A4899

7#77528E

8#755C84

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	D190 `#D190F9`	BordersInactive statesPlaceholder text
400	B855 `#B855F6`	Disabled statesSecondary iconsMuted text
500	A425 `#A425F4`	Primary brand colorCTAsActive elementsLinks
600	880B `#880BD5`	Hover statesFocus ringsPrimary buttons hover
700	6C09 `#6C09AA`	Active/pressed statesDark mode accentsSecondary text
800	4D06 `#4D0679`	Text on light backgroundsHeadingsStrong borders
900	3104 `#31044E`	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: #F9F0FE;
  --purple-100: #F1DDFD;
  --purple-200: #E5C0FC;
  --purple-300: #D190F9;
  --purple-400: #B855F6;
  --purple-500: #A425F4;
  --purple-600: #880BD5;
  --purple-700: #6C09AA;
  --purple-800: #4D0679;
  --purple-900: #31044E;
  --purple-950: #1F0330;
}

Generate More Shades Create Palette Convert Color