Purple

#6E0877

Pink

Color Codes

All color formats for development

HEX
#6E0877
RGB
rgb(110, 8, 119)
HSL
hsl(295, 87%, 25%)
OKLCH
oklch(0.388 0.175 324.2)
CMYK
cmyk(8%, 93%, 0%, 53%)

Accessibility

WCAG contrast compliance

On White Background

10.69:1

AA AAA

On Black Background

1.96:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FADE
200
#F6C1
300
#EF91
400
#E658
500
#DF28
600
#C20F
700
#9A0C
800
#6E08
900
#4605
950
#2C03

Shades

Darker variations

1#63076B
2#58075F
3#4D0653
4#420548
5#37043C
6#2C0330
7#210224
8#160218
9#0B010C

Tints

Lighter variations

1#8F0B9B
2#B00DBF
3#D110E3
4#DF28F0
5#E54CF3
6#EA70F5
7#EF94F8
8#F4B7FA
9#FADBFD

Tones

Muted variations

1#690E72
2#65136C
3#601967
4#5B1E61
5#57245B
6#522A56
7#4E2F50
8#49354B
9#443A45

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1FE
BackgroundsSubtle highlightsCard backgrounds
100
FADE
#FADEFD
Light backgroundsTable row hoverSkeleton loading
200
F6C1
#F6C1FB
Secondary backgroundsInput backgroundsDividers
300
EF91
#EF91F7
BordersInactive statesPlaceholder text
400
E658
#E658F3
Disabled statesSecondary iconsMuted text
500
DF28
#DF28F0
Primary brand colorCTAsActive elementsLinks
600
C20F
#C20FD2
Hover statesFocus ringsPrimary buttons hover
700
9A0C
#9A0CA7
Active/pressed statesDark mode accentsSecondary text
800
6E08
#6E0877
Text on light backgroundsHeadingsStrong borders
900
4605
#46054C
Primary textHigh emphasis contentDark headings
950
2C03
#2C0330
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF1FE;
  --purple-100: #FADEFD;
  --purple-200: #F6C1FB;
  --purple-300: #EF91F7;
  --purple-400: #E658F3;
  --purple-500: #DF28F0;
  --purple-600: #C20FD2;
  --purple-700: #9A0CA7;
  --purple-800: #6E0877;
  --purple-900: #46054C;
  --purple-950: #2C0330;
}
Generate More ShadesCreate PaletteConvert Color