CSS Color: SteelBlue

Named CSS color SteelBlue #4682B4 in HEX, rgb(70, 130, 180) in RGB, hsl(207, 44%, 49%) in HSL.

SteelBlueBlue

Color Values

FormatValueCSS Usage
NamedSteelBluecolor: SteelBlue;
HEX#4682B4color: #4682B4;
RGBrgb(70, 130, 180)color: rgb(70, 130, 180);
HSLhsl(207, 44%, 49%)color: hsl(207, 44%, 49%);

About SteelBlue

SteelBlue is a desaturated, medium blue that conveys industrial strength and reliability. At hex `#4682B4`, it sits at 207 degrees with only 44% saturation and 49% lightness. Its moderate saturation gives it a muted, professional character.

In web design, SteelBlue is an excellent workhorse color. It is calm enough for large areas (navigation bars, sidebars, backgrounds) yet distinctive enough to serve as a primary brand color. Its desaturated nature makes it one of the easiest blues to integrate into complex multi-color designs.

For accessibility, SteelBlue against white achieves approximately 4.0:1 contrast, passing WCAG AA for large text. It is a borderline color for normal text — consider darkening slightly for body copy. Against dark backgrounds, it provides good readability.

SteelBlue pairs well with warm neutrals like tan and cream, as well as white, light gray, and coral. It works particularly well in data-heavy dashboards and business applications. In Tailwind CSS, `blue-500` at reduced saturation or `slate-500` at increased blue are approximate matches.

FAQ

What is the hex code for SteelBlue?

The CSS named color SteelBlue has the hex code #4682B4. You can use it in CSS as color: #4682B4; or simply color: SteelBlue;.

What is SteelBlue in RGB?

In RGB notation, SteelBlue is rgb(70, 130, 180). Use it in CSS as color: rgb(70, 130, 180);.

What is SteelBlue in HSL?

In HSL notation, SteelBlue is hsl(207, 44%, 49%). Use it in CSS as color: hsl(207, 44%, 49%);.

What color category is SteelBlue?

SteelBlue belongs to the Blue color family in the CSS named colors specification.

Can I use the name "SteelBlue" directly in CSS?

Yes. All modern browsers support CSS named colors. You can write color: SteelBlue; or background-color: SteelBlue; directly in your stylesheet. Named colors are case-insensitive.

Try in Color Converter

Convert SteelBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.

Open Color Converter →