Sky Blue
#A8D6E1
CyanColor Codes
All color formats for development
HEX
#A8D6E1RGB
rgb(168, 214, 225)HSL
hsl(192, 49%, 77%)OKLCH
oklch(0.847 0.05 214)CMYK
cmyk(25%, 5%, 0%, 12%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#8AC8D7
2#6DBACD
3#50ACC3
4#3C98B0
5#327F92
6#286675
7#1E4C58
8#14333B
9#0A191D
Tints
Lighter variations
1#B0DAE4
2#B9DEE7
3#C2E2EA
4#CBE6ED
5#D3EAF0
6#DCEEF3
7#E5F3F6
8#EEF7F9
9#F6FBFC
Tones
Muted variations
1#AAD4DE
2#ADD2DB
3#B0D0D8
4#B3CFD6
5#B6CDD3
6#B9CBD0
7#BCCACD
8#BFC8CA
9#C1C6C7
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4FA #F4FAFB | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E4F2 #E4F2F6 | Light backgroundsTable row hoverSkeleton loading |
| 200 | CEE8 #CEE8EE | Secondary backgroundsInput backgroundsDividers |
| 300 | A8D6 #A8D6E1 | BordersInactive statesPlaceholder text |
| 400 | 7AC0 #7AC0D1 | Disabled statesSecondary iconsMuted text |
| 500 | 54AE #54AEC4 | Primary brand colorCTAsActive elementsLinks |
| 600 | 3991 #3991A7 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 2E73 #2E7385 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2152 #21525F | Text on light backgroundsHeadingsStrong borders |
| 900 | 1535 #15353D | Primary textHigh emphasis contentDark headings |
| 950 | 0D21 #0D2126 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F4FAFB;
--sky-blue-100: #E4F2F6;
--sky-blue-200: #CEE8EE;
--sky-blue-300: #A8D6E1;
--sky-blue-400: #7AC0D1;
--sky-blue-500: #54AEC4;
--sky-blue-600: #3991A7;
--sky-blue-700: #2E7385;
--sky-blue-800: #21525F;
--sky-blue-900: #15353D;
--sky-blue-950: #0D2126;
}