Sky Blue
#9D8AFF
BlueColor Codes
All color formats for development
HEX
#9D8AFFRGB
rgb(157, 138, 255)HSL
hsl(250, 100%, 77%)OKLCH
oklch(0.702 0.167 288.8)CMYK
cmyk(38%, 46%, 0%, 0%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7D62FF
2#5C3BFF
3#3B14FF
4#2700EC
5#2100C4
6#1A009D
7#140076
8#0D004F
9#070027
Tints
Lighter variations
1#A795FF
2#B1A1FF
3#BBADFF
4#C4B9FF
5#CEC4FF
6#D8D0FF
7#E2DCFF
8#EBE8FF
9#F5F3FF
Tones
Muted variations
1#A190F9
2#A595F3
3#A99BED
4#ADA1E8
5#B1A7E2
6#B5ADDC
7#B9B3D6
8#BDB9D0
9#C0BECA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F0 #F2F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1DB #E1DBFF | Light backgroundsTable row hoverSkeleton loading |
| 200 | C8BD #C8BDFF | Secondary backgroundsInput backgroundsDividers |
| 300 | 9D8A #9D8AFF | BordersInactive statesPlaceholder text |
| 400 | 6A4D #6A4DFF | Disabled statesSecondary iconsMuted text |
| 500 | 401A #401AFF | Primary brand colorCTAsActive elementsLinks |
| 600 | 2500 #2500E0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1E00 #1E00B3 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1500 #150080 | Text on light backgroundsHeadingsStrong borders |
| 900 | 0E00 #0E0052 | Primary textHigh emphasis contentDark headings |
| 950 | 0900 #090033 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F2F0FF;
--sky-blue-100: #E1DBFF;
--sky-blue-200: #C8BDFF;
--sky-blue-300: #9D8AFF;
--sky-blue-400: #6A4DFF;
--sky-blue-500: #401AFF;
--sky-blue-600: #2500E0;
--sky-blue-700: #1E00B3;
--sky-blue-800: #150080;
--sky-blue-900: #0E0052;
--sky-blue-950: #090033;
}