Sky Blue
#3FC7D9
CyanColor Codes
All color formats for development
HEX
#3FC7D9RGB
rgb(63, 199, 217)HSL
hsl(187, 67%, 55%)OKLCH
oklch(0.765 0.116 207.9)CMYK
cmyk(71%, 8%, 0%, 15%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#2ABFD3
2#25AABB
3#2095A4
4#1C7F8D
5#176A75
6#13555E
7#0E4046
8#092A2F
9#051517
Tints
Lighter variations
1#53CDDD
2#66D2E1
3#79D8E4
4#8CDEE8
5#9FE3EC
6#B2E9F0
7#C6EEF4
8#D9F4F7
9#ECF9FB
Tones
Muted variations
1#47C1D1
2#4FBBCA
3#56B6C2
4#5EB0BA
5#66AAB3
6#6DA4AB
7#759EA3
8#7D989C
9#859294
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FB #F2FBFC | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E1F6 #E1F6F9 | Light backgroundsTable row hoverSkeleton loading |
| 200 | C8EF #C8EFF4 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9DE2 #9DE2EC | BordersInactive statesPlaceholder text |
| 400 | 6AD4 #6AD4E2 | Disabled statesSecondary iconsMuted text |
| 500 | 3FC7 #3FC7D9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 25AA #25AABB | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1D87 #1D8795 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1560 #15606A | Text on light backgroundsHeadingsStrong borders |
| 900 | 0D3E #0D3E44 | Primary textHigh emphasis contentDark headings |
| 950 | 0827 #08272B | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--sky-blue-50: #F2FBFC;
--sky-blue-100: #E1F6F9;
--sky-blue-200: #C8EFF4;
--sky-blue-300: #9DE2EC;
--sky-blue-400: #6AD4E2;
--sky-blue-500: #3FC7D9;
--sky-blue-600: #25AABB;
--sky-blue-700: #1D8795;
--sky-blue-800: #15606A;
--sky-blue-900: #0D3E44;
--sky-blue-950: #08272B;
}