Sky Blue
#9A8FFA
BlueColor Codes
All color formats for development
HEX
#9A8FFARGB
rgb(154, 143, 250)HSL
hsl(246, 91%, 77%)OKLCH
oklch(0.705 0.153 286.5)CMYK
cmyk(38%, 43%, 0%, 2%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#7869F8
2#5644F6
3#341EF4
4#200BE1
5#1B09BC
6#150796
7#100571
8#0B044B
9#050226
Tints
Lighter variations
1#A49AFA
2#AEA5FB
3#B8B1FB
4#C2BCFC
5#CCC7FC
6#D6D2FD
7#E1DDFD
8#EBE9FE
9#F5F4FE
Tones
Muted variations
1#9E94F4
2#A29AEF
3#A69FEA
4#ABA4E4
5#AFAADF
6#B3AFDA
7#B8B4D4
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 | 9A8F #9A8FFA | BordersInactive statesPlaceholder text |
| 400 | 6555 #6555F7 | Disabled statesSecondary iconsMuted text |
| 500 | 3924 #3924F5 | Primary brand colorCTAsActive elementsLinks |
| 600 | 1F0A #1F0AD6 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1808 #1808AA | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1106 #11067A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0B04 #0B044E | Primary textHigh emphasis contentDark headings |
| 950 | 0702 #070231 | 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: #9A8FFA;
--sky-blue-400: #6555F7;
--sky-blue-500: #3924F5;
--sky-blue-600: #1F0AD6;
--sky-blue-700: #1808AA;
--sky-blue-800: #11067A;
--sky-blue-900: #0B044E;
--sky-blue-950: #070231;
}