Sky Blue
#969FF3
BlueColor Codes
All color formats for development
HEX
#969FF3RGB
rgb(150, 159, 243)HSL
hsl(234, 79%, 77%)OKLCH
oklch(0.729 0.122 278.2)CMYK
cmyk(38%, 35%, 0%, 5%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#737FEF
2#505FEA
3#2D3FE6
4#192BD3
5#1524B0
6#101D8D
7#0C1669
8#080E46
9#040723
Tints
Lighter variations
1#A1A9F4
2#ABB2F5
3#B6BCF6
4#C0C6F8
5#CBCFF9
6#D5D9FA
7#E0E2FB
8#EAECFD
9#F5F5FE
Tones
Muted variations
1#9BA3EE
2#9FA7E9
3#A4AAE5
4#A9AEE0
5#ADB2DC
6#B2B6D7
7#B6B9D2
8#BBBDCE
9#C0C1C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F3 #F1F3FD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFE2 #DFE2FB | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4C9 #C4C9F8 | Secondary backgroundsInput backgroundsDividers |
| 300 | 969F #969FF3 | BordersInactive statesPlaceholder text |
| 400 | 5F6D #5F6DEC | Disabled statesSecondary iconsMuted text |
| 500 | 3244 #3244E7 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1829 #1829C9 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1321 #1321A0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0D17 #0D1772 | Text on light backgroundsHeadingsStrong borders |
| 900 | 090F #090F49 | Primary textHigh emphasis contentDark headings |
| 950 | 0509 #05092E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1F3FD;
--sky-blue-100: #DFE2FB;
--sky-blue-200: #C4C9F8;
--sky-blue-300: #969FF3;
--sky-blue-400: #5F6DEC;
--sky-blue-500: #3244E7;
--sky-blue-600: #1829C9;
--sky-blue-700: #1321A0;
--sky-blue-800: #0D1772;
--sky-blue-900: #090F49;
--sky-blue-950: #05092E;
}