Purple

#9F12CE

Pink

Color Codes

All color formats for development

HEX

#9F12CE

RGB

rgb(159, 18, 206)

HSL

hsl(285, 84%, 44%)

OKLCH

oklch(0.531 0.254 314.4)

CMYK

cmyk(23%, 91%, 0%, 19%)

Accessibility

WCAG contrast compliance

On White Background

6.08:1

AA ✓AAA ✗

On Black Background

3.45:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF1

100

#F5DE

200

#ECC2

300

#DD93

400

#CB5B

500

#BC2C

600

#9F12

700

#7F0E

800

#5B0A

900

#3A07

950

#2404

Shades

Darker variations

1#8F10BA

2#7F0EA5

3#700D91

4#600B7C

5#500967

6#400753

7#30053E

8#200429

9#100215

Tints

Lighter variations

1#B414E9

2#BD2DED

3#C547EF

4#CD61F1

5#D67CF4

6#DE96F6

7#E6B0F8

8#EECAFA

9#F7E5FD

Tones

Muted variations

1#9B1BC5

2#9625BC

3#912EB2

4#8C38A9

5#88419F

6#834B96

7#7E548C

8#7A5D83

9#75677A

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF1 `#FBF1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F5DE `#F5DEFC`	Light backgroundsTable row hoverSkeleton loading
200	ECC2 `#ECC2FA`	Secondary backgroundsInput backgroundsDividers
300	DD93 `#DD93F6`	BordersInactive statesPlaceholder text
400	CB5B `#CB5BF1`	Disabled statesSecondary iconsMuted text
500	BC2C `#BC2CED`	Primary brand colorCTAsActive elementsLinks
600	9F12 `#9F12CE`	Hover statesFocus ringsPrimary buttons hover
700	7F0E `#7F0EA4`	Active/pressed statesDark mode accentsSecondary text
800	5B0A `#5B0A75`	Text on light backgroundsHeadingsStrong borders
900	3A07 `#3A074B`	Primary textHigh emphasis contentDark headings
950	2404 `#24042F`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FE;
  --purple-100: #F5DEFC;
  --purple-200: #ECC2FA;
  --purple-300: #DD93F6;
  --purple-400: #CB5BF1;
  --purple-500: #BC2CED;
  --purple-600: #9F12CE;
  --purple-700: #7F0EA4;
  --purple-800: #5B0A75;
  --purple-900: #3A074B;
  --purple-950: #24042F;
}

Generate More Shades Create Palette Convert Color