Sky Blue
#5CDCF0
CyanColor Codes
All color formats for development
HEX
#5CDCF0RGB
rgb(92, 220, 240)HSL
hsl(188, 83%, 65%)OKLCH
oklch(0.831 0.115 209.4)CMYK
cmyk(62%, 8%, 0%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3DD6ED
2#1FCFEA
3#14BBD4
4#11A0B6
5#0E8598
6#0B6B79
7#08505B
8#06353D
9#031B1E
Tints
Lighter variations
1#6CE0F1
2#7CE3F3
3#8DE7F4
4#9DEAF6
5#ADEEF7
6#BEF1F9
7#CEF5FA
8#DEF8FC
9#EFFCFD
Tones
Muted variations
1#63D7E8
2#6AD1E1
3#72CCDA
4#79C6D2
5#81C1CB
6#88BBC3
7#90B6BC
8#97B1B5
9#9EABAD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FC #F1FCFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEF8 #DEF8FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2F2 #C2F2F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94E8 #94E8F5 | BordersInactive statesPlaceholder text |
| 400 | 5CDC #5CDCF0 | Disabled statesSecondary iconsMuted text |
| 500 | 2DD2 #2DD2EB | Primary brand colorCTAsActive elementsLinks |
| 600 | 13B4 #13B4CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0F90 #0F90A3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B67 #0B6775 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0742 #07424B | Primary textHigh emphasis contentDark headings |
| 950 | 0429 #04292F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1FCFE;
--sky-blue-100: #DEF8FC;
--sky-blue-200: #C2F2F9;
--sky-blue-300: #94E8F5;
--sky-blue-400: #5CDCF0;
--sky-blue-500: #2DD2EB;
--sky-blue-600: #13B4CD;
--sky-blue-700: #0F90A3;
--sky-blue-800: #0B6775;
--sky-blue-900: #07424B;
--sky-blue-950: #04292F;
}