Sky Blue
#60AFEB
BlueColor Codes
All color formats for development
HEX
#60AFEBRGB
rgb(96, 175, 235)HSL
hsl(206, 78%, 65%)OKLCH
oklch(0.728 0.117 243.3)CMYK
cmyk(59%, 26%, 0%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#43A0E8
2#2591E4
3#1A80CF
4#166EB1
5#125B94
6#0F4976
7#0B3759
8#07253B
9#04121E
Tints
Lighter variations
1#70B7ED
2#80BFEF
3#90C7F1
4#A0CFF3
5#B0D7F5
6#BFDFF7
7#CFE7F9
8#DFEFFB
9#EFF7FD
Tones
Muted variations
1#67AEE4
2#6EADDD
3#75ACD6
4#7CABD0
5#83AAC9
6#8AA9C2
7#91A9BB
8#98A8B4
9#9FA7AD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F8 #F1F8FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFEF #DFEFFB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4E1 #C4E1F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 97CA #97CAF2 | BordersInactive statesPlaceholder text |
| 400 | 60AF #60AFEB | Disabled statesSecondary iconsMuted text |
| 500 | 3398 #3398E6 | Primary brand colorCTAsActive elementsLinks |
| 600 | 197C #197CC8 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1463 #14639F | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0E46 #0E4671 | Text on light backgroundsHeadingsStrong borders |
| 900 | 092D #092D49 | Primary textHigh emphasis contentDark headings |
| 950 | 061C #061C2D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1F8FD;
--sky-blue-100: #DFEFFB;
--sky-blue-200: #C4E1F8;
--sky-blue-300: #97CAF2;
--sky-blue-400: #60AFEB;
--sky-blue-500: #3398E6;
--sky-blue-600: #197CC8;
--sky-blue-700: #14639F;
--sky-blue-800: #0E4671;
--sky-blue-900: #092D49;
--sky-blue-950: #061C2D;
}