Purple

#9D08AA

Pink

Color Codes

All color formats for development

HEX
#9D08AA
RGB
rgb(157, 8, 170)
HSL
hsl(295, 91%, 35%)
OKLCH
oklch(0.499 0.231 324.1)
CMYK
cmyk(8%, 95%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

6.89:1

AA AAA

On Black Background

3.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF0
100
#FBDD
200
#F7C0
300
#F18F
400
#E955
500
#E324
600
#C50A
700
#9D08
800
#7006
900
#4804
950
#2D02

Shades

Darker variations

1#8D0799
2#7E0688
3#6E0677
4#5E0566
5#4E0455
6#3F0344
7#2F0233
8#1F0222
9#100111

Tints

Lighter variations

1#BA0ACA
2#D70BEA
3#E321F5
4#E741F6
5#EB61F8
6#EF80F9
7#F3A0FB
8#F7C0FC
9#FBDFFE

Tones

Muted variations

1#9610A2
2#8F189A
3#892092
4#82298A
5#7B3182
6#74397A
7#6E4172
8#674969
9#605161

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF0
#FDF0FE
BackgroundsSubtle highlightsCard backgrounds
100
FBDD
#FBDDFD
Light backgroundsTable row hoverSkeleton loading
200
F7C0
#F7C0FC
Secondary backgroundsInput backgroundsDividers
300
F18F
#F18FFA
BordersInactive statesPlaceholder text
400
E955
#E955F7
Disabled statesSecondary iconsMuted text
500
E324
#E324F5
Primary brand colorCTAsActive elementsLinks
600
C50A
#C50AD6
Hover statesFocus ringsPrimary buttons hover
700
9D08
#9D08AA
Active/pressed statesDark mode accentsSecondary text
800
7006
#70067A
Text on light backgroundsHeadingsStrong borders
900
4804
#48044E
Primary textHigh emphasis contentDark headings
950
2D02
#2D0231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF0FE;
  --purple-100: #FBDDFD;
  --purple-200: #F7C0FC;
  --purple-300: #F18FFA;
  --purple-400: #E955F7;
  --purple-500: #E324F5;
  --purple-600: #C50AD6;
  --purple-700: #9D08AA;
  --purple-800: #70067A;
  --purple-900: #48044E;
  --purple-950: #2D0231;
}
Generate More ShadesCreate PaletteConvert Color