Purple

#A21063

Pink

Color Codes

All color formats for development

HEX
#A21063
RGB
rgb(162, 16, 99)
HSL
hsl(326, 82%, 35%)
OKLCH
oklch(0.472 0.186 353.7)
CMYK
cmyk(0%, 90%, 39%, 36%)

Accessibility

WCAG contrast compliance

On White Background

7.53:1

AA AAA

On Black Background

2.79: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#920E59
2#820D4F
3#720B45
4#610A3B
5#510832
6#410628
7#31051E
8#200314
9#10020A

Tints

Lighter variations

1#C11375
2#DF1688
3#EA2C98
4#ED4AA6
5#F068B5
6#F386C4
7#F6A5D3
8#F9C3E1
9#FCE1F0

Tones

Muted variations

1#9B1762
2#941F61
3#8C2660
4#852D5F
5#7E355E
6#773C5D
7#6F435C
8#684B5B
9#61525A

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F8
BackgroundsSubtle highlightsCard backgrounds
100
FCDF
#FCDFEF
Light backgroundsTable row hoverSkeleton loading
200
F9C3
#F9C3E1
Secondary backgroundsInput backgroundsDividers
300
F494
#F494CB
BordersInactive statesPlaceholder text
400
EF5D
#EF5DB0
Disabled statesSecondary iconsMuted text
500
EA2E
#EA2E99
Primary brand colorCTAsActive elementsLinks
600
CC14
#CC147C
Hover statesFocus ringsPrimary buttons hover
700
A210
#A21063
Active/pressed statesDark mode accentsSecondary text
800
740B
#740B47
Text on light backgroundsHeadingsStrong borders
900
4A07
#4A072D
Primary textHigh emphasis contentDark headings
950
2E05
#2E051C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1F8;
  --purple-100: #FCDFEF;
  --purple-200: #F9C3E1;
  --purple-300: #F494CB;
  --purple-400: #EF5DB0;
  --purple-500: #EA2E99;
  --purple-600: #CC147C;
  --purple-700: #A21063;
  --purple-800: #740B47;
  --purple-900: #4A072D;
  --purple-950: #2E051C;
}
Generate More ShadesCreate PaletteConvert Color