Snow

#FEF0F1

Red

Color Codes

All color formats for development

HEX
#FEF0F1
RGB
rgb(254, 240, 241)
HSL
hsl(356, 88%, 97%)
OKLCH
oklch(0.966 0.015 12.4)
CMYK
cmyk(0%, 6%, 5%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.11:1

AA AAA

On Black Background

18.95: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#FBC2C6
2#F8949A
3#F5656F
4#F23743
5#E90F1D
6#BA0C17
7#8C0912
8#5D060C
9#2F0306

Tints

Lighter variations

1#FEF2F3
2#FEF3F4
3#FEF5F6
4#FEF6F7
5#FFF8F8
6#FFF9FA
7#FFFBFB
8#FFFCFC
9#FFFEFE

Tones

Muted variations

1#FDF1F2
2#FDF2F3
3#FCF3F3
4#FBF3F4
5#FBF4F4
6#FAF5F5
7#F9F5F6
8#F9F6F6
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF1
#FEF1F2
BackgroundsSubtle highlightsCard backgrounds
100
FDDD
#FDDDE0
Light backgroundsTable row hoverSkeleton loading
200
FBC1
#FBC1C5
Secondary backgroundsInput backgroundsDividers
300
F891
#F89198
BordersInactive statesPlaceholder text
400
F457
#F45762
Disabled statesSecondary iconsMuted text
500
F127
#F12735
Primary brand colorCTAsActive elementsLinks
600
D30D
#D30D1B
Hover statesFocus ringsPrimary buttons hover
700
A80B
#A80B15
Active/pressed statesDark mode accentsSecondary text
800
7808
#78080F
Text on light backgroundsHeadingsStrong borders
900
4D05
#4D050A
Primary textHigh emphasis contentDark headings
950
3003
#300306
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #FEF1F2;
  --snow-100: #FDDDE0;
  --snow-200: #FBC1C5;
  --snow-300: #F89198;
  --snow-400: #F45762;
  --snow-500: #F12735;
  --snow-600: #D30D1B;
  --snow-700: #A80B15;
  --snow-800: #78080F;
  --snow-900: #4D050A;
  --snow-950: #300306;
}
Generate More ShadesCreate PaletteConvert Color