CSS Named Color Reference

Steel Blue

Steel Blue·#4682B4

Steel Blue is a muted CSS named blue at #4682B4 with a cooler, more grounded tone than Royal Blue or Dodger Blue. Use it when you need a professional interface blue for dashboards, product chrome, data surfaces, and dependable system accents.

Recommended text colorDark text
Body text pairing4.18:1
Strongest RoleDashboards, side navigation, and dense product surfaces
Generate PaletteOpen Converter

Technical Values

Exact numeric values for cross-tool conversion, token mapping, and accessibility review.

HEX#4682B4Primary token
RGB70, 130, 180Screen values
HSL207, 44%, 49%Hue and lightness
CMYK61, 28, 0, 29Print handoff
LAB52, -4, -32Perceptual reference

Tonal Direction

Scan the ramp from light to dark to judge how Steel Blue behaves across action states, layered surfaces, and supporting accents.

100#DEE9F2
300#AAC6DD
500#6799C2
600#4682B4
800#325E82

Contrast & Interface Preview

Not every foreground and background pairing behaves the same. Use these checks to decide when white text, dark text, or the color itself should take the lead.

White text on this color

Best for reversed buttons, tabs, badges, and filled action surfaces.

4.11:1Large text / UI only

Dark text on this color

Works for larger headings and selective UI blocks, but not for dense body copy.

4.18:1Large text / UI only

This color on light surface

Use this pairing when Steel Blue becomes the link, icon, border, or emphasis color on very light surfaces.

3.90:1Large text / UI only
Recommended text colorDark text

Dark text reaches 4.18:1 against Steel Blue, which is strong enough for body text and standard action surfaces.

Where This Color Works

  • Use Steel Blue when you need a sober interface blue for dashboards, side navigation, table highlights, and product infrastructure surfaces.
  • It is less vivid than Cornflower Blue and Dodger Blue, but more approachable than Navy, which makes it useful for denser enterprise UI and data-heavy screens.
  • Pair it with off-white backgrounds, slate or charcoal neutrals, and pale blue-grays if you want a technical system with depth but without sharp visual pressure.

Reference Context

Color Notes

Steel Blue is sourced from the published CSS Standard Colors library and retained here as a searchable reference swatch for product, interface, and branding work.

Hue Family

Trust-building blues for enterprise and SaaS.

Source Library
CSS Named Colors

Related Blues

Royal Blue

Royal Blue

#4169E1·CSS Standard Colors

Cornflower Blue

Cornflower Blue

#6495ED·CSS Standard Colors

Light Steel Blue

Light Steel Blue

#B0C4DE·CSS Standard Colors

Sky Blue

Sky Blue

#87CEEB·CSS Standard Colors

Navy

Navy

#000080·CSS Standard Colors

Palette Starting Points

Graphite Blueprint

Open Palette Library

Deep Sea Odyssey

Open Palette Library

Open Range Blue Clover

Open Palette Library

Implementation Snippets

Reference-ready snippets for CSS variables, utility-first styling, and token exports.

CSS Variables
:root {
  --color-steel-blue: #4682B4;
  --color-steel-blue-rgb: 70 130 180;
}

Drop into a global token file or CSS variable layer.

Utility Class
class="bg-[#4682B4] text-white"
class="hover:bg-[#325E82] ring-1 ring-[#4682B4]"

Direct utility usage for a fast prototype or content block.

JSON Token
{
  "steelBlue": "#4682B4",
  "steelBlueRgb": [70, 130, 180],
  "steelBlueHsl": [207, 44, 49]
}

Useful for design token exports and API-driven theme objects.

Move This Color Into the Workflow

Carry Steel Blue into conversion, brand palette generation, and palette exploration workflows to test how it behaves across interface scenarios.

Generate PaletteBrowse More Colors