CSS named color

Steel Blue #4682B4

Steel Blue is blue. Below: every color format, WCAG contrast against black and white, its tints, shades and tones, and the harmonies that pair with it.

Color values

Contrast & accessibility

WCAG contrast ratio of Steel Blue used as a foreground on white and black backgrounds.

Aa The quick brown fox
4.11:1

On white

AA ✕ AAA ✕ AA Large ✓
Aa The quick brown fox
5.11:1

On black

AA ✓ AAA ✕ AA Large ✓

Tints, shades & tones

Systematic variations of Steel Blue — click any swatch to copy its hex.

Tintsmixed toward white
Shadesmixed toward black
Tonesmixed toward gray

Color harmonies

Palettes built from Steel Blue by rotating its hue. Each swatch links to its closest named color.

Complementary

#4682B4 ≈ Cadet Blue #B47746 ≈ Peru

Analogous

#46B4AE ≈ Light Sea Green #4682B4 ≈ Cadet Blue #464BB4 ≈ Dark Slate Blue

Triadic

#4682B4 ≈ Cadet Blue #B44682 ≈ Indian Red #82B446 ≈ Yellow Green

Split-complementary

#4682B4 ≈ Cadet Blue #B4464B ≈ Sienna #B4AE46 ≈ Dark Khaki

Tetradic

#4682B4 ≈ Cadet Blue #AE46B4 ≈ Medium Orchid #B47746 ≈ Peru #4BB446 ≈ Lime Green

Use Steel Blue in your stack

Tailwind (arbitrary value)

Works for any property: text-[#4682b4], border-[#4682b4].

CSS custom property

Reference it anywhere with var(--color).

Build a full theme

Turn Steel Blue into a complete shadcn/ui palette — light & dark, contrast-checked, one-command install.

Extract a theme →

Similar named colors

Cadet Blue #5F9EA0 Slate Gray #708090 Light Slate Gray #778899 Royal Blue #4169E1 Slate Blue #6A5ACD Cornflower Blue #6495ED

← All CSS named colors