Sky Blue
#5CE8F0
CyanColor Codes
All color formats for development
HEX
#5CE8F0RGB
rgb(92, 232, 240)HSL
hsl(183, 83%, 65%)OKLCH
oklch(0.859 0.12 200.5)CMYK
cmyk(62%, 3%, 0%, 6%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3DE4ED
2#1FE0EA
3#14CBD4
4#11AEB6
5#0E9198
6#0B7479
7#08575B
8#063A3D
9#031D1E
Tints
Lighter variations
1#6CEBF1
2#7CEDF3
3#8DEFF4
4#9DF1F6
5#ADF4F7
6#BEF6F9
7#CEF8FA
8#DEFAFC
9#EFFDFD
Tones
Muted variations
1#63E2E8
2#6ADBE1
3#72D4DA
4#79CED2
5#81C7CB
6#88C0C3
7#90BABC
8#97B3B5
9#9EACAD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FD #F1FDFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEFA #DEFAFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2F7 #C2F7F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94F0 #94F0F5 | BordersInactive statesPlaceholder text |
| 400 | 5CE8 #5CE8F0 | Disabled statesSecondary iconsMuted text |
| 500 | 2DE2 #2DE2EB | Primary brand colorCTAsActive elementsLinks |
| 600 | 13C4 #13C4CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0F9C #0F9CA3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B6F #0B6F75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0747 #07474B | Primary textHigh emphasis contentDark headings |
| 950 | 042D #042D2F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1FDFE;
--sky-blue-100: #DEFAFC;
--sky-blue-200: #C2F7F9;
--sky-blue-300: #94F0F5;
--sky-blue-400: #5CE8F0;
--sky-blue-500: #2DE2EB;
--sky-blue-600: #13C4CD;
--sky-blue-700: #0F9CA3;
--sky-blue-800: #0B6F75;
--sky-blue-900: #07474B;
--sky-blue-950: #042D2F;
}