Sky Blue
#4EECFD
CyanColor Codes
All color formats for development
HEX
#4EECFDRGB
rgb(78, 236, 253)HSL
hsl(186, 98%, 65%)OKLCH
oklch(0.869 0.13 205.5)CMYK
cmyk(69%, 7%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2DE8FD
2#0DE5FD
3#02CFE6
4#02B1C5
5#0294A4
6#017683
7#015962
8#013B42
9#001E21
Tints
Lighter variations
1#60EEFD
2#72F0FE
3#83F2FE
4#95F3FE
5#A7F5FE
6#B8F7FE
7#CAF9FE
8#DCFBFF
9#EDFDFF
Tones
Muted variations
1#57E5F4
2#60DEEC
3#69D7E3
4#71D0DA
5#7AC9D1
6#83C2C9
7#8CBBC0
8#94B4B7
9#9DADAE
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0FD #F0FDFF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCFB #DCFBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | BDF8 #BDF8FE | Secondary backgroundsInput backgroundsDividers |
| 300 | 8BF2 #8BF2FE | BordersInactive statesPlaceholder text |
| 400 | 4EEC #4EECFD | Disabled statesSecondary iconsMuted text |
| 500 | 1CE6 #1CE6FD | Primary brand colorCTAsActive elementsLinks |
| 600 | 02C8 #02C8DE | Hover statesFocus ringsPrimary buttons hover |
| 700 | 029F #029FB1 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0172 #01727E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0149 #014951 | Primary textHigh emphasis contentDark headings |
| 950 | 012D #012D32 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F0FDFF;
--sky-blue-100: #DCFBFF;
--sky-blue-200: #BDF8FE;
--sky-blue-300: #8BF2FE;
--sky-blue-400: #4EECFD;
--sky-blue-500: #1CE6FD;
--sky-blue-600: #02C8DE;
--sky-blue-700: #029FB1;
--sky-blue-800: #01727E;
--sky-blue-900: #014951;
--sky-blue-950: #012D32;
}