Pink

#F7C5D9

Pink

Color Codes

All color formats for development

HEX
#F7C5D9
RGB
rgb(247, 197, 217)
HSL
hsl(336, 76%, 87%)
OKLCH
oklch(0.873 0.062 352.5)
CMYK
cmyk(0%, 20%, 12%, 3%)

Accessibility

WCAG contrast compliance

On White Background

1.51:1

AA AAA

On Black Background

13.94: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#F29EBF
2#EC77A6
3#E7508C
4#E22873
5#C31B5E
6#9C154B
7#751038
8#4E0B26
9#270513

Tints

Lighter variations

1#F8CADD
2#F9D0E0
3#F9D6E4
4#FADCE8
5#FBE2EC
6#FCE8F0
7#FDEDF4
8#FDF3F7
9#FEF9FB

Tones

Muted variations

1#F5C7D9
2#F2CADA
3#EFCCDA
4#EDCFDB
5#EAD1DB
6#E8D4DC
7#E5D6DC
8#E3D9DD
9#E0DBDD

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F6
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0EA
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5D9
Secondary backgroundsInput backgroundsDividers
300
F198
#F198BB
BordersInactive statesPlaceholder text
400
EA62
#EA6298
Disabled statesSecondary iconsMuted text
500
E335
#E3357B
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51B5F
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D154C
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F36
Text on light backgroundsHeadingsStrong borders
900
480A
#480A23
Primary textHigh emphasis contentDark headings
950
2D06
#2D0616
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FDF2F6;
  --pink-100: #FBE0EA;
  --pink-200: #F7C5D9;
  --pink-300: #F198BB;
  --pink-400: #EA6298;
  --pink-500: #E3357B;
  --pink-600: #C51B5F;
  --pink-700: #9D154C;
  --pink-800: #700F36;
  --pink-900: #480A23;
  --pink-950: #2D0616;
}
Generate More ShadesCreate PaletteConvert Color