Snow

#F8F0FE

Purple

Color Codes

All color formats for development

HEX
#F8F0FE
RGB
rgb(248, 240, 254)
HSL
hsl(274, 88%, 97%)
OKLCH
oklch(0.965 0.02 311.1)
CMYK
cmyk(2%, 6%, 0%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.11:1

AA AAA

On Black Background

18.89:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F8F1
100
#EFDD
200
#E2C1
300
#CB91
400
#B057
500
#9A27
600
#7D0D
700
#640B
800
#4708
900
#2E05
950
#1C03

Shades

Darker variations

1#E2C2FB
2#CD94F8
3#B765F5
4#A137F2
5#8A0FE9
6#6F0CBA
7#53098C
8#37065D
9#1C032F

Tints

Lighter variations

1#F9F2FE
2#FAF3FE
3#FAF5FE
4#FBF6FE
5#FCF8FF
6#FCF9FF
7#FDFBFF
8#FEFCFF
9#FEFEFF

Tones

Muted variations

1#F8F1FD
2#F8F2FD
3#F8F3FC
4#F8F3FB
5#F8F4FB
6#F8F5FA
7#F8F5F9
8#F8F6F9
9#F7F7F8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F8F1
#F8F1FE
BackgroundsSubtle highlightsCard backgrounds
100
EFDD
#EFDDFD
Light backgroundsTable row hoverSkeleton loading
200
E2C1
#E2C1FB
Secondary backgroundsInput backgroundsDividers
300
CB91
#CB91F8
BordersInactive statesPlaceholder text
400
B057
#B057F4
Disabled statesSecondary iconsMuted text
500
9A27
#9A27F1
Primary brand colorCTAsActive elementsLinks
600
7D0D
#7D0DD3
Hover statesFocus ringsPrimary buttons hover
700
640B
#640BA8
Active/pressed statesDark mode accentsSecondary text
800
4708
#470878
Text on light backgroundsHeadingsStrong borders
900
2E05
#2E054D
Primary textHigh emphasis contentDark headings
950
1C03
#1C0330
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #F8F1FE;
  --snow-100: #EFDDFD;
  --snow-200: #E2C1FB;
  --snow-300: #CB91F8;
  --snow-400: #B057F4;
  --snow-500: #9A27F1;
  --snow-600: #7D0DD3;
  --snow-700: #640BA8;
  --snow-800: #470878;
  --snow-900: #2E054D;
  --snow-950: #1C0330;
}
Generate More ShadesCreate PaletteConvert Color