Salmon

#EB6085

Pink

Color Codes

All color formats for development

HEX
#EB6085
RGB
rgb(235, 96, 133)
HSL
hsl(344, 78%, 65%)
OKLCH
oklch(0.674 0.174 6.5)
CMYK
cmyk(0%, 59%, 43%, 8%)

Accessibility

WCAG contrast compliance

On White Background

3.21:1

AA AAA

On Black Background

6.54:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FDF1
100
#FBDF
200
#F8C4
300
#F297
400
#EB60
500
#E633
600
#C819
700
#9F14
800
#710E
900
#4909
950
#2D06

Shades

Darker variations

1#E8436F
2#E42558
3#CF1A4A
4#B1163F
5#941235
6#760F2A
7#590B20
8#3B0715
9#1E040B

Tints

Lighter variations

1#ED7091
2#EF809E
3#F190AA
4#F3A0B6
5#F5B0C2
6#F7BFCE
7#F9CFDA
8#FBDFE7
9#FDEFF3

Tones

Muted variations

1#E46789
2#DD6E8C
3#D6758F
4#D07C92
5#C98396
6#C28A99
7#BB919C
8#B4989F
9#AD9FA3

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF1
#FDF1F5
BackgroundsSubtle highlightsCard backgrounds
100
FBDF
#FBDFE7
Light backgroundsTable row hoverSkeleton loading
200
F8C4
#F8C4D2
Secondary backgroundsInput backgroundsDividers
300
F297
#F297AF
BordersInactive statesPlaceholder text
400
EB60
#EB6085
Disabled statesSecondary iconsMuted text
500
E633
#E63362
Primary brand colorCTAsActive elementsLinks
600
C819
#C81947
Hover statesFocus ringsPrimary buttons hover
700
9F14
#9F1439
Active/pressed statesDark mode accentsSecondary text
800
710E
#710E29
Text on light backgroundsHeadingsStrong borders
900
4909
#49091A
Primary textHigh emphasis contentDark headings
950
2D06
#2D0610
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FDF1F5;
  --salmon-100: #FBDFE7;
  --salmon-200: #F8C4D2;
  --salmon-300: #F297AF;
  --salmon-400: #EB6085;
  --salmon-500: #E63362;
  --salmon-600: #C81947;
  --salmon-700: #9F1439;
  --salmon-800: #710E29;
  --salmon-900: #49091A;
  --salmon-950: #2D0610;
}
Generate More ShadesCreate PaletteConvert Color