Purple

#700F68

Pink

Color Codes

All color formats for development

HEX
#700F68
RGB
rgb(112, 15, 104)
HSL
hsl(305, 76%, 25%)
OKLCH
oklch(0.384 0.16 332.1)
CMYK
cmyk(0%, 87%, 7%, 56%)

Accessibility

WCAG contrast compliance

On White Background

10.73: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
#FDF2
100
#FBE0
200
#F7C5
300
#F198
400
#EA62
500
#E335
600
#C51B
700
#9D15
800
#700F
900
#480A
950
#2D06

Shades

Darker variations

1#650E5E
2#5A0C53
3#4F0B49
4#43093E
5#380834
6#2D062A
7#22051F
8#160315
9#0B020A

Tints

Lighter variations

1#921487
2#B418A7
3#D51DC6
4#E335D5
5#E857DC
6#ED78E3
7#F19AEA
8#F6BCF1
9#FADDF8

Tones

Muted variations

1#6B1464
2#671960
3#621E5C
4#5D2358
5#582854
6#532C50
7#4E314C
8#493648
9#453B44

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2FC
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0F8
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5F3
Secondary backgroundsInput backgroundsDividers
300
F198
#F198E9
BordersInactive statesPlaceholder text
400
EA62
#EA62DE
Disabled statesSecondary iconsMuted text
500
E335
#E335D5
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51BB7
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D1592
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F68
Text on light backgroundsHeadingsStrong borders
900
480A
#480A43
Primary textHigh emphasis contentDark headings
950
2D06
#2D062A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FDF2FC;
  --purple-100: #FBE0F8;
  --purple-200: #F7C5F3;
  --purple-300: #F198E9;
  --purple-400: #EA62DE;
  --purple-500: #E335D5;
  --purple-600: #C51BB7;
  --purple-700: #9D1592;
  --purple-800: #700F68;
  --purple-900: #480A43;
  --purple-950: #2D062A;
}
Generate More ShadesCreate PaletteConvert Color