Sky Blue
#8DD1FC
BlueColor Codes
All color formats for development
HEX
#8DD1FCRGB
rgb(141, 209, 252)HSL
hsl(203, 95%, 77%)OKLCH
oklch(0.831 0.091 237.1)CMYK
cmyk(44%, 17%, 0%, 1%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#66C2FB
2#40B3FA
3#1AA4F9
4#0690E6
5#0578BF
6#046099
7#034873
8#02304D
9#011826
Tints
Lighter variations
1#98D6FC
2#A4DAFD
3#AFDFFD
4#BAE4FD
5#C6E8FE
6#D1EDFE
7#DDF1FE
8#E8F6FE
9#F4FAFF
Tones
Muted variations
1#92D0F6
2#98CFF1
3#9DCDEB
4#A3CCE6
5#A8CBE0
6#AECADB
7#B4C8D5
8#B9C7CF
9#BFC6CA
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F0F9 #F0F9FF | BackgroundsSubtle highlightsCard backgrounds |
| 100 | DCF1 #DCF1FE | Light backgroundsTable row hoverSkeleton loading |
| 200 | BEE5 #BEE5FD | Secondary backgroundsInput backgroundsDividers |
| 300 | 8DD1 #8DD1FC | BordersInactive statesPlaceholder text |
| 400 | 51BA #51BAFB | Disabled statesSecondary iconsMuted text |
| 500 | 1FA6 #1FA6F9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 0689 #0689DB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 046D #046DAE | Active/pressed statesDark mode accentsSecondary text |
| 800 | 034E #034E7C | Text on light backgroundsHeadingsStrong borders |
| 900 | 0232 #023250 | Primary textHigh emphasis contentDark headings |
| 950 | 011F #011F32 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F0F9FF;
--sky-blue-100: #DCF1FE;
--sky-blue-200: #BEE5FD;
--sky-blue-300: #8DD1FC;
--sky-blue-400: #51BAFB;
--sky-blue-500: #1FA6F9;
--sky-blue-600: #0689DB;
--sky-blue-700: #046DAE;
--sky-blue-800: #034E7C;
--sky-blue-900: #023250;
--sky-blue-950: #011F32;
}