Sky Blue
#9A90F9
BlueColor Codes
All color formats for development
HEX
#9A90F9RGB
rgb(154, 144, 249)HSL
hsl(246, 90%, 77%)OKLCH
oklch(0.707 0.151 286.2)CMYK
cmyk(38%, 42%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#786AF7
2#5745F5
3#3520F3
4#210CE0
5#1B0ABB
6#160895
7#100670
8#0B044B
9#050225
Tints
Lighter variations
1#A49BFA
2#AEA6FA
3#B8B1FB
4#C2BCFB
5#CDC7FC
6#D7D2FD
7#E1DEFD
8#EBE9FE
9#F5F4FE
Tones
Muted variations
1#9E95F4
2#A39AEF
3#A79FE9
4#ABA5E4
5#AFAADF
6#B3AFD9
7#B8B5D4
8#BCBACF
9#C0BFCA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F0 #F2F0FE | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0DD #E0DDFD | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6C0 #C6C0FC | Secondary backgroundsInput backgroundsDividers |
| 300 | 9A90 #9A90F9 | BordersInactive statesPlaceholder text |
| 400 | 6555 #6555F6 | Disabled statesSecondary iconsMuted text |
| 500 | 3A25 #3A25F4 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1F0B #1F0BD5 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1909 #1909AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1206 #120679 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0B04 #0B044E | Primary textHigh emphasis contentDark headings |
| 950 | 0703 #070330 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F2F0FE;
--sky-blue-100: #E0DDFD;
--sky-blue-200: #C6C0FC;
--sky-blue-300: #9A90F9;
--sky-blue-400: #6555F6;
--sky-blue-500: #3A25F4;
--sky-blue-600: #1F0BD5;
--sky-blue-700: #1909AA;
--sky-blue-800: #120679;
--sky-blue-900: #0B044E;
--sky-blue-950: #070330;
}