Salmon

#F85488

Pink

Color Codes

All color formats for development

HEX
#F85488
RGB
rgb(248, 84, 136)
HSL
hsl(341, 92%, 65%)
OKLCH
oklch(0.681 0.202 4.9)
CMYK
cmyk(0%, 66%, 45%, 3%)

Accessibility

WCAG contrast compliance

On White Background

3.17:1

AA AAA

On Black Background

6.61:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF0
100
#FEDD
200
#FCBF
300
#FA8E
400
#F854
500
#F623
600
#D709
700
#AB07
800
#7A05
900
#4E03
950
#3102

Shades

Darker variations

1#F73471
2#F5145B
3#DF094D
4#BF0842
5#9F0737
6#7F052C
7#5F0421
8#400316
9#20010B

Tints

Lighter variations

1#F96594
2#F976A0
3#FA87AB
4#FB98B7
5#FBA9C3
6#FCBACF
7#FDCCDB
8#FEDDE7
9#FEEEF3

Tones

Muted variations

1#F05C8B
2#E7648E
3#DF6C91
4#D77494
5#CF7D97
6#C7859A
7#BE8D9D
8#B695A0
9#AE9EA3

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF0
#FEF0F5
BackgroundsSubtle highlightsCard backgrounds
100
FEDD
#FEDDE7
Light backgroundsTable row hoverSkeleton loading
200
FCBF
#FCBFD3
Secondary backgroundsInput backgroundsDividers
300
FA8E
#FA8EB1
BordersInactive statesPlaceholder text
400
F854
#F85488
Disabled statesSecondary iconsMuted text
500
F623
#F62366
Primary brand colorCTAsActive elementsLinks
600
D709
#D7094A
Hover statesFocus ringsPrimary buttons hover
700
AB07
#AB073B
Active/pressed statesDark mode accentsSecondary text
800
7A05
#7A052A
Text on light backgroundsHeadingsStrong borders
900
4E03
#4E031B
Primary textHigh emphasis contentDark headings
950
3102
#310211
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FEF0F5;
  --salmon-100: #FEDDE7;
  --salmon-200: #FCBFD3;
  --salmon-300: #FA8EB1;
  --salmon-400: #F85488;
  --salmon-500: #F62366;
  --salmon-600: #D7094A;
  --salmon-700: #AB073B;
  --salmon-800: #7A052A;
  --salmon-900: #4E031B;
  --salmon-950: #310211;
}
Generate More ShadesCreate PaletteConvert Color