Steel Blue Color (#4682B4)
Steel Blue is a CSS named color defined as hex code #4682B4. Steel Blue is a muted, slightly grayish mid-tone blue. Its moderate saturation makes it calm and businesslike rather than vivid.
Color Overview & Formats
steelblueLuminance: 0.2056| Format | Syntax / Values | Notes | Action |
|---|---|---|---|
| HEX | #4682B4 | 6-digit hex web code | |
| RGB | rgb(70, 130, 180) | Red, Green, Blue channels (0-255) | |
| HSL | hsl(207, 44%, 49%) | Hue (207°), Saturation (44%), Lightness (49%) | |
| HSV / HSB | hsv(207, 61%, 71%) | Hue, Saturation (61%), Value/Brightness (71%) | |
| CMYK | cmyk(61%, 28%, 0%, 29%) | Digital mathematical approximation (non-print) | |
| OKLCH | oklch(0.588 0.099 245.7) | Perceptually uniform color space (CSS Color 4 approximation) |
background-color: #4682B4; /* or steelblue */- Select color format: Choose the desired format (HEX #4682B4, RGB, or HSL).
- Copy the code: Click the copy button or press Tab+Enter to store in clipboard.
- Pair with black text: Black text on Steel Blue reaches 5.11:1 (WCAG AA).
What Colors Go With Steel Blue?
These 6 colors all go well with Steel Blue (#4682B4), and each one is a standard CSS named color. The ratio is the WCAG 2.2 contrast of that color on Steel Blue: at 4.5:1 or above it works for text; below that, use it for backgrounds and accents.
Harmonious Palettes & Tints
The palettes below are algorithmically generated across standard intervals based on Steel Blue (HSL 207°). Each group offers full palette copy and live preview:
Complementary Harmony
Hue rotated 180 degrees on the HSL wheel (207° to 27°), keeping the original saturation and lightness.
Analogous Harmony
Hues 30 degrees either side (177° and 237°), keeping the original saturation and lightness.
Triadic Harmony
Hues spaced evenly by 120 degrees (327° and 87°), keeping the original saturation and lightness.
Tints & Shades
Mixed with white (tints) and black (shades) in sRGB at 60% and 30%.
WCAG 2.2 Text Readability & Contrast Check
Under WCAG 2.2 criteria, regular body text requires at least 4.5:1 (AA) and large text requires at least 3.0:1. The table below displays calculated contrast ratios:
| Foreground Color | Contrast Ratio | Normal Text (AA) | Large Text (AA) | Normal Text AAA (>= 7.0:1) |
|---|---|---|---|---|
Pure Black (#000000) | 5.11:1 | Pass | Pass | Fail |
Pure White (#FFFFFF) | 4.11:1 | Fail | Pass | Fail |
Dark Charcoal (#212529) | 3.76:1 | Fail | Pass | Fail |
Mid Gray (#666666) | 1.40:1 | Fail | Fail | Fail |
Interactive Contrast Tester
Enter text foreground and background colors to verify WCAG legibility:
This is sample body text rendered directly to verify contrast and readability.
Steel Blue Background Download
Download standard 1920x1080 solid desktop wallpaper or generate mobile wallpaper:
Standard Wallpaper: 1920x1080 PNG (#4682B4)Download Options
All wallpaper files precisely match the W3C standard color value:
CSS Standard & Usage Notes
steelblue = #4682b4 (rgb(70, 130, 180))
UI Design & Accessibility Guidelines
Use it for dashboards, charts, secondary buttons and business sites. On Steel Blue, black text passes WCAG AA at every size (5.11:1); white text passes only for large text (4.11:1).
Frequently Asked Questions (FAQ)
Can I use black text on Steel Blue?
Yes. Black text on Steel Blue has a WCAG 2.2 contrast ratio of 5.11:1, which passes AA (4.5:1) for all text sizes but not the stricter AAA level (7:1) for body text.
Can I use white text on Steel Blue?
Only for large text. White text on Steel Blue has a WCAG 2.2 contrast ratio of 4.11:1: enough for large text (3:1) but below the 4.5:1 needed for body text.
What colors go with Steel Blue?
Black, White, Ivory, Wheat, Coral and Dark Slate Gray all go well with Steel Blue. Black (5.11:1) has enough contrast for text on Steel Blue; White, Ivory, Wheat, Coral and Dark Slate Gray work better as a background or accent.
Can I use steel blue for body text on white?
Not quite. Steel Blue (#4682B4) has a contrast of 4.11:1 on white, just under the 4.5:1 WCAG AA minimum for body text. It passes for large text and for graphics.