White
#F1FDFE
CyanColor Codes
All color formats for development
HEX
#F1FDFERGB
rgb(241, 253, 254)HSL
hsl(185, 87%, 97%)OKLCH
oklch(0.985 0.013 202.9)CMYK
cmyk(5%, 0%, 0%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#C2F6FB
2#94EFF8
3#66E8F4
4#38E2F1
5#10D5E7
6#0DABB9
7#0A808B
8#06555D
9#032B2E
Tints
Lighter variations
1#F2FDFE
2#F4FDFE
3#F5FEFE
4#F6FEFE
5#F8FEFF
6#F9FEFF
7#FBFEFF
8#FCFFFF
9#FEFFFF
Tones
Muted variations
1#F1FCFD
2#F2FCFD
3#F3FBFC
4#F3FBFB
5#F4FAFB
6#F5FAFA
7#F5F9F9
8#F6F8F9
9#F7F8F8
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEFA #DEFAFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C1F6 #C1F6FB | Secondary backgroundsInput backgroundsDividers |
| 300 | 91EF #91EFF7 | BordersInactive statesPlaceholder text |
| 400 | 58E6 #58E6F3 | Disabled statesSecondary iconsMuted text |
| 500 | 28DF #28DFF0 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0FC2 #0FC2D2 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0C9A #0C9AA7 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 086E #086E77 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0546 #05464C | Primary textHigh emphasis contentDark headings |
| 950 | 032C #032C30 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--white-50: #F1FDFE;
--white-100: #DEFAFD;
--white-200: #C1F6FB;
--white-300: #91EFF7;
--white-400: #58E6F3;
--white-500: #28DFF0;
--white-600: #0FC2D2;
--white-700: #0C9AA7;
--white-800: #086E77;
--white-900: #05464C;
--white-950: #032C30;
}