Purple

#A21061

Pink

Color Codes

All color formats for development

HEX
#A21061
RGB
rgb(162, 16, 97)
HSL
hsl(327, 82%, 35%)
OKLCH
oklch(0.471 0.185 354.6)
CMYK
cmyk(0%, 90%, 40%, 36%)

Accessibility

WCAG contrast compliance

On White Background

7.55:1

AA AAA

On Black Background

2.78: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#920E57
2#820D4D
3#720B44
4#610A3A
5#510830
6#410627
7#31051D
8#200313
9#10020A

Tints

Lighter variations

1#C11373
2#DF1684
3#EA2C94
4#ED4AA4
5#F068B3
6#F386C2
7#F6A5D1
8#F9C3E1
9#FCE1F0

Tones

Muted variations

1#9B1760
2#941F5F
3#8C265E
4#852D5E
5#7E355D
6#773C5C
7#6F435B
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
#F494C9
BordersInactive statesPlaceholder text
400
EF5D
#EF5DAD
Disabled statesSecondary iconsMuted text
500
EA2E
#EA2E96
Primary brand colorCTAsActive elementsLinks
600
CC14
#CC1479
Hover statesFocus ringsPrimary buttons hover
700
A210
#A21061
Active/pressed statesDark mode accentsSecondary text
800
740B
#740B45
Text on light backgroundsHeadingsStrong borders
900
4A07
#4A072C
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: #F494C9;
  --purple-400: #EF5DAD;
  --purple-500: #EA2E96;
  --purple-600: #CC1479;
  --purple-700: #A21061;
  --purple-800: #740B45;
  --purple-900: #4A072C;
  --purple-950: #2E051C;
}
Generate More ShadesCreate PaletteConvert Color