🎨 Shades of Blue

26 blue tones, each one click from your clipboard — 16 classic named colors plus a generated tint scale for building UI palettes. Blue is the world's favorite color in nearly every survey — the shade of trust, calm, and competence, which is why banks, airlines, and tech giants wear it. Dark navies read authoritative; light sky tones read open and friendly.

• Navy#000080
• Midnight Blue#191970
• Prussian Blue#003153
• Sapphire#0f52ba
• Royal Blue#4169e1
• Cobalt#0047ab
• Cerulean#007ba7
• Denim#1560bd
• Dodger Blue#1e90ff
• Steel Blue#4682b4
• Cornflower#6495ed
• Sky Blue#87ceeb
• Baby Blue#89cff0
• Powder Blue#b0e0e6
• Periwinkle#ccccff
• Ice Blue#d6ecef
• Blue 100#092149
• Blue 200#0d326d
• Blue 300#124391
• Blue 400#1653b6
• Blue 500#1b64da
• Blue 600#377ae6
• Blue 700#5c92eb
• Blue 800#80abef
• Blue 900#a4c3f4
• Blue 1000#c9dbf8

Click any swatch to copy its hex code.

Using blue well

Pair navy with warm amber for premium contrast, or sky blue with white for an airy, clinical cleanliness. Blue's complementary is orange — the classic call-to-action pairing on blue-heavy interfaces.

Need variations of a specific shade? Copy its hex into the palette generator for harmonies, or the contrast checker to verify text passes WCAG on top of it.

Frequently asked questions

What are the most popular shades of blue?

The classics are Navy, Midnight Blue, Prussian Blue, Sapphire, Royal Blue, Cobalt — the named swatches at the top of this page. Click any of them to copy the hex code.

What do the numbered shades (100–1000) mean?

They're a generated lightness scale of one representative hue, in the naming style design systems like Tailwind and Material use — low numbers dark, high numbers light. Use them as a ready-made UI ramp.

How do I get RGB or HSL instead of hex?

Copy the hex here, then paste it into our HEX to RGB converter — it returns RGB and HSL together, and the color picker gives sliders for fine-tuning.