Purple

#AE14CC

Pink

Color Codes

All color formats for development

HEX

#AE14CC

RGB

rgb(174, 20, 204)

HSL

hsl(290, 82%, 44%)

OKLCH

oklch(0.552 0.256 319.7)

CMYK

cmyk(15%, 90%, 0%, 20%)

Accessibility

WCAG contrast compliance

On White Background

5.57:1

AA ✓AAA ✗

On Black Background

3.77:1

AA ✗AAA ✗

Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

Copy

CopyBase

Copy

#FCF1

100

#F7DF

200

#F0C3

300

#E494

400

#D75D

500

#CB2E

600

#AE14

700

#8A10

800

#630B

900

#3F07

950

#2705

Shades

Darker variations

1#9C12B8

2#8B10A3

3#790E8F

4#680C7B

5#570A66

6#450852

7#34063D

8#230429

9#110214

Tints

Lighter variations

1#C417E6

2#CB2FEA

3#D249ED

4#D863F0

5#DF7DF2

6#E597F5

7#ECB1F7

8#F2CBFA

9#F9E5FC

Tones

Muted variations

1#A71DC3

2#A127BA

3#9B30B1

4#9539A7

5#8F429E

6#894B95

7#83558C

8#7C5E83

9#766779

Usage Guidelines

Recommended use cases for each shade level

Level	Color	Typical Use Cases
50	FCF1 `#FCF1FE`	BackgroundsSubtle highlightsCard backgrounds
100	F7DF `#F7DFFC`	Light backgroundsTable row hoverSkeleton loading
200	F0C3 `#F0C3F9`	Secondary backgroundsInput backgroundsDividers
300	E494 `#E494F4`	BordersInactive statesPlaceholder text
400	D75D `#D75DEF`	Disabled statesSecondary iconsMuted text
500	CB2E `#CB2EEA`	Primary brand colorCTAsActive elementsLinks
600	AE14 `#AE14CC`	Hover statesFocus ringsPrimary buttons hover
700	8A10 `#8A10A2`	Active/pressed statesDark mode accentsSecondary text
800	630B `#630B74`	Text on light backgroundsHeadingsStrong borders
900	3F07 `#3F074A`	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: #FCF1FE;
  --purple-100: #F7DFFC;
  --purple-200: #F0C3F9;
  --purple-300: #E494F4;
  --purple-400: #D75DEF;
  --purple-500: #CB2EEA;
  --purple-600: #AE14CC;
  --purple-700: #8A10A2;
  --purple-800: #630B74;
  --purple-900: #3F074A;
  --purple-950: #27052E;
}

Generate More Shades Create Palette Convert Color