Sky Blue
#93B7F6
BlueColor Codes
All color formats for development
HEX
#93B7F6RGB
rgb(147, 183, 246)HSL
hsl(218, 85%, 77%)OKLCH
oklch(0.777 0.099 261.3)CMYK
cmyk(40%, 26%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#6E9FF3
2#4A87F0
3#266FED
4#125BDA
5#0F4CB6
6#0C3D91
7#092E6D
8#061E49
9#030F24
Tints
Lighter variations
1#9DBEF7
2#A8C5F8
3#B3CDF9
4#BED4FA
5#C9DBFB
6#D4E2FB
7#DEE9FC
8#E9F1FD
9#F4F8FE
Tones
Muted variations
1#97B8F1
2#9CBAEC
3#A1BBE7
4#A6BCE2
5#ABBEDD
6#B0BFD8
7#B5C0D3
8#BAC2CE
9#BFC3C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F6 #F1F6FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DEE9 #DEE9FC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C2D6 #C2D6FA | Secondary backgroundsInput backgroundsDividers |
| 300 | 92B7 #92B7F6 | BordersInactive statesPlaceholder text |
| 400 | 5A92 #5A92F2 | Disabled statesSecondary iconsMuted text |
| 500 | 2B72 #2B72EE | Primary brand colorCTAsActive elementsLinks |
| 600 | 1157 #1157D0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 0D45 #0D45A5 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0A31 #0A3176 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0620 #06204B | Primary textHigh emphasis contentDark headings |
| 950 | 0414 #04142F | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1F6FE;
--sky-blue-100: #DEE9FC;
--sky-blue-200: #C2D6FA;
--sky-blue-300: #92B7F6;
--sky-blue-400: #5A92F2;
--sky-blue-500: #2B72EE;
--sky-blue-600: #1157D0;
--sky-blue-700: #0D45A5;
--sky-blue-800: #0A3176;
--sky-blue-900: #06204B;
--sky-blue-950: #04142F;
}