Purple

#A91BC5

Pink

Color Codes

All color formats for development

HEX
#A91BC5
RGB
rgb(169, 27, 197)
HSL
hsl(290, 76%, 44%)
OKLCH
oklch(0.543 0.246 319.8)
CMYK
cmyk(14%, 86%, 0%, 23%)

Accessibility

WCAG contrast compliance

On White Background

5.75:1

AA AAA

On Black Background

3.65:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FBF2
100
#F6E0
200
#EFC5
300
#E298
400
#D362
500
#C635
600
#A91B
700
#8615
800
#600F
900
#3D0A
950
#2606

Shades

Darker variations

1#9818B2
2#87169E
3#76138A
4#651076
5#550D63
6#440B4F
7#33083B
8#220527
9#110314

Tints

Lighter variations

1#BF1EDF
2#C736E4
3#CE4FE7
4#D568EA
5#DC81EE
6#E39AF1
7#EAB4F5
8#F1CDF8
9#F8E6FC

Tones

Muted variations

1#A323BD
2#9E2CB4
3#9835AC
4#923DA3
5#8D469B
6#874E92
7#81578A
8#7C5F81
9#766879

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FBF2
#FBF2FD
BackgroundsSubtle highlightsCard backgrounds
100
F6E0
#F6E0FB
Light backgroundsTable row hoverSkeleton loading
200
EFC5
#EFC5F7
Secondary backgroundsInput backgroundsDividers
300
E298
#E298F1
BordersInactive statesPlaceholder text
400
D362
#D362EA
Disabled statesSecondary iconsMuted text
500
C635
#C635E3
Primary brand colorCTAsActive elementsLinks
600
A91B
#A91BC5
Hover statesFocus ringsPrimary buttons hover
700
8615
#86159D
Active/pressed statesDark mode accentsSecondary text
800
600F
#600F70
Text on light backgroundsHeadingsStrong borders
900
3D0A
#3D0A48
Primary textHigh emphasis contentDark headings
950
2606
#26062D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF2FD;
  --purple-100: #F6E0FB;
  --purple-200: #EFC5F7;
  --purple-300: #E298F1;
  --purple-400: #D362EA;
  --purple-500: #C635E3;
  --purple-600: #A91BC5;
  --purple-700: #86159D;
  --purple-800: #600F70;
  --purple-900: #3D0A48;
  --purple-950: #26062D;
}
Generate More ShadesCreate PaletteConvert Color