Salmon

#FB5075

Red

Color Codes

All color formats for development

HEX
#FB5075
RGB
rgb(251, 80, 117)
HSL
hsl(347, 96%, 65%)
OKLCH
oklch(0.677 0.207 11.9)
CMYK
cmyk(0%, 68%, 53%, 2%)

Accessibility

WCAG contrast compliance

On White Background

3.23:1

AA AAA

On Black Background

6.51:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF0
100
#FEDC
200
#FEBE
300
#FD8C
400
#FB50
500
#FA1E
600
#DC04
700
#AF04
800
#7D03
900
#5002
950
#3201

Shades

Darker variations

1#FB305C
2#FA0F42
3#E30535
4#C3042D
5#A20326
6#82031E
7#610217
8#41010F
9#200108

Tints

Lighter variations

1#FC6283
2#FC7391
3#FD859F
4#FD96AC
5#FDA8BA
6#FEB9C8
7#FECBD6
8#FEDCE3
9#FFEEF1

Tones

Muted variations

1#F3597A
2#EA617F
3#E26A84
4#D97289
5#D17B8D
6#C88392
7#BF8C97
8#B7959C
9#AE9DA1

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF0
#FFF0F3
BackgroundsSubtle highlightsCard backgrounds
100
FEDC
#FEDCE3
Light backgroundsTable row hoverSkeleton loading
200
FEBE
#FEBECC
Secondary backgroundsInput backgroundsDividers
300
FD8C
#FD8CA4
BordersInactive statesPlaceholder text
400
FB50
#FB5075
Disabled statesSecondary iconsMuted text
500
FA1E
#FA1E4E
Primary brand colorCTAsActive elementsLinks
600
DC04
#DC0433
Hover statesFocus ringsPrimary buttons hover
700
AF04
#AF0429
Active/pressed statesDark mode accentsSecondary text
800
7D03
#7D031D
Text on light backgroundsHeadingsStrong borders
900
5002
#500213
Primary textHigh emphasis contentDark headings
950
3201
#32010C
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --salmon-50: #FFF0F3;
  --salmon-100: #FEDCE3;
  --salmon-200: #FEBECC;
  --salmon-300: #FD8CA4;
  --salmon-400: #FB5075;
  --salmon-500: #FA1E4E;
  --salmon-600: #DC0433;
  --salmon-700: #AF0429;
  --salmon-800: #7D031D;
  --salmon-900: #500213;
  --salmon-950: #32010C;
}
Generate More ShadesCreate PaletteConvert Color