Purple

#8508AA

Pink

Color Codes

All color formats for development

HEX
#8508AA
RGB
rgb(133, 8, 170)
HSL
hsl(286, 91%, 35%)
OKLCH
oklch(0.462 0.223 315.4)
CMYK
cmyk(22%, 95%, 0%, 33%)

Accessibility

WCAG contrast compliance

On White Background

8.04:1

AA AAA

On Black Background

2.61:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FBF0
100
#F6DD
200
#EEC0
300
#E18F
400
#D155
500
#C424
600
#A70A
700
#8508
800
#5F06
900
#3D04
950
#2602

Shades

Darker variations

1#770799
2#6A0688
3#5D0677
4#500566
5#420455
6#350344
7#280233
8#1B0222
9#0D0111

Tints

Lighter variations

1#9D0ACA
2#B60BEA
3#C321F5
4#CC41F6
5#D461F8
6#DD80F9
7#E5A0FB
8#EEC0FC
9#F6DFFE

Tones

Muted variations

1#8010A2
2#7C189A
3#782092
4#73298A
5#6F3182
6#6B397A
7#664172
8#624969
9#5E5161

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FBF0
#FBF0FE
BackgroundsSubtle highlightsCard backgrounds
100
F6DD
#F6DDFD
Light backgroundsTable row hoverSkeleton loading
200
EEC0
#EEC0FC
Secondary backgroundsInput backgroundsDividers
300
E18F
#E18FFA
BordersInactive statesPlaceholder text
400
D155
#D155F7
Disabled statesSecondary iconsMuted text
500
C424
#C424F5
Primary brand colorCTAsActive elementsLinks
600
A70A
#A70AD6
Hover statesFocus ringsPrimary buttons hover
700
8508
#8508AA
Active/pressed statesDark mode accentsSecondary text
800
5F06
#5F067A
Text on light backgroundsHeadingsStrong borders
900
3D04
#3D044E
Primary textHigh emphasis contentDark headings
950
2602
#260231
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FBF0FE;
  --purple-100: #F6DDFD;
  --purple-200: #EEC0FC;
  --purple-300: #E18FFA;
  --purple-400: #D155F7;
  --purple-500: #C424F5;
  --purple-600: #A70AD6;
  --purple-700: #8508AA;
  --purple-800: #5F067A;
  --purple-900: #3D044E;
  --purple-950: #260231;
}
Generate More ShadesCreate PaletteConvert Color