Indian Red

#E3356F

Pink

Color Codes

All color formats for development

HEX
#E3356F
RGB
rgb(227, 53, 111)
HSL
hsl(340, 76%, 55%)
OKLCH
oklch(0.612 0.211 6.6)
CMYK
cmyk(0%, 77%, 51%, 11%)

Accessibility

WCAG contrast compliance

On White Background

4.20:1

AA AAA

On Black Background

5.00: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#DE1E5E
2#C51B54
3#AD1849
4#94143F
5#7B1134
6#630D2A
7#4A0A1F
8#310715
9#19030A

Tints

Lighter variations

1#E6497E
2#E95D8C
3#EC729A
4#EE86A9
5#F19AB7
6#F4AEC5
7#F7C2D4
8#F9D7E2
9#FCEBF1

Tones

Muted variations

1#DB3E72
2#D24675
3#C94F78
4#C1587B
5#B8617E
6#AF6981
7#A67284
8#9E7B86
9#958489

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F5
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0E9
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5D5
Secondary backgroundsInput backgroundsDividers
300
F198
#F198B5
BordersInactive statesPlaceholder text
400
EA62
#EA628F
Disabled statesSecondary iconsMuted text
500
E335
#E3356F
Primary brand colorCTAsActive elementsLinks
600
C51B
#C51B54
Hover statesFocus ringsPrimary buttons hover
700
9D15
#9D1543
Active/pressed statesDark mode accentsSecondary text
800
700F
#700F30
Text on light backgroundsHeadingsStrong borders
900
480A
#480A1E
Primary textHigh emphasis contentDark headings
950
2D06
#2D0613
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --indian-red-50: #FDF2F5;
  --indian-red-100: #FBE0E9;
  --indian-red-200: #F7C5D5;
  --indian-red-300: #F198B5;
  --indian-red-400: #EA628F;
  --indian-red-500: #E3356F;
  --indian-red-600: #C51B54;
  --indian-red-700: #9D1543;
  --indian-red-800: #700F30;
  --indian-red-900: #480A1E;
  --indian-red-950: #2D0613;
}
Generate More ShadesCreate PaletteConvert Color