Sky Blue
#9695F4
BlueColor Codes
All color formats for development
HEX
#9695F4RGB
rgb(150, 149, 244)HSL
hsl(241, 81%, 77%)OKLCH
oklch(0.71 0.137 282.8)CMYK
cmyk(39%, 39%, 0%, 4%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7371F0
2#504EEC
3#2D2AE9
4#1A16D5
5#1513B2
6#110F8E
7#0D0B6B
8#090747
9#040424
Tints
Lighter variations
1#A19FF5
2#ABAAF6
3#B6B5F7
4#C0BFF8
5#CBCAF9
6#D5D5FB
7#E0DFFC
8#EAEAFD
9#F5F4FE
Tones
Muted variations
1#9B9AEF
2#A09EEA
3#A4A3E6
4#A9A8E1
5#ADADDC
6#B2B1D7
7#B7B6D3
8#BBBBCE
9#C0C0C9
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F1F1 #F1F1FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DFDF #DFDFFC | Light backgroundsTable row hoverSkeleton loading |
| 200 | C4C3 #C4C3F9 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9695 #9695F4 | BordersInactive statesPlaceholder text |
| 400 | 605D #605DEE | Disabled statesSecondary iconsMuted text |
| 500 | 322F #322FE9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1815 #1815CB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1311 #1311A2 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 0E0C #0E0C73 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0908 #09084A | Primary textHigh emphasis contentDark headings |
| 950 | 0605 #06052E | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F1F1FE;
--sky-blue-100: #DFDFFC;
--sky-blue-200: #C4C3F9;
--sky-blue-300: #9695F4;
--sky-blue-400: #605DEE;
--sky-blue-500: #322FE9;
--sky-blue-600: #1815CB;
--sky-blue-700: #1311A2;
--sky-blue-800: #0E0C73;
--sky-blue-900: #09084A;
--sky-blue-950: #06052E;
}