Purple

#9606AC

Pink

Color Codes

All color formats for development

HEX

#9606AC

RGB

rgb(150, 6, 172)

HSL

hsl(292, 93%, 35%)

OKLCH

oklch(0.489 0.23 321.1)

CMYK

cmyk(13%, 97%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

7.20:1

AA ✓AAA ✓

On Black Background

2.92:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FDF0

100

#F9DD

200

#F4BF

300

#EC8E

400

#E353

500

#DB22

600

#BD08

700

#9606

800

#6B04

900

#4503

950

#2B02

Shades

Darker variations

1#87069B

2#78058A

3#690479

4#5A0467

5#4B0356

6#3C0245

7#2D0234

8#1E0122

9#0F0111

Tints

Lighter variations

1#B207CC

2#CE09EC

3#DA1FF7

4#DF3FF8

5#E55FF9

6#EA7FFA

7#EF9FFC

8#F4BFFD

9#FADFFE

Tones

Muted variations

1#900FA4

2#8A179C

3#841F93

4#7E278B

5#783083

6#72387A

7#6C4072

8#65496A

9#5F5162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FDF0 `#FDF0FE`	BackgroundsSubtle highlightsCard backgrounds
100	F9DD `#F9DDFE`	Light backgroundsTable row hoverSkeleton loading
200	F4BF `#F4BFFD`	Secondary backgroundsInput backgroundsDividers
300	EC8E `#EC8EFB`	BordersInactive statesPlaceholder text
400	E353 `#E353F9`	Disabled statesSecondary iconsMuted text
500	DB22 `#DB22F7`	Primary brand colorCTAsActive elementsLinks
600	BD08 `#BD08D9`	Hover statesFocus ringsPrimary buttons hover
700	9606 `#9606AC`	Active/pressed statesDark mode accentsSecondary text
800	6B04 `#6B047B`	Text on light backgroundsHeadingsStrong borders
900	4503 `#45034F`	Primary textHigh emphasis contentDark headings
950	2B02 `#2B0231`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF0FE;
  --purple-100: #F9DDFE;
  --purple-200: #F4BFFD;
  --purple-300: #EC8EFB;
  --purple-400: #E353F9;
  --purple-500: #DB22F7;
  --purple-600: #BD08D9;
  --purple-700: #9606AC;
  --purple-800: #6B047B;
  --purple-900: #45034F;
  --purple-950: #2B0231;
}

Generate More Shades Create Palette Convert Color