Purple

#880CD4

Purple

Color Codes

All color formats for development

HEX

#880CD4

RGB

rgb(136, 12, 212)

HSL

hsl(277, 89%, 44%)

OKLCH

oklch(0.503 0.255 305.2)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

6.88:1

AA ✓AAA ✗

On Black Background

3.05:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#F9F1

100

#F1DD

200

#E5C0

300

#D190

400

#B856

500

#A426

600

#880C

700

#6C0A

800

#4D07

900

#3104

950

#1F03

Shades

Darker variations

1#7A0BBF

2#6C0AAA

3#5F0994

4#51077F

5#44066A

6#360555

7#290440

8#1B022A

9#0E0115

Tints

Lighter variations

1#990EEF

2#A427F2

3#B042F4

4#BB5DF6

5#C678F7

6#D293F9

7#DDAEFA

8#E8C9FC

9#F4E4FD

Tones

Muted variations

1#8516CA

2#8320C0

3#812AB6

4#7E34AC

5#7C3EA2

6#7A4898

7#77528E

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	E5C0 `#E5C0FB`	Secondary backgroundsInput backgroundsDividers
300	D190 `#D190F9`	BordersInactive statesPlaceholder text
400	B856 `#B856F5`	Disabled statesSecondary iconsMuted text
500	A426 `#A426F2`	Primary brand colorCTAsActive elementsLinks
600	880C `#880CD4`	Hover statesFocus ringsPrimary buttons hover
700	6C0A `#6C0AA9`	Active/pressed statesDark mode accentsSecondary text
800	4D07 `#4D0778`	Text on light backgroundsHeadingsStrong borders
900	3104 `#31044D`	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: #E5C0FB;
  --purple-300: #D190F9;
  --purple-400: #B856F5;
  --purple-500: #A426F2;
  --purple-600: #880CD4;
  --purple-700: #6C0AA9;
  --purple-800: #4D0778;
  --purple-900: #31044D;
  --purple-950: #1F0330;
}

Generate More Shades Create Palette Convert Color