Steel Blue
#44609C
BlueColor Codes
All color formats for development
HEX
#44609CRGB
rgb(68, 96, 156)HSL
hsl(221, 39%, 44%)OKLCH
oklch(0.496 0.102 264.1)CMYK
cmyk(56%, 38%, 0%, 39%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3E578C
2#374D7D
3#30436D
4#293A5E
5#22304E
6#1B263E
7#151D2F
8#0E131F
9#070A10
Tints
Lighter variations
1#4D6CB0
2#607CB9
3#748DC2
4#889DCB
5#9CADD3
6#B0BEDC
7#C3CEE5
8#D7DEEE
9#EBEFF6
Tones
Muted variations
1#496298
2#4D6393
3#52658F
4#56678A
5#5A6886
6#5F6A82
7#636B7D
8#676D79
9#6C6F75
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F6 #F4F6FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E6EB #E6EBF4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D1D9 #D1D9EB | Secondary backgroundsInput backgroundsDividers |
| 300 | ADBC #ADBCDB | BordersInactive statesPlaceholder text |
| 400 | 8399 #8399C9 | Disabled statesSecondary iconsMuted text |
| 500 | 5F7C #5F7CB9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 4460 #44609C | Hover statesFocus ringsPrimary buttons hover |
| 700 | 364C #364C7C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2737 #273759 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1923 #192339 | Primary textHigh emphasis contentDark headings |
| 950 | 1016 #101623 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--steel-blue-50: #F4F6FA;
--steel-blue-100: #E6EBF4;
--steel-blue-200: #D1D9EB;
--steel-blue-300: #ADBCDB;
--steel-blue-400: #8399C9;
--steel-blue-500: #5F7CB9;
--steel-blue-600: #44609C;
--steel-blue-700: #364C7C;
--steel-blue-800: #273759;
--steel-blue-900: #192339;
--steel-blue-950: #101623;
}