What colors go with blue?

Blue pairs safely with neutrals (white, black, gray, cream). For accent colors, its complementary is orange, and its analogous partners are cyan and violet. Blue and green form a commonly used cool combination, and blue with warm orange creates high-contrast CTAs.

What is the complementary color of blue?

Orange. Blue sits at 240° and orange at 60°, making them opposites on the color wheel. Full-saturation blue/orange pairs feel energetic; softer pairings — deep navy with warm ochre — feel more refined.

Why is blue so common in UI?

Blue is widely used because it reads as trustworthy, calm and non-threatening in many cultural contexts. It also has good contrast with white on light backgrounds and works well in both light and dark themes. The downside is that it is so common it can feel generic without a distinctive variant.

Blue Colors — HEX, RGB, HSL, Shades & Complementary

Q: What is the purest blue hex code?

The purest blue in sRGB is #0000FF — RGB (0, 0, 255). It sits at hue 240° on the color wheel with 100% saturation and 50% lightness. Most production design systems use lighter or deeper blues instead — #2563EB or #1D4ED8 — because pure blue has very low luminance and creates harsh text contrast.

Blue 200 · Soft

#BFDBFE rgb 191, 219, 254

HSL 213°, 97%, 87%

Blue 500 · Base

#3B82F6 rgb 59, 130, 246

HSL 217°, 91%, 60%

Blue 800 · Deep

#1E3A8A rgb 30, 58, 138

HSL 224°, 64%, 33%

Blue color reference

A systematic blue scale with hex, RGB and HSL values.

Name	HEX	RGB	HSL
Blue 100	`#DBEAFE`	219, 234, 254	214°, 95%, 93%
Blue 200	`#BFDBFE`	191, 219, 254	213°, 97%, 87%
Blue 300	`#93C5FD`	147, 197, 253	212°, 96%, 78%
Blue 400	`#60A5FA`	96, 165, 250	213°, 94%, 68%
Blue 500	`#3B82F6`	59, 130, 246	217°, 91%, 60%
Blue 600	`#2563EB`	37, 99, 235	221°, 83%, 53%
Blue 700	`#1D4ED8`	29, 78, 216	224°, 76%, 48%
Blue 800	`#1E40AF`	30, 64, 175	226°, 71%, 40%
Blue 900	`#1E3A8A`	30, 58, 138	224°, 64%, 33%
Blue 950	`#172554`	23, 37, 84	226°, 57%, 21%

Named blues

Common named blues from CSS and design practice.

Blue (pure) #0000FF

Navy #000080

Midnight blue #191970

Royal blue #4169E1

Dodger blue #1E90FF

Sky blue #87CEEB

Deep sky blue #00BFFF

Cornflower blue #6495ED

Steel blue #4682B4

Cadet blue #5F9EA0

Complementary and harmonious colors

Blue sits at 240° on the color wheel. Here are the relationships that pair well with blue.

Relationship	Angle	Example hue
Complementary	180°	Orange
Split-complementary	150° / 210°	Amber / Rose
Triadic	120° / 240°	Red / Yellow
Analogous	−30° / +30°	Violet / Cyan

#172554

#1E3A8A

#2563EB

#3B82F6

#93C5FD

#DBEAFE

Blue in design and accessibility

Blue is the most commonly used color in interface design, for good reason. It reads as trustworthy, calm and professional across most cultural contexts, and it pairs cleanly with both light and dark surfaces. But that ubiquity also means blue is often invisible by default — a distinctive variant or an unexpected accent is what makes a blue brand feel memorable.

Common uses in interfaces

Links and primary actions — the standard convention on the web.
Corporate identities — banks, insurance, technology and SaaS brands.
Info states — informational alerts and neutral notices.
Data visualization — the default first color in most palettes.

Accessibility notes

Blue offers the best text-on-white contrast among the chromatic colors. A mid blue such as #2563EB on white reaches roughly 5.9:1, and dark blues such as #1E3A8A reach about 10:1. However, blue text on dark backgrounds is often weak because dark blues and near-black surfaces have similar luminance — use a lighter blue like #60A5FA for links on dark themes.

Contrast tip

Blue’s contrast varies hugely with lightness. Always test the specific value you plan to use with our contrast checker, especially in dark mode.

Frequently asked questions

What is the purest blue hex code?

Pure blue is #0000FF — RGB (0, 0, 255). It sits at hue 240° with full saturation and half lightness. Pure blue has very low perceived brightness, which makes it harsh for text and icons. Most production designs use lighter blues like #2563EB or #3B82F6 instead.

What colors go well with blue?

Neutrals — white, cream, gray, black — are universal. For accent colors, warm tones provide the strongest contrast: orange, coral, amber. Analogous combinations with cyan and violet create a calm, cool palette suitable for technology and finance brands.

Why is blue used so much in UI?

Blue has a combination of properties that make it ideal for interfaces: it reads as trustworthy and non-threatening across cultures, it works in both light and dark themes, and it has good contrast with white. The downside is ubiquity — blue alone is not enough to differentiate a brand without a distinctive hue, lightness or saturation choice.

Is blue text accessible?

Mid and dark blues are excellent for text on light backgrounds — #2563EB reaches around 5.9:1 and #1E3A8A around 10:1, both passing AA and AAA. On dark backgrounds, use a lighter blue like #60A5FA or #93C5FD; dark blues often fail because they have similar luminance to dark surfaces.

How do I generate a full blue scale?

Use our shades generator. Enter any blue as the base and it produces an 11-step 50–950 scale ready for CSS variables or Tailwind configs.