Steel Blue #4682b4

Metal’s temper, blue’s restraint.

RGB

70, 130, 180

HSL

207°, 44%, 49%

CMYK

61, 28, 0, 29

Luminance

0.2056

About Steel Blue

Steel blue, #4682b4, is blue quenched with gray — named for the bluish sheen of tempered steel. It is the engineer’s blue: capable, cool and unexcitable.

History

Bluing — heating steel until oxides shimmer blue — protected gun barrels and watch hands for centuries; the color name followed the process. X11 fixed #4682b4, and dashboards adopted it as the diplomatic blue between corporate navy and friendly sky.

Psychology

Steel blue reads competent and calm under load — trust without salesmanship. It is blue that shows its work.

In design

Steel blue is a workhorse: AA-passing text on white (4.8:1), even-tempered as charts’ default series color, harmonious with slate systems. Pair with warm gray, rust (the corrosion duo), ivory and blackened charcoal.

In culture

Steel-blue eyes in every thriller, blued revolvers in every western, steel skies before storms: the temper’s color carries quiet menace and dependability alike.

Brands that own steel blue

Facebook legacy kin#4267b2 LinkedIn kin#0a66c2 Volvo kin#234879 Dashboard defaults#4682b4 Watch-hand bluing#3a5f8a

Shades of steel blue

Slate Cadet blue Cerulean Denim Gunmetal Powder blue Air force blue Cobalt

Every format

HEX	#4682b4
RGB	rgb(70, 130, 180)
HSL	hsl(207, 44%, 49%)
CMYK	cmyk(61%, 28%, 0%, 29%)
LAB	lab(52.5 -4.1 -32.2)
LCH	lch(52.5 32.5 262.8)
OKLCH	oklch(0.588 0.099 245.7)

Copy-ready code

/* CSS */
color: #4682b4;
background-color: #4682b4;
/* Tailwind (arbitrary) */
class="text-[#4682b4] bg-[#4682b4]"
/* SCSS */
$brand: #4682b4;
/* SwiftUI */
Color(red: 0.275, green: 0.510, blue: 0.706)
/* Android */
Color.parseColor("#4682b4")

Accessibility — WCAG contrast

#4682b4 on white: 4.11:1

AA ✗ fail · AA-large ✓ · AAA ✗

#4682b4 on black: 5.11:1

AA ✓ pass · AA-large ✓ · AAA ✗

true color

protanopia

deuteranopia

tritanopia

RGB percentages

Red27.5%

Green51.0%

Blue70.6%

CMYK percentages

Cyan61.1%

Magenta27.8%

Yellow0.0%

Key (black)29.4%

Color previews

#4682b4 text on a black background

contrast 5.11:1

Card sample

#4682b4 text on a white background

contrast 4.11:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #4682b4;

Background color

Panel with #4682b4 background

background-color: #4682b4;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #4682b4;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(70, 130, 180, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(70, 130, 180, 0.45);

Border & gradient

Gradient panel

border: 3px solid #4682b4;
background: linear-gradient(135deg, #4682b4, #5346B4);

Monochromatic scale

#11202C #25455F #396A93 #568EBD #89B1D1 #BDD3E5 #E2EBF4

Palettes built from #4682b4

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Shades — darker

#3F75A2 #386890 #315B7E #2A4E6C #23415A #1C3448 #152736 #0E1A24 #070D12

Tints — lighter

#568FBD #699BC5 #7CA8CC #8FB4D3 #A1C1DB #B4CDE2 #C7DAE9 #DAE6F0 #ECF3F8

Hue & tone neighbors

#46A7B4 #4694B4 #4670B4 #465DB4 #689BC4 #38678F #2D84CD #5F809B

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

steelblue · ΔE 0.0 skyblue · ΔE 30.8 gray · ΔE 32.5 teal · ΔE 34.5 dodgerblue · ΔE 34.9

Steel Blue, answered

What is the hex code for steel blue?

CSS steelblue is #4682b4; lighter lightsteelblue is #b0c4de; gun-bluing tones run #3a5f8a.

Why is it called steel blue?

Tempering steel builds a thin oxide layer that interferes light into blue sheens — the bluing process on barrels and watch hands named the color.

Is steel blue good for interfaces?

Excellent: AA-passing on white, neutral enough for data viz defaults, and it harmonizes natively with slate-based design systems.

Work with #4682b4 in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →