Steel Blue
#448D9C
CyanColor Codes
All color formats for development
HEX
#448D9CRGB
rgb(68, 141, 156)HSL
hsl(190, 39%, 44%)OKLCH
oklch(0.603 0.076 212.9)CMYK
cmyk(56%, 10%, 0%, 39%)Accessibility
WCAG contrast compliance
Tailwind Scale
50-950 scale matching Tailwind CSS naming
Shades
Darker variations
1#3E7F8C
2#37717D
3#30636D
4#29555E
5#22474E
6#1B393E
7#152A2F
8#0E1C1F
9#070E10
Tints
Lighter variations
1#4D9FB0
2#60AAB9
3#74B5C2
4#88C0CB
5#9CCAD3
6#B0D5DC
7#C3DFE5
8#D7EAEE
9#EBF4F6
Tones
Muted variations
1#498A98
2#4D8893
3#52858F
4#56828A
5#5A7F86
6#5F7C82
7#63797D
8#677679
9#6C7375
Usage Guidelines
Recommended use cases for each shade level
| Level | Color | Typical Use Cases |
|---|---|---|
| 50 | F4F9 #F4F9FA | BackgroundsSubtle highlightsCard backgrounds |
| 100 | E6F2 #E6F2F4 | Light backgroundsTable row hoverSkeleton loading |
| 200 | D1E6 #D1E6EB | Secondary backgroundsInput backgroundsDividers |
| 300 | ADD4 #ADD4DB | BordersInactive statesPlaceholder text |
| 400 | 83BD #83BDC9 | Disabled statesSecondary iconsMuted text |
| 500 | 5FAA #5FAAB9 | Primary brand colorCTAsActive elementsLinks |
| 600 | 448D #448D9C | Hover statesFocus ringsPrimary buttons hover |
| 700 | 3670 #36707C | Active/pressed statesDark mode accentsSecondary text |
| 800 | 2750 #275059 | Text on light backgroundsHeadingsStrong borders |
| 900 | 1933 #193339 | Primary textHigh emphasis contentDark headings |
| 950 | 1020 #102023 | Maximum contrast textDark mode backgrounds |
Export Code
Copy ready-to-use code for your project
:root {
--steel-blue-50: #F4F9FA;
--steel-blue-100: #E6F2F4;
--steel-blue-200: #D1E6EB;
--steel-blue-300: #ADD4DB;
--steel-blue-400: #83BDC9;
--steel-blue-500: #5FAAB9;
--steel-blue-600: #448D9C;
--steel-blue-700: #36707C;
--steel-blue-800: #275059;
--steel-blue-900: #193339;
--steel-blue-950: #102023;
}