Snow

#FDF1F3

Red

Color Codes

All color formats for development

HEX
#FDF1F3
RGB
rgb(253, 241, 243)
HSL
hsl(350, 75%, 97%)
OKLCH
oklch(0.968 0.013 5.8)
CMYK
cmyk(0%, 5%, 4%, 1%)

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
#FDF2
100
#FBE0
200
#F7C5
300
#F098
400
#E963
500
#E236
600
#C41C
700
#9C16
800
#7010
900
#470A
950
#2D06

Shades

Darker variations

1#F7C6CE
2#F19BA9
3#EB7084
4#E4445F
5#D81F3E
6#AD1931
7#821325
8#570C19
9#2B060C

Tints

Lighter variations

1#FDF3F5
2#FDF4F6
3#FEF6F7
4#FEF7F8
5#FEF8F9
6#FEFAFA
7#FEFBFC
8#FFFCFD
9#FFFEFE

Tones

Muted variations

1#FDF2F4
2#FCF3F4
3#FBF3F5
4#FBF4F5
5#FAF4F5
6#FAF5F6
7#F9F6F6
8#F8F6F7
9#F8F7F7

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
FDF2
#FDF2F4
BackgroundsSubtle highlightsCard backgrounds
100
FBE0
#FBE0E4
Light backgroundsTable row hoverSkeleton loading
200
F7C5
#F7C5CD
Secondary backgroundsInput backgroundsDividers
300
F098
#F098A7
BordersInactive statesPlaceholder text
400
E963
#E96379
Disabled statesSecondary iconsMuted text
500
E236
#E23653
Primary brand colorCTAsActive elementsLinks
600
C41C
#C41C38
Hover statesFocus ringsPrimary buttons hover
700
9C16
#9C162D
Active/pressed statesDark mode accentsSecondary text
800
7010
#701020
Text on light backgroundsHeadingsStrong borders
900
470A
#470A14
Primary textHigh emphasis contentDark headings
950
2D06
#2D060D
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #FDF2F4;
  --snow-100: #FBE0E4;
  --snow-200: #F7C5CD;
  --snow-300: #F098A7;
  --snow-400: #E96379;
  --snow-500: #E23653;
  --snow-600: #C41C38;
  --snow-700: #9C162D;
  --snow-800: #701020;
  --snow-900: #470A14;
  --snow-950: #2D060D;
}
Generate More ShadesCreate PaletteConvert Color