Purple

#AC16CA

Pink

Color Codes

All color formats for development

HEX

#AC16CA

RGB

rgb(172, 22, 202)

HSL

hsl(290, 80%, 44%)

OKLCH

oklch(0.549 0.253 319.5)

CMYK

cmyk(15%, 89%, 0%, 21%)

Accessibility

WCAG contrast compliance

On White Background

5.64:1

AA ✓AAA ✗

On Black Background

3.72:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF1

100

#F7DF

200

#F0C3

300

#E495

400

#D55E

500

#C930

600

#AC16

700

#8912

800

#620D

900

#3F08

950

#2705

Shades

Darker variations

1#9B14B6

2#8A12A2

3#78108D

4#670D79

5#560B65

6#450951

7#34073D

8#220428

9#110214

Tints

Lighter variations

1#C219E4

2#CA31E8

3#D04BEB

4#D765EE

5#DE7EF1

6#E498F4

7#EBB2F6

8#F2CCF9

9#F8E5FC

Tones

Muted variations

1#A61FC1

2#A028B8

3#9A31AF

4#943AA6

5#8E439D

6#884C94

7#82558B

8#7C5E82

9#766779

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	F0C3 `#F0C3F8`	Secondary backgroundsInput backgroundsDividers
300	E495 `#E495F3`	BordersInactive statesPlaceholder text
400	D55E `#D55EED`	Disabled statesSecondary iconsMuted text
500	C930 `#C930E8`	Primary brand colorCTAsActive elementsLinks
600	AC16 `#AC16CA`	Hover statesFocus ringsPrimary buttons hover
700	8912 `#8912A1`	Active/pressed statesDark mode accentsSecondary text
800	620D `#620D73`	Text on light backgroundsHeadingsStrong borders
900	3F08 `#3F0849`	Primary textHigh emphasis contentDark headings
950	2705 `#27052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FD;
  --purple-100: #F7DFFB;
  --purple-200: #F0C3F8;
  --purple-300: #E495F3;
  --purple-400: #D55EED;
  --purple-500: #C930E8;
  --purple-600: #AC16CA;
  --purple-700: #8912A1;
  --purple-800: #620D73;
  --purple-900: #3F0849;
  --purple-950: #27052E;
}

Generate More Shades Create Palette Convert Color