Purple

#9A1CC4

Pink

Color Codes

All color formats for development

HEX

#9A1CC4

RGB

rgb(154, 28, 196)

HSL

hsl(285, 75%, 44%)

OKLCH

oklch(0.521 0.239 315.1)

CMYK

cmyk(21%, 86%, 0%, 23%)

Accessibility

WCAG contrast compliance

On White Background

6.29:1

AA ✓AAA ✗

On Black Background

3.34:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FAF2

100

#F4E0

200

#EAC5

300

#DA98

400

#C763

500

#B736

600

#9A1C

700

#7B16

800

#5810

900

#380A

950

#2306

Shades

Darker variations

1#8B19B1

2#7B169D

3#6C1489

4#5D1176

5#4D0E62

6#3E0B4F

7#2E083B

8#1F0627

9#0F0314

Tints

Lighter variations

1#AE20DD

2#B837E2

3#C150E6

4#C969EA

5#D282ED

6#DB9BF1

7#E4B4F4

8#EDCDF8

9#F6E6FB

Tones

Muted variations

1#9624BC

2#922DB4

3#8E35AB

4#893EA3

5#85469A

6#814F92

7#7D5789

8#795F81

9#746879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FAF2 `#FAF2FD`	BackgroundsSubtle highlightsCard backgrounds
100	F4E0 `#F4E0FB`	Light backgroundsTable row hoverSkeleton loading
200	EAC5 `#EAC5F7`	Secondary backgroundsInput backgroundsDividers
300	DA98 `#DA98F0`	BordersInactive statesPlaceholder text
400	C763 `#C763E9`	Disabled statesSecondary iconsMuted text
500	B736 `#B736E2`	Primary brand colorCTAsActive elementsLinks
600	9A1C `#9A1CC4`	Hover statesFocus ringsPrimary buttons hover
700	7B16 `#7B169C`	Active/pressed statesDark mode accentsSecondary text
800	5810 `#581070`	Text on light backgroundsHeadingsStrong borders
900	380A `#380A47`	Primary textHigh emphasis contentDark headings
950	2306 `#23062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FAF2FD;
  --purple-100: #F4E0FB;
  --purple-200: #EAC5F7;
  --purple-300: #DA98F0;
  --purple-400: #C763E9;
  --purple-500: #B736E2;
  --purple-600: #9A1CC4;
  --purple-700: #7B169C;
  --purple-800: #581070;
  --purple-900: #380A47;
  --purple-950: #23062D;
}

Generate More Shades Create Palette Convert Color