Purple

#9507AB

Pink

Color Codes

All color formats for development

HEX
#9507AB
RGB
rgb(149, 7, 171)
HSL
hsl(292, 92%, 35%)
OKLCH
oklch(0.487 0.229 321)
CMYK
cmyk(13%, 96%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

7.25:1

AA AAA

On Black Background

2.90:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF0
100
#F9DD
200
#F4BF
300
#EC8E
400
#E254
500
#DA23
600
#BC09
700
#9507
800
#6B05
900
#4403
950
#2B02

Shades

Darker variations

1#87069A
2#780689
3#690578
4#5A0467
5#4B0456
6#3C0345
7#2D0233
8#1E0122
9#0F0111

Tints

Lighter variations

1#B108CB
2#CD0AEB
3#D920F6
4#DF40F7
5#E460F8
6#E980FA
7#EFA0FB
8#F4BFFC
9#FADFFE

Tones

Muted variations

1#8F0FA3
2#89189B
3#832093
4#7D288B
5#773082
6#71387A
7#6B4172
8#65496A
9#5F5161

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF0
#FDF0FE
BackgroundsSubtle highlightsCard backgrounds
100
F9DD
#F9DDFE
Light backgroundsTable row hoverSkeleton loading
200
F4BF
#F4BFFC
Secondary backgroundsInput backgroundsDividers
300
EC8E
#EC8EFA
BordersInactive statesPlaceholder text
400
E254
#E254F8
Disabled statesSecondary iconsMuted text
500
DA23
#DA23F6
Primary brand colorCTAsActive elementsLinks
600
BC09
#BC09D7
Hover statesFocus ringsPrimary buttons hover
700
9507
#9507AB
Active/pressed statesDark mode accentsSecondary text
800
6B05
#6B057A
Text on light backgroundsHeadingsStrong borders
900
4403
#44034E
Primary textHigh emphasis contentDark headings
950
2B02
#2B0231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF0FE;
  --purple-100: #F9DDFE;
  --purple-200: #F4BFFC;
  --purple-300: #EC8EFA;
  --purple-400: #E254F8;
  --purple-500: #DA23F6;
  --purple-600: #BC09D7;
  --purple-700: #9507AB;
  --purple-800: #6B057A;
  --purple-900: #44034E;
  --purple-950: #2B0231;
}
Generate More ShadesCreate PaletteConvert Color