Purple

#A403B0

Pink

Color Codes

All color formats for development

HEX

#A403B0

RGB

rgb(164, 3, 176)

HSL

hsl(296, 97%, 35%)

OKLCH

oklch(0.513 0.239 324.6)

CMYK

cmyk(7%, 98%, 0%, 31%)

Accessibility

WCAG contrast compliance

On White Background

6.52:1

AA ✓AAA ✗

On Black Background

3.22:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FEF0

100

#FCDC

200

#FABE

300

#F68B

400

#F14F

500

#ED1D

600

#CF03

700

#A403

800

#7502

900

#4B01

950

#2F01

Shades

Darker variations

1#94029E

2#83028D

3#73027B

4#630269

5#520158

6#420146

7#310135

8#210123

9#100012

Tints

Lighter variations

1#C303D0

2#E104F1

3#ED1AFC

4#EF3BFC

5#F25CFD

6#F47CFD

7#F79DFE

8#FABEFE

9#FCDEFF

Tones

Muted variations

1#9D0BA7

2#95149F

3#8E1D96

4#86258D

5#7F2E85

6#77377C

7#703F73

8#68486B

9#615162

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FEF0 `#FEF0FF`	BackgroundsSubtle highlightsCard backgrounds
100	FCDC `#FCDCFE`	Light backgroundsTable row hoverSkeleton loading
200	FABE `#FABEFE`	Secondary backgroundsInput backgroundsDividers
300	F68B `#F68BFD`	BordersInactive statesPlaceholder text
400	F14F `#F14FFC`	Disabled statesSecondary iconsMuted text
500	ED1D `#ED1DFC`	Primary brand colorCTAsActive elementsLinks
600	CF03 `#CF03DD`	Hover statesFocus ringsPrimary buttons hover
700	A403 `#A403B0`	Active/pressed statesDark mode accentsSecondary text
800	7502 `#75027E`	Text on light backgroundsHeadingsStrong borders
900	4B01 `#4B0150`	Primary textHigh emphasis contentDark headings
950	2F01 `#2F0132`	Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF0FF;
  --purple-100: #FCDCFE;
  --purple-200: #FABEFE;
  --purple-300: #F68BFD;
  --purple-400: #F14FFC;
  --purple-500: #ED1DFC;
  --purple-600: #CF03DD;
  --purple-700: #A403B0;
  --purple-800: #75027E;
  --purple-900: #4B0150;
  --purple-950: #2F0132;
}

Generate More Shades Create Palette Convert Color