Sky Blue
#61BDEA
BlueColor Codes
All color formats for development
HEX
#61BDEARGB
rgb(97, 189, 234)HSL
hsl(200, 77%, 65%)OKLCH
oklch(0.759 0.109 231.9)CMYK
cmyk(59%, 19%, 0%, 8%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#44B0E7
2#26A4E3
3#1B92CD
4#177DB0
5#136893
6#0F5375
7#0B3E58
8#082A3B
9#04151D
Tints
Lighter variations
1#71C3ED
2#81CAEF
3#90D1F1
4#A0D7F3
5#B0DEF5
6#C0E4F7
7#D0EBF9
8#DFF2FB
9#EFF8FD
Tones
Muted variations
1#68BAE4
2#6FB8DD
3#76B6D6
4#7DB3CF
5#83B1C8
6#8AAFC1
7#91ADBA
8#98AAB3
9#9FA8AD
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F9 #F1F9FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFF2 #DFF2FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4E6 #C4E6F7 | Secondary backgroundsInput backgroundsDividers |
| 300 | 97D3 #97D3F2 | BordersInactive statesPlaceholder text |
| 400 | 61BD #61BDEA | Disabled statesSecondary iconsMuted text |
| 500 | 34AA #34AAE5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1A8D #1A8DC7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1570 #15709E | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0F50 #0F5071 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0933 #093348 | Primary textHigh emphasis contentDark headings |
| 950 | 0620 #06202D | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1F9FD;
--sky-blue-100: #DFF2FB;
--sky-blue-200: #C4E6F7;
--sky-blue-300: #97D3F2;
--sky-blue-400: #61BDEA;
--sky-blue-500: #34AAE5;
--sky-blue-600: #1A8DC7;
--sky-blue-700: #15709E;
--sky-blue-800: #0F5071;
--sky-blue-900: #093348;
--sky-blue-950: #06202D;
}