Sky Blue
#8DFCE8
CyanColor Codes
All color formats for development
HEX
#8DFCE8RGB
rgb(141, 252, 232)HSL
hsl(169, 95%, 77%)OKLCH
oklch(0.919 0.107 180.8)CMYK
cmyk(44%, 0%, 8%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#66FBE0
2#40FAD8
3#1AF9D0
4#06E6BD
5#05BF9D
6#04997E
7#03735E
8#024D3F
9#01261F
Tints
Lighter variations
1#98FCEA
2#A4FDEC
3#AFFDEF
4#BAFDF1
5#C6FEF3
6#D1FEF6
7#DDFEF8
8#E8FEFA
9#F4FFFD
Tones
Muted variations
1#92F6E4
2#98F1E1
3#9DEBDD
4#A3E6DA
5#A8E0D6
6#AEDBD2
7#B4D5CF
8#B9CFCB
9#BFCAC8
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FF #F0FFFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFE #DCFEF8 | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEFD #BEFDF2 | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DFC #8DFCE8 | BordersInactive statesPlaceholder text |
| 400 | 51FB #51FBDB | Disabled statesSecondary iconsMuted text |
| 500 | 1FF9 #1FF9D1 | Primary brand colorCTAsActive elementsLinks |
| 600 | 06DB #06DBB4 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 04AE #04AE8F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 037C #037C66 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0250 #025041 | Primary textHigh emphasis contentDark headings |
| 950 | 0132 #013229 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F0FFFC;
--sky-blue-100: #DCFEF8;
--sky-blue-200: #BEFDF2;
--sky-blue-300: #8DFCE8;
--sky-blue-400: #51FBDB;
--sky-blue-500: #1FF9D1;
--sky-blue-600: #06DBB4;
--sky-blue-700: #04AE8F;
--sky-blue-800: #037C66;
--sky-blue-900: #025041;
--sky-blue-950: #013229;
}