Snow

#F6F0FE

Purple

Color Codes

All color formats for development

HEX
#F6F0FE
RGB
rgb(246, 240, 254)
HSL
hsl(266, 88%, 97%)
OKLCH
oklch(0.964 0.02 305.3)
CMYK
cmyk(3%, 6%, 0%, 0%)

Accessibility

WCAG contrast compliance

On White Background

1.12:1

AA AAA

On Black Background

18.81:1

AA AAA
Run full accessibility check

Tailwind Scale

50-950 scale matching Tailwind CSS naming

50
#F6F1
100
#EBDD
200
#DAC1
300
#BD91
400
#9B57
500
#7F27
600
#630D
700
#4F0B
800
#3808
900
#2405
950
#1703

Shades

Darker variations

1#DBC2FB
2#BF94F8
3#A465F5
4#8837F2
5#6D0FE9
6#570CBA
7#41098C
8#2C065D
9#16032F

Tints

Lighter variations

1#F7F2FE
2#F8F3FE
3#F9F5FE
4#FAF6FE
5#FBF8FF
6#FCF9FF
7#FCFBFF
8#FDFCFF
9#FEFEFF

Tones

Muted variations

1#F7F1FD
2#F7F2FD
3#F7F3FC
4#F7F3FB
5#F7F4FB
6#F7F5FA
7#F7F5F9
8#F7F6F9
9#F7F7F8

Usage Guidelines

Recommended use cases for each shade level

LevelColorTypical Use Cases
50
F6F1
#F6F1FE
BackgroundsSubtle highlightsCard backgrounds
100
EBDD
#EBDDFD
Light backgroundsTable row hoverSkeleton loading
200
DAC1
#DAC1FB
Secondary backgroundsInput backgroundsDividers
300
BD91
#BD91F8
BordersInactive statesPlaceholder text
400
9B57
#9B57F4
Disabled statesSecondary iconsMuted text
500
7F27
#7F27F1
Primary brand colorCTAsActive elementsLinks
600
630D
#630DD3
Hover statesFocus ringsPrimary buttons hover
700
4F0B
#4F0BA8
Active/pressed statesDark mode accentsSecondary text
800
3808
#380878
Text on light backgroundsHeadingsStrong borders
900
2405
#24054D
Primary textHigh emphasis contentDark headings
950
1703
#170330
Maximum contrast textDark mode backgrounds

Export Code

Copy ready-to-use code for your project

:root {
  --snow-50: #F6F1FE;
  --snow-100: #EBDDFD;
  --snow-200: #DAC1FB;
  --snow-300: #BD91F8;
  --snow-400: #9B57F4;
  --snow-500: #7F27F1;
  --snow-600: #630DD3;
  --snow-700: #4F0BA8;
  --snow-800: #380878;
  --snow-900: #24054D;
  --snow-950: #170330;
}
Generate More ShadesCreate PaletteConvert Color