Purple

#740B4C

Pink

Color Codes

All color formats for development

HEX
#740B4C
RGB
rgb(116, 11, 76)
HSL
hsl(323, 83%, 25%)
OKLCH
oklch(0.375 0.147 349.7)
CMYK
cmyk(0%, 91%, 34%, 55%)

Accessibility

WCAG contrast compliance

On White Background

11.08:1

AA AAA

On Black Background

1.89: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#690A44
2#5D093D
3#520835
4#46072E
5#3A0526
6#2F041E
7#230317
8#17020F
9#0C0108

Tints

Lighter variations

1#980E63
2#BB117A
3#DE1591
4#EB2DA2
5#EF50B2
6#F273C1
7#F596D1
8#F8B9E0
9#FCDCF0

Tones

Muted variations

1#6F104B
2#6A154A
3#651B48
4#5F2047
5#5A2546
6#552B45
7#503043
8#4A3542
9#453A41

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F9
BackgroundsSubtle highlightsCard backgrounds
100
FCDE
#FCDEF1
Light backgroundsTable row hoverSkeleton loading
200
F9C2
#F9C2E4
Secondary backgroundsInput backgroundsDividers
300
F594
#F594D0
BordersInactive statesPlaceholder text
400
F05C
#F05CB7
Disabled statesSecondary iconsMuted text
500
EB2D
#EB2DA2
Primary brand colorCTAsActive elementsLinks
600
CD13
#CD1386
Hover statesFocus ringsPrimary buttons hover
700
A30F
#A30F6B
Active/pressed statesDark mode accentsSecondary text
800
750B
#750B4C
Text on light backgroundsHeadingsStrong borders
900
4B07
#4B0731
Primary textHigh emphasis contentDark headings
950
2F04
#2F041E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --purple-50: #FEF1F9;
  --purple-100: #FCDEF1;
  --purple-200: #F9C2E4;
  --purple-300: #F594D0;
  --purple-400: #F05CB7;
  --purple-500: #EB2DA2;
  --purple-600: #CD1386;
  --purple-700: #A30F6B;
  --purple-800: #750B4C;
  --purple-900: #4B0731;
  --purple-950: #2F041E;
}
Generate More ShadesCreate PaletteConvert Color