Purple

#920FA3

Pink

Color Codes

All color formats for development

HEX
#920FA3
RGB
rgb(146, 15, 163)
HSL
hsl(293, 83%, 35%)
OKLCH
oklch(0.479 0.219 322.4)
CMYK
cmyk(10%, 91%, 0%, 36%)

Accessibility

WCAG contrast compliance

On White Background

7.45:1

AA AAA

On Black Background

2.82:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FCF1
100
#F9DE
200
#F3C2
300
#EA94
400
#DF5C
500
#D52D
600
#B813
700
#920F
800
#680B
900
#4307
950
#2A04

Shades

Darker variations

1#830E93
2#750C83
3#660B72
4#580962
5#490852
6#3A0641
7#2C0531
8#1D0321
9#0F0210

Tints

Lighter variations

1#AD12C2
2#C815E0
3#D52BEB
4#DB49EE
5#E167F1
6#E786F4
7#EDA4F7
8#F3C2F9
9#F9E1FC

Tones

Muted variations

1#8C179C
2#871E95
3#81258D
4#7B2D86
5#76347E
6#703C77
7#6A436F
8#654A68
9#5F5261

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FCF1
#FCF1FE
BackgroundsSubtle highlightsCard backgrounds
100
F9DE
#F9DEFC
Light backgroundsTable row hoverSkeleton loading
200
F3C2
#F3C2F9
Secondary backgroundsInput backgroundsDividers
300
EA94
#EA94F5
BordersInactive statesPlaceholder text
400
DF5C
#DF5CF0
Disabled statesSecondary iconsMuted text
500
D52D
#D52DEB
Primary brand colorCTAsActive elementsLinks
600
B813
#B813CD
Hover statesFocus ringsPrimary buttons hover
700
920F
#920FA3
Active/pressed statesDark mode accentsSecondary text
800
680B
#680B75
Text on light backgroundsHeadingsStrong borders
900
4307
#43074B
Primary textHigh emphasis contentDark headings
950
2A04
#2A042F
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FCF1FE;
  --purple-100: #F9DEFC;
  --purple-200: #F3C2F9;
  --purple-300: #EA94F5;
  --purple-400: #DF5CF0;
  --purple-500: #D52DEB;
  --purple-600: #B813CD;
  --purple-700: #920FA3;
  --purple-800: #680B75;
  --purple-900: #43074B;
  --purple-950: #2A042F;
}
Generate More ShadesCreate PaletteConvert Color