Steel Blue
#2193C0
BlueColor Codes
All color formats for development
HEX
#2193C0RGB
rgb(33, 147, 192)HSL
hsl(197, 71%, 44%)OKLCH
oklch(0.623 0.116 230.6)CMYK
cmyk(83%, 23%, 0%, 25%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#1D84AD
2#1A7599
3#176786
4#145873
5#104960
6#0D3B4D
7#0A2C3A
8#071D26
9#030F13
Tints
Lighter variations
1#25A5D8
2#3CB0DE
3#54BAE2
4#6CC4E6
5#85CEEA
6#9DD7EE
7#B6E1F3
8#CEEBF7
9#E7F5FB
Tones
Muted variations
1#298FB8
2#308CB0
3#3888A8
4#4085A0
5#488198
6#507E90
7#587B88
8#607780
9#687478
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F2FA #F2FAFD | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E0F3 #E0F3FA | Light backgroundsTable row hoverSkeleton loading |
| 200 | C6E8 #C6E8F5 | Secondary backgroundsInput backgroundsDividers |
| 300 | 9BD6 #9BD6EE | BordersInactive statesPlaceholder text |
| 400 | 66C1 #66C1E5 | Disabled statesSecondary iconsMuted text |
| 500 | 3BB0 #3BB0DE | Primary brand colorCTAsActive elementsLinks |
| 600 | 2193 #2193C0 | Hover statesFocus ringsPrimary buttons hover |
| 700 | 1A75 #1A7599 | Active/pressed statesDark mode accentsSecondary text |
| 800 | 1253 #12536D | Text on light backgroundsHeadingsStrong borders |
| 900 | 0C35 #0C3546 | Primary textHigh emphasis contentDark headings |
| 950 | 0721 #07212C | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--steel-blue-50: #F2FAFD;
--steel-blue-100: #E0F3FA;
--steel-blue-200: #C6E8F5;
--steel-blue-300: #9BD6EE;
--steel-blue-400: #66C1E5;
--steel-blue-500: #3BB0DE;
--steel-blue-600: #2193C0;
--steel-blue-700: #1A7599;
--steel-blue-800: #12536D;
--steel-blue-900: #0C3546;
--steel-blue-950: #07212C;
}