Pink

#FED8BD

Orange

Color Codes

All color formats for development

HEX
#FED8BD
RGB
rgb(254, 216, 189)
HSL
hsl(25, 97%, 87%)
OKLCH
oklch(0.907 0.056 57.3)
CMYK
cmyk(0%, 15%, 26%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.33:1

AA AAA

On Black Background

15.77:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FFF6
100
#FEEA
200
#FED8
300
#FDBB
400
#FC97
500
#FC7A
600
#DD5E
700
#B04B
800
#7E35
900
#5022
950
#3215

Shades

Darker variations

1#FDBF92
2#FDA566
3#FC8B3B
4#FB710F
5#DB5D03
6#AF4A03
7#833802
8#572501
9#2C1301

Tints

Lighter variations

1#FEDCC4
2#FEE0CB
3#FEE4D1
4#FEE8D8
5#FFECDE
6#FFF0E5
7#FFF3EB
8#FFF7F2
9#FFFBF8

Tones

Muted variations

1#FBD9C1
2#F8DAC4
3#F4DAC7
4#F1DBCB
5#EEDBCE
6#EBDCD1
7#E7DCD4
8#E4DDD7
9#E1DDDB

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FFF6
#FFF6F0
BackgroundsSubtle highlightsCard backgrounds
100
FEEA
#FEEADC
Light backgroundsTable row hoverSkeleton loading
200
FED8
#FED8BE
Secondary backgroundsInput backgroundsDividers
300
FDBB
#FDBB8B
BordersInactive statesPlaceholder text
400
FC97
#FC974F
Disabled statesSecondary iconsMuted text
500
FC7A
#FC7A1D
Primary brand colorCTAsActive elementsLinks
600
DD5E
#DD5E03
Hover statesFocus ringsPrimary buttons hover
700
B04B
#B04B03
Active/pressed statesDark mode accentsSecondary text
800
7E35
#7E3502
Text on light backgroundsHeadingsStrong borders
900
5022
#502201
Primary textHigh emphasis contentDark headings
950
3215
#321501
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --pink-50: #FFF6F0;
  --pink-100: #FEEADC;
  --pink-200: #FED8BE;
  --pink-300: #FDBB8B;
  --pink-400: #FC974F;
  --pink-500: #FC7A1D;
  --pink-600: #DD5E03;
  --pink-700: #B04B03;
  --pink-800: #7E3502;
  --pink-900: #502201;
  --pink-950: #321501;
}
Generate More ShadesCreate PaletteConvert Color