Purple

#A21096

Pink

Color Codes

All color formats for development

HEX
#A21096
RGB
rgb(162, 16, 150)
HSL
hsl(305, 82%, 35%)
OKLCH
oklch(0.497 0.215 332.4)
CMYK
cmyk(0%, 90%, 7%, 36%)

Accessibility

WCAG contrast compliance

On White Background

6.88:1

AA AAA

On Black Background

3.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FCDF
200
#F9C3
300
#F494
400
#EF5D
500
#EA2E
600
#CC14
700
#A210
800
#740B
900
#4A07
950
#2E05

Shades

Darker variations

1#920E87
2#820D78
3#720B69
4#610A5A
5#51084B
6#41063C
7#31052D
8#20031E
9#10020F

Tints

Lighter variations

1#C113B2
2#DF16CE
3#EA2CDA
4#ED4AE0
5#F068E5
6#F386EA
7#F6A5EF
8#F9C3F5
9#FCE1FA

Tones

Muted variations

1#9B1790
2#941F8A
3#8C2684
4#852D7E
5#7E3578
6#773C72
7#6F436C
8#684B65
9#61525F

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FD
BackgroundsSubtle highlightsCard backgrounds
100
FCDF
#FCDFF9
Light backgroundsTable row hoverSkeleton loading
200
F9C3
#F9C3F5
Secondary backgroundsInput backgroundsDividers
300
F494
#F494EC
BordersInactive statesPlaceholder text
400
EF5D
#EF5DE3
Disabled statesSecondary iconsMuted text
500
EA2E
#EA2EDB
Primary brand colorCTAsActive elementsLinks
600
CC14
#CC14BD
Hover statesFocus ringsPrimary buttons hover
700
A210
#A21096
Active/pressed statesDark mode accentsSecondary text
800
740B
#740B6B
Text on light backgroundsHeadingsStrong borders
900
4A07
#4A0745
Primary textHigh emphasis contentDark headings
950
2E05
#2E052B
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FD;
  --purple-100: #FCDFF9;
  --purple-200: #F9C3F5;
  --purple-300: #F494EC;
  --purple-400: #EF5DE3;
  --purple-500: #EA2EDB;
  --purple-600: #CC14BD;
  --purple-700: #A21096;
  --purple-800: #740B6B;
  --purple-900: #4A0745;
  --purple-950: #2E052B;
}
Generate More ShadesCreate PaletteConvert Color