Purple

#750B67

Pink

Color Codes

All color formats for development

HEX
#750B67
RGB
rgb(117, 11, 103)
HSL
hsl(308, 83%, 25%)
OKLCH
oklch(0.391 0.165 334.9)
CMYK
cmyk(0%, 91%, 12%, 54%)

Accessibility

WCAG contrast compliance

On White Background

10.50:1

AA AAA

On Black Background

2.00:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FCDE
200
#F9C2
300
#F594
400
#F05C
500
#EB2D
600
#CD13
700
#A30F
800
#750B
900
#4B07
950
#2F04

Shades

Darker variations

1#690A5C
2#5D0952
3#520848
4#46073E
5#3A0533
6#2F0429
7#23031F
8#170215
9#0C010A

Tints

Lighter variations

1#980E85
2#BB11A4
3#DE15C3
4#EB2DD2
5#EF50DA
6#F273E1
7#F596E9
8#F8B9F0
9#FCDCF8

Tones

Muted variations

1#6F1063
2#6A155F
3#651B5B
4#5F2057
5#5A2553
6#552B4F
7#50304B
8#4A3548
9#453A44

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1FC
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEF8
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2F2
Secondary backgroundsInput backgroundsDividers
300
F594
#F594E8
BordersInactive statesPlaceholder text
400
F05C
#F05CDC
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2DD2
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD13B4
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30F90
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B67
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B0742
Primary textHigh emphasis contentDark headings
950
2F04
#2F0429
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1FC;
  --purple-100: #FCDEF8;
  --purple-200: #F9C2F2;
  --purple-300: #F594E8;
  --purple-400: #F05CDC;
  --purple-500: #EB2DD2;
  --purple-600: #CD13B4;
  --purple-700: #A30F90;
  --purple-800: #750B67;
  --purple-900: #4B0742;
  --purple-950: #2F0429;
}
Generate More ShadesCreate PaletteConvert Color