Sky Blue
#94DEF5
CyanColor Codes
All color formats for development
HEX
#94DEF5RGB
rgb(148, 222, 245)HSL
hsl(194, 83%, 77%)OKLCH
oklch(0.86 0.08 219.4)CMYK
cmyk(40%, 9%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#70D3F2
2#4CC8EE
3#28BDEB
4#14AAD8
5#118EB4
6#0D7190
7#0A556C
8#073948
9#031C24
Tints
Lighter variations
1#9EE2F6
2#A9E5F7
3#B4E8F8
4#BFEBF9
5#C9EFFA
6#D4F2FB
7#DFF5FC
8#EAF8FD
9#F4FCFE
Tones
Muted variations
1#99DCF0
2#9DD9EB
3#A2D7E6
4#A7D4E2
5#ACD1DD
6#B1CFD8
7#B6CCD3
8#BBCACE
9#BFC7C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1FB #F1FBFE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEF5 #DEF5FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2ED #C2EDF9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 94DE #94DEF5 | BordersInactive statesPlaceholder text |
| 400 | 5CCD #5CCDF0 | Disabled statesSecondary iconsMuted text |
| 500 | 2DBF #2DBFEB | Primary brand colorCTAsActive elementsLinks |
| 600 | 13A2 #13A2CD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0F81 #0F81A3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0B5C #0B5C75 | Text on light backgroundsHeadingsStrong borders |
| 900 | 073B #073B4B | Primary textHigh emphasis contentDark headings |
| 950 | 0425 #04252F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1FBFE;
--sky-blue-100: #DEF5FC;
--sky-blue-200: #C2EDF9;
--sky-blue-300: #94DEF5;
--sky-blue-400: #5CCDF0;
--sky-blue-500: #2DBFEB;
--sky-blue-600: #13A2CD;
--sky-blue-700: #0F81A3;
--sky-blue-800: #0B5C75;
--sky-blue-900: #073B4B;
--sky-blue-950: #04252F;
}