Sky Blue
#9B8CFD
BlueColor Codes
All color formats for development
HEX
#9B8CFDRGB
rgb(155, 140, 253)HSL
hsl(248, 97%, 77%)OKLCH
oklch(0.702 0.162 287.6)CMYK
cmyk(39%, 45%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7965FD
2#573EFC
3#3617FB
4#2204E8
5#1C03C1
6#17029B
7#110274
8#0B014D
9#060127
Tints
Lighter variations
1#A597FD
2#AFA3FE
3#B9AEFE
4#C3BAFE
5#CDC5FE
6#D7D1FE
7#E1DCFE
8#EBE8FF
9#F5F3FF
Tones
Muted variations
1#9F91F8
2#A397F2
3#A79DEC
4#ABA2E6
5#AFA8E1
6#B4AEDB
7#B8B3D5
8#BCB9D0
9#C0BFCA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2F0 #F2F0FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0DC #E0DCFE | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6BE #C6BEFE | Secondary backgroundsInput backgroundsDividers |
| 300 | 9B8B #9B8BFD | BordersInactive statesPlaceholder text |
| 400 | 664F #664FFC | Disabled statesSecondary iconsMuted text |
| 500 | 3B1D #3B1DFC | Primary brand colorCTAsActive elementsLinks |
| 600 | 2003 #2003DD | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1A03 #1A03B0 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1202 #12027E | Text on light backgroundsHeadingsStrong borders |
| 900 | 0C01 #0C0150 | Primary textHigh emphasis contentDark headings |
| 950 | 0701 #070132 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F2F0FF;
--sky-blue-100: #E0DCFE;
--sky-blue-200: #C6BEFE;
--sky-blue-300: #9B8BFD;
--sky-blue-400: #664FFC;
--sky-blue-500: #3B1DFC;
--sky-blue-600: #2003DD;
--sky-blue-700: #1A03B0;
--sky-blue-800: #12027E;
--sky-blue-900: #0C0150;
--sky-blue-950: #070132;
}