Indian Red

#DF3A5B

Red

Color Codes

All color formats for development

HEX
#DF3A5B
RGB
rgb(223, 58, 91)
HSL
hsl(348, 72%, 55%)
OKLCH
oklch(0.605 0.2 14.5)
CMYK
cmyk(0%, 74%, 59%, 13%)

Accessibility

WCAG contrast compliance

On White Background

4.29:1

AA AAA

On Black Background

4.89:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF2
100
#FAE0
200
#F6C6
300
#EF9A
400
#E665
500
#DF3A
600
#C11F
700
#9A19
800
#6E12
900
#460B
950
#2C07

Shades

Darker variations

1#D92348
2#C11F40
3#A91B38
4#911830
5#791428
6#601020
7#480C18
8#300810
9#180408

Tints

Lighter variations

1#E24D6B
2#E5617C
3#E9758C
4#EC899C
5#EF9CAD
6#F2B0BD
7#F5C4CE
8#F9D8DE
9#FCEBEF

Tones

Muted variations

1#D74260
2#CE4A65
3#C6526A
4#BE5B6F
5#B66373
6#AD6B78
7#A5737D
8#9D7C82
9#958487

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F4
BackgroundsSubtle highlightsCard backgrounds
100
FAE0
#FAE0E5
Light backgroundsTable row hoverSkeleton loading
200
F6C6
#F6C6D0
Secondary backgroundsInput backgroundsDividers
300
EF9A
#EF9AAB
BordersInactive statesPlaceholder text
400
E665
#E6657F
Disabled statesSecondary iconsMuted text
500
DF3A
#DF3A5B
Primary brand colorCTAsActive elementsLinks
600
C11F
#C11F40
Hover statesFocus ringsPrimary buttons hover
700
9A19
#9A1933
Active/pressed statesDark mode accentsSecondary text
800
6E12
#6E1224
Text on light backgroundsHeadingsStrong borders
900
460B
#460B17
Primary textHigh emphasis contentDark headings
950
2C07
#2C070E
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --indian-red-50: #FDF2F4;
  --indian-red-100: #FAE0E5;
  --indian-red-200: #F6C6D0;
  --indian-red-300: #EF9AAB;
  --indian-red-400: #E6657F;
  --indian-red-500: #DF3A5B;
  --indian-red-600: #C11F40;
  --indian-red-700: #9A1933;
  --indian-red-800: #6E1224;
  --indian-red-900: #460B17;
  --indian-red-950: #2C070E;
}
Generate More ShadesCreate PaletteConvert Color