Purple

#A0137A

Pink

Color Codes

All color formats for development

HEX
#A0137A
RGB
rgb(160, 19, 122)
HSL
hsl(316, 79%, 35%)
OKLCH
oklch(0.48 0.195 342.8)
CMYK
cmyk(0%, 88%, 24%, 37%)

Accessibility

WCAG contrast compliance

On White Background

7.32:1

AA AAA

On Black Background

2.87:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F8C4
300
#F396
400
#EC5F
500
#E732
600
#C918
700
#A013
800
#720D
900
#4909
950
#2E05

Shades

Darker variations

1#90116E
2#800F62
3#700D56
4#600B49
5#50093D
6#400731
7#300625
8#200418
9#10020C

Tints

Lighter variations

1#BD1691
2#DB1AA8
3#E72FB6
4#EA4DC0
5#EE6BCB
6#F188D5
7#F5A6E0
8#F8C4EA
9#FCE1F5

Tones

Muted variations

1#991A77
2#922174
3#8B2870
4#842F6D
5#7D366A
6#753D66
7#6E4463
8#674B60
9#60525D

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FA
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF4
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4EA
Secondary backgroundsInput backgroundsDividers
300
F396
#F396DA
BordersInactive statesPlaceholder text
400
EC5F
#EC5FC7
Disabled statesSecondary iconsMuted text
500
E732
#E732B7
Primary brand colorCTAsActive elementsLinks
600
C918
#C9189A
Hover statesFocus ringsPrimary buttons hover
700
A013
#A0137A
Active/pressed statesDark mode accentsSecondary text
800
720D
#720D57
Text on light backgroundsHeadingsStrong borders
900
4909
#490938
Primary textHigh emphasis contentDark headings
950
2E05
#2E0523
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FA;
  --purple-100: #FBDFF4;
  --purple-200: #F8C4EA;
  --purple-300: #F396DA;
  --purple-400: #EC5FC7;
  --purple-500: #E732B7;
  --purple-600: #C9189A;
  --purple-700: #A0137A;
  --purple-800: #720D57;
  --purple-900: #490938;
  --purple-950: #2E0523;
}
Generate More ShadesCreate PaletteConvert Color