White
#F0FFFC
CyanColor Codes
All color formats for development
HEX
#F0FFFCRGB
rgb(240, 255, 252)HSL
hsl(168, 100%, 97%)OKLCH
oklch(0.988 0.016 182.7)CMYK
cmyk(6%, 0%, 1%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#BEFFF2
2#8DFFE8
3#5BFFDE
4#2AFFD4
5#00F7C6
6#00C69E
7#009477
8#00634F
9#003128
Tints
Lighter variations
1#F1FFFC
2#F3FFFD
3#F4FFFD
4#F6FFFD
5#F7FFFD
6#F9FFFE
7#FAFFFE
8#FCFFFE
9#FDFFFF
Tones
Muted variations
1#F0FEFB
2#F1FDFB
3#F2FDFB
4#F3FCFA
5#F4FBFA
6#F4FAF9
7#F5FAF9
8#F6F9F8
9#F7F8F8
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBFF #DBFFF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDFF #BDFFF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AFF #8AFFE8 | BordersInactive statesPlaceholder text |
| 400 | 4DFF #4DFFDB | Disabled statesSecondary iconsMuted text |
| 500 | 1AFF #1AFFD1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 00E0 #00E0B4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 00B3 #00B38F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0080 #008066 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0052 #005241 | Primary textHigh emphasis contentDark headings |
| 950 | 0033 #003329 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--white-50: #F0FFFC;
--white-100: #DBFFF8;
--white-200: #BDFFF2;
--white-300: #8AFFE8;
--white-400: #4DFFDB;
--white-500: #1AFFD1;
--white-600: #00E0B4;
--white-700: #00B38F;
--white-800: #008066;
--white-900: #005241;
--white-950: #003329;
}