Purple

#A0136A

Pink

Color Codes

All color formats for development

HEX
#A0136A
RGB
rgb(160, 19, 106)
HSL
hsl(323, 79%, 35%)
OKLCH
oklch(0.473 0.186 349.9)
CMYK
cmyk(0%, 88%, 34%, 37%)

Accessibility

WCAG contrast compliance

On White Background

7.51:1

AA AAA

On Black Background

2.80: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#90115F
2#800F55
3#700D4A
4#600B3F
5#500935
6#40072A
7#300620
8#200415
9#10020B

Tints

Lighter variations

1#BD167D
2#DB1A91
3#E72FA0
4#EA4DAE
5#EE6BBB
6#F188C9
7#F5A6D6
8#F8C4E4
9#FCE1F1

Tones

Muted variations

1#991A68
2#922166
3#8B2865
4#842F63
5#7D3661
6#753D60
7#6E445E
8#674B5D
9#60525B

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F9
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFF0
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4E4
Secondary backgroundsInput backgroundsDividers
300
F396
#F396CF
BordersInactive statesPlaceholder text
400
EC5F
#EC5FB6
Disabled statesSecondary iconsMuted text
500
E732
#E732A1
Primary brand colorCTAsActive elementsLinks
600
C918
#C91885
Hover statesFocus ringsPrimary buttons hover
700
A013
#A0136A
Active/pressed statesDark mode accentsSecondary text
800
720D
#720D4C
Text on light backgroundsHeadingsStrong borders
900
4909
#490930
Primary textHigh emphasis contentDark headings
950
2E05
#2E051E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1F9;
  --purple-100: #FBDFF0;
  --purple-200: #F8C4E4;
  --purple-300: #F396CF;
  --purple-400: #EC5FB6;
  --purple-500: #E732A1;
  --purple-600: #C91885;
  --purple-700: #A0136A;
  --purple-800: #720D4C;
  --purple-900: #490930;
  --purple-950: #2E051E;
}
Generate More ShadesCreate PaletteConvert Color