Sky Blue
#4DE1FF
CyanColor Codes
All color formats for development
HEX
#4DE1FFRGB
rgb(77, 225, 255)HSL
hsl(190, 100%, 65%)OKLCH
oklch(0.844 0.129 214.1)CMYK
cmyk(70%, 12%, 0%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2BDCFF
2#0AD6FF
3#00C1E8
4#00A6C7
5#008AA6
6#006E85
7#005363
8#003742
9#001C21
Tints
Lighter variations
1#5EE4FF
2#70E7FF
3#82EAFF
4#94EDFF
5#A6F0FF
6#B8F3FF
7#C9F6FF
8#DBF9FF
9#EDFCFF
Tones
Muted variations
1#55DBF6
2#5ED5ED
3#67CFE4
4#70C9DB
5#79C3D2
6#82BEC9
7#8BB8C1
8#94B2B8
9#9DACAF
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FC #F0FCFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DBF9 #DBF9FF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDF4 #BDF4FF | Secondary backgroundsInput backgroundsDividers |
| 300 | 8AEB #8AEBFF | BordersInactive statesPlaceholder text |
| 400 | 4DE1 #4DE1FF | Disabled statesSecondary iconsMuted text |
| 500 | 1AD9 #1AD9FF | Primary brand colorCTAsActive elementsLinks |
| 600 | 00BB #00BBE0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0095 #0095B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 006A #006A80 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0044 #004452 | Primary textHigh emphasis contentDark headings |
| 950 | 002B #002B33 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F0FCFF;
--sky-blue-100: #DBF9FF;
--sky-blue-200: #BDF4FF;
--sky-blue-300: #8AEBFF;
--sky-blue-400: #4DE1FF;
--sky-blue-500: #1AD9FF;
--sky-blue-600: #00BBE0;
--sky-blue-700: #0095B3;
--sky-blue-800: #006A80;
--sky-blue-900: #004452;
--sky-blue-950: #002B33;
}