Snow

#FEF0F7

Pink

Color Codes

All color formats for development

HEX
#FEF0F7
RGB
rgb(254, 240, 247)
HSL
hsl(330, 88%, 97%)
OKLCH
oklch(0.968 0.018 345.6)
CMYK
cmyk(0%, 6%, 3%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.10:1

AA AAA

On Black Background

19.02:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF1
100
#FDDD
200
#FBC1
300
#F891
400
#F457
500
#F127
600
#D30D
700
#A80B
800
#7808
900
#4D05
950
#3003

Shades

Darker variations

1#FBC2DF
2#F894C6
3#F565AD
4#F23794
5#E90F7C
6#BA0C63
7#8C094A
8#5D0631
9#2F0319

Tints

Lighter variations

1#FEF2F8
2#FEF3F9
3#FEF5FA
4#FEF6FA
5#FFF8FB
6#FFF9FC
7#FFFBFD
8#FFFCFD
9#FFFEFE

Tones

Muted variations

1#FDF1F7
2#FDF2F7
3#FCF3F7
4#FBF3F7
5#FBF4F7
6#FAF5F7
7#F9F5F7
8#F9F6F7
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F7
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDED
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1DE
Secondary backgroundsInput backgroundsDividers
300
F891
#F891C4
BordersInactive statesPlaceholder text
400
F457
#F457A6
Disabled statesSecondary iconsMuted text
500
F127
#F1278C
Primary brand colorCTAsActive elementsLinks
600
D30D
#D30D70
Hover statesFocus ringsPrimary buttons hover
700
A80B
#A80B59
Active/pressed statesDark mode accentsSecondary text
800
7808
#780840
Text on light backgroundsHeadingsStrong borders
900
4D05
#4D0529
Primary textHigh emphasis contentDark headings
950
3003
#30031A
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #FEF1F7;
  --snow-100: #FDDDED;
  --snow-200: #FBC1DE;
  --snow-300: #F891C4;
  --snow-400: #F457A6;
  --snow-500: #F1278C;
  --snow-600: #D30D70;
  --snow-700: #A80B59;
  --snow-800: #780840;
  --snow-900: #4D0529;
  --snow-950: #30031A;
}
Generate More ShadesCreate PaletteConvert Color