Purple

#A316CA

Pink

Color Codes

All color formats for development

HEX

#A316CA

RGB

rgb(163, 22, 202)

HSL

hsl(287, 80%, 44%)

OKLCH

oklch(0.535 0.25 316.7)

CMYK

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

Accessibility

WCAG contrast compliance

On White Background

5.96:1

AA ✓AAA ✗

On Black Background

3.52:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FBF1

100

#F5DF

200

#EDC3

300

#DF95

400

#CE5E

500

#C030

600

#A316

700

#8212

800

#5D0D

900

#3B08

950

#2505

Shades

Darker variations

1#9314B6

2#8212A2

3#72108D

4#620D79

5#520B65

6#410951

7#31073D

8#210428

9#100214

Tints

Lighter variations

1#B819E4

2#C131E8

3#C84BEB

4#D065EE

5#D87EF1

6#E098F4

7#E8B2F6

8#EFCCF9

9#F7E5FC

Tones

Muted variations

1#9E1FC1

2#9928B8

3#9431AF

4#8F3AA6

5#8A439D

6#854C94

7#7F558B

8#7A5E82

9#756779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FBF1 `#FBF1FD`	BackgroundsSubtle highlightsCard backgrounds
100	F5DF `#F5DFFB`	Light backgroundsTable row hoverSkeleton loading
200	EDC3 `#EDC3F8`	Secondary backgroundsInput backgroundsDividers
300	DF95 `#DF95F3`	BordersInactive statesPlaceholder text
400	CE5E `#CE5EED`	Disabled statesSecondary iconsMuted text
500	C030 `#C030E8`	Primary brand colorCTAsActive elementsLinks
600	A316 `#A316CA`	Hover statesFocus ringsPrimary buttons hover
700	8212 `#8212A1`	Active/pressed statesDark mode accentsSecondary text
800	5D0D `#5D0D73`	Text on light backgroundsHeadingsStrong borders
900	3B08 `#3B0849`	Primary textHigh emphasis contentDark headings
950	2505 `#25052E`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF1FD;
  --purple-100: #F5DFFB;
  --purple-200: #EDC3F8;
  --purple-300: #DF95F3;
  --purple-400: #CE5EED;
  --purple-500: #C030E8;
  --purple-600: #A316CA;
  --purple-700: #8212A1;
  --purple-800: #5D0D73;
  --purple-900: #3B0849;
  --purple-950: #25052E;
}

Generate More Shades Create Palette Convert Color