Shades of Blue: Hex, RGB, and HSL Codes

What counts as a shade of blue?

Blue is the most-used color in interface and corporate design, and the 21 shades below span its full working range. The top is atmospheric — Baby Blue #89CFF0, LightBlue #ADD8E6, SkyBlue #87CEEB — the middle is where interfaces live, with DodgerBlue #1E90FF, CornflowerBlue #6495ED, and RoyalBlue #4169E1, and the bottom goes nearly black through Navy #000080, Prussian Blue #003153, and MidnightBlue #191970.

Two named clusters are worth knowing. The pigment blues — Cobalt Blue #0047AB, Sapphire #0F52BA, Prussian Blue — are deep and slightly violet, and they are what people usually mean by a rich blue. The utility blues — SteelBlue #4682B4, CadetBlue-adjacent Denim #1560BD, Cerulean #007BA7 — have gray mixed in, which makes them far easier to sit next to body text than pure Blue #0000FF, a color almost too saturated to use at size.

How to use these color codes

1. Find your shade. The list runs roughly light to dark, with a live preview beside every name — scan it the way you would a paint chart.
2. Click a code to copy. Each row carries the hex, RGB, and HSL value of that color. One click copies that exact string to your clipboard.
3. Paste it into your project. Drop the hex into CSS, Figma, Photoshop, or a document. Clicking the swatch itself copies the hex, so you can grab colors without aiming at the small text.

What blue communicates

Blue is the trust default. Banks, insurers, hospitals, and social platforms converge on it because it reads as stable, competent, and unemotional — the safest choice when a brand cannot afford to seem risky. That ubiquity is also its weakness: a blue logo rarely stands out in its own category.

It is the only hue that is culturally near-universally liked, and the one that recedes visually — distant hills read blue, so blue backgrounds feel like depth rather than surface. Dark blues add authority and formality, which is why Navy has been the uniform color of institutions for two centuries, while pale blues read as calm, clean, and slightly cold.

Honest limitations

A hex code is exact, but the color you see is not. The same #FF0000 looks different on an OLED phone, a cheap office monitor, and a printed page, because each device has its own gamut and calibration. Treat these values as a precise starting point for screens, and always check a physical proof before committing a color to print — CMYK cannot reproduce every shade listed here.

Color names are a mix of two things. Entries badged CSS are official CSS named colors: the name itself works in a stylesheet and every browser resolves it to exactly that hex. The rest are conventional names — Burgundy, Sage, Espresso — that no standards body owns. Their hex values follow the most widely cited convention, but another chart may place them a few percent lighter or darker, so quote the hex rather than the name when the exact value matters.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. This page is a static list of color values rendered in your browser — nothing to install, no account, no premium tier holding back the darker half of the palette. Copy as many codes as you need, as often as you need.

Other color families

redorangeyellowgreencyanpurplepinkbrowngrayblackwhiteAll color families