Purple

#AD1AC7

Pink

Color Codes

All color formats for development

HEX

#AD1AC7

RGB

rgb(173, 26, 199)

HSL

hsl(291, 77%, 44%)

OKLCH

oklch(0.55 0.249 320.6)

CMYK

cmyk(13%, 87%, 0%, 22%)

Accessibility

WCAG contrast compliance

On White Background

5.60:1

AA ✓AAA ✗

On Black Background

3.75:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF1

100

#F7DF

200

#F0C4

300

#E497

400

#D661

500

#CA34

600

#AD1A

700

#8915

800

#620F

900

#3F09

950

#2706

Shades

Darker variations

1#9B17B3

2#8A159F

3#79128B

4#680F77

5#560D63

6#450A4F

7#34083C

8#230528

9#110314

Tints

Lighter variations

1#C31DE0

2#CA35E5

3#D14EE8

4#D867EB

5#DE81EF

6#E59AF2

7#EBB3F5

8#F2CCF8

9#F8E6FC

Tones

Muted variations

1#A722BE

2#A12BB5

3#9B34AD

4#943CA4

5#8E459B

6#884E93

7#82568A

8#7C5F81

9#766879

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF1 `#FBF1FD`	BackgroundsSubtle highlightsCard backgrounds
100	F7DF `#F7DFFB`	Light backgroundsTable row hoverSkeleton loading
200	F0C4 `#F0C4F7`	Secondary backgroundsInput backgroundsDividers
300	E497 `#E497F2`	BordersInactive statesPlaceholder text
400	D661 `#D661EA`	Disabled statesSecondary iconsMuted text
500	CA34 `#CA34E5`	Primary brand colorCTAsActive elementsLinks
600	AD1A `#AD1AC7`	Hover statesFocus ringsPrimary buttons hover
700	8915 `#89159E`	Active/pressed statesDark mode accentsSecondary text
800	620F `#620F71`	Text on light backgroundsHeadingsStrong borders
900	3F09 `#3F0948`	Primary textHigh emphasis contentDark headings
950	2706 `#27062D`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FD;
  --purple-100: #F7DFFB;
  --purple-200: #F0C4F7;
  --purple-300: #E497F2;
  --purple-400: #D661EA;
  --purple-500: #CA34E5;
  --purple-600: #AD1AC7;
  --purple-700: #89159E;
  --purple-800: #620F71;
  --purple-900: #3F0948;
  --purple-950: #27062D;
}

Generate More Shades Create Palette Convert Color