Snow

#FEF1F0

Red

Color Codes

All color formats for development

HEX
#FEF1F0
RGB
rgb(254, 241, 240)
HSL
hsl(4, 88%, 97%)
OKLCH
oklch(0.968 0.014 22.8)
CMYK
cmyk(0%, 5%, 6%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.10:1

AA AAA

On Black Background

19.05:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#FEF2
100
#FDE0
200
#FBC5
300
#F898
400
#F462
500
#F135
600
#D31B
700
#A815
800
#780F
900
#4D0A
950
#3006

Shades

Darker variations

1#FBC6C2
2#F89A94
3#F56F65
4#F24337
5#E91D0F
6#BA170C
7#8C1209
8#5D0C06
9#2F0603

Tints

Lighter variations

1#FEF3F2
2#FEF4F3
3#FEF6F5
4#FEF7F6
5#FFF8F8
6#FFFAF9
7#FFFBFB
8#FFFCFC
9#FFFEFE

Tones

Muted variations

1#FDF2F1
2#FDF3F2
3#FCF3F3
4#FBF4F3
5#FBF4F4
6#FAF5F5
7#F9F6F5
8#F9F6F6
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FEF2
#FEF2F1
BackgroundsSubtle highlightsCard backgrounds
100
FDE0
#FDE0DD
Light backgroundsTable row hoverSkeleton loading
200
FBC5
#FBC5C1
Secondary backgroundsInput backgroundsDividers
300
F898
#F89891
BordersInactive statesPlaceholder text
400
F462
#F46257
Disabled statesSecondary iconsMuted text
500
F135
#F13527
Primary brand colorCTAsActive elementsLinks
600
D31B
#D31B0D
Hover statesFocus ringsPrimary buttons hover
700
A815
#A8150B
Active/pressed statesDark mode accentsSecondary text
800
780F
#780F08
Text on light backgroundsHeadingsStrong borders
900
4D0A
#4D0A05
Primary textHigh emphasis contentDark headings
950
3006
#300603
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #FEF2F1;
  --snow-100: #FDE0DD;
  --snow-200: #FBC5C1;
  --snow-300: #F89891;
  --snow-400: #F46257;
  --snow-500: #F13527;
  --snow-600: #D31B0D;
  --snow-700: #A8150B;
  --snow-800: #780F08;
  --snow-900: #4D0A05;
  --snow-950: #300603;
}
Generate More ShadesCreate PaletteConvert Color