Shades of Blue

Shades of blue include navy, royal blue, sky blue, dodger blue, steel blue, powder blue, and azure. The base blue color's hex value in HTML is #0000FF. Browse the gallery below, click any shade to copy its HEX code, or open it in Shade Color to build a full tint-and-shade palette.

All Shades of Blue

56 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named blue colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Midnight Blue

#191970 Palette

W 14.8:1 AAA B 1.4:1 Fail

Navy

#000080 Palette

W 16.0:1 AAA B 1.3:1 Fail

Dark Blue

#00008B Palette

W 15.3:1 AAA B 1.4:1 Fail

Medium Blue

#0000CD Palette

W 11.2:1 AAA B 1.9:1 Fail

Blue

#0000FF Palette

W 8.6:1 AAA B 2.4:1 Fail

Royal Blue

#4169E1 Palette

W 4.8:1 AA B 4.3:1 Fail

Medium Slate Blue

#7B68EE Palette

W 4.2:1 Fail B 5.1:1 AA

Slate Blue

#6A5ACD Palette

W 5.3:1 AA B 4.0:1 Fail

Cornflower Blue

#6495ED Palette

W 3.0:1 Fail B 7.1:1 AAA

Dodger Blue

#1E90FF Palette

W 3.2:1 Fail B 6.5:1 AA

Deep Sky Blue

#00BFFF Palette

W 2.1:1 Fail B 9.9:1 AAA

Light Sky Blue

#87CEFA Palette

W 1.7:1 Fail B 12.2:1 AAA

Sky Blue

#87CEEB Palette

W 1.7:1 Fail B 12.1:1 AAA

Light Blue

#ADD8E6 Palette

W 1.5:1 Fail B 13.7:1 AAA

Powder Blue

#B0E0E6 Palette

W 1.4:1 Fail B 14.7:1 AAA

Light Steel Blue

#B0C4DE Palette

W 1.8:1 Fail B 11.8:1 AAA

Steel Blue

#4682B4 Palette

W 4.1:1 Fail B 5.1:1 AA

Cadet Blue

#5F9EA0 Palette

W 3.1:1 Fail B 6.9:1 AA

Alice Blue

#F0F8FF Palette

W 1.1:1 Fail B 19.6:1 AAA

Azure

#F0FFFF Palette

W 1.0:1 Fail B 20.5:1 AAA

Cerulean

#007BA7 Palette

W 4.8:1 AA B 4.4:1 Fail

Sapphire

#0F52BA Palette

W 7.2:1 AAA B 2.9:1 Fail

Ultramarine

#3F00FF Palette

W 7.9:1 AAA B 2.7:1 Fail

Prussian Blue

#003153 Palette

W 13.4:1 AAA B 1.6:1 Fail

Egyptian Blue

#1034A6 Palette

W 10.2:1 AAA B 2.1:1 Fail

Cobalt Blue

#0047AB Palette

W 8.4:1 AAA B 2.5:1 Fail

Persian Blue

#1C39BB Palette

W 8.9:1 AAA B 2.4:1 Fail

True Blue

#0073CF Palette

W 4.8:1 AA B 4.4:1 Fail

Electric Blue

#7DF9FF Palette

W 1.2:1 Fail B 16.9:1 AAA

Neon Blue

#4D4DFF Palette

W 5.5:1 AA B 3.8:1 Fail

Baby Blue

#89CFF0 Palette

W 1.7:1 Fail B 12.2:1 AAA

Columbia Blue

#B9D9EB Palette

W 1.5:1 Fail B 14.2:1 AAA

Carolina Blue

#56A0D3 Palette

W 2.9:1 Fail B 7.4:1 AAA

Air Force Blue

#5D8AA8 Palette

W 3.7:1 Fail B 5.7:1 AA

Pacific Blue

#1CA9C9 Palette

W 2.8:1 Fail B 7.6:1 AAA

Capri

#00BFFF Palette

W 2.1:1 Fail B 9.9:1 AAA

Teal Blue

#367588 Palette

W 5.2:1 AA B 4.1:1 Fail

Indigo Dye

#00416A Palette

W 10.7:1 AAA B 2.0:1 Fail

Yale Blue

#0F4D92 Palette

W 8.4:1 AAA B 2.5:1 Fail

Duke Blue

#001A57 Palette

W 16.3:1 AAA B 1.3:1 Fail

Oxford Blue

#002147 Palette

W 16.0:1 AAA B 1.3:1 Fail

Space Cadet

#1D2951 Palette

W 14.1:1 AAA B 1.5:1 Fail

Periwinkle

#CCCCFF Palette

W 1.5:1 Fail B 13.6:1 AAA

Iris

#5A4FCF Palette

W 6.1:1 AA B 3.5:1 Fail

Ice Blue

#D6EAF8 Palette

W 1.2:1 Fail B 17.0:1 AAA

Non-Photo Blue

#A4DDED Palette

W 1.5:1 Fail B 14.1:1 AAA

Robin Egg Blue

#00CCCC Palette

W 2.0:1 Fail B 10.5:1 AAA

Denim

#1560BD Palette

W 6.1:1 AA B 3.4:1 Fail

Blue Gray

#6699CC Palette

W 3.0:1 Fail B 7.0:1 AA

Glaucous

#6082B6 Palette

W 3.9:1 Fail B 5.4:1 AA

Liberty Blue

#545AA7 Palette

W 6.2:1 AA B 3.4:1 Fail

Resolution Blue

#002387 Palette

W 13.2:1 AAA B 1.6:1 Fail

Vivid Sky Blue

#00CCFF Palette

W 1.9:1 Fail B 11.1:1 AAA

Celeste

#B2FFFF Palette

W 1.1:1 Fail B 18.6:1 AAA

Tufts Blue

#3E8EDE Palette

W 3.4:1 Fail B 6.1:1 AA

Blue Yonder

#5072A7 Palette

W 4.9:1 AA B 4.3:1 Fail

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Yellow

Shades of Red

Shades of Black

About Shades of Blue

Blue is one of the most used colors in digital products and branding. Darker blues feel trustworthy and formal; mid blues work well for primary actions; light blues suit backgrounds, chips, and calm empty states.

Want a full Blue theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Blue-50 … 950.
Copy the HEX values into CSS variables for production.

Popular Blue Shades Glossary

Each blue below includes a short note on character and typical UI or branding use, so this page is a practical glossary—not just a swatch grid.

What is Navy?

Navy (#000080) is a classic, authoritative blue used in corporate identity, uniforms, and finance products. Pair it with white or soft gray for high-contrast navigation and primary buttons.

What is Royal Blue?

Royal Blue (#4169E1) is brighter and more jewel-like than navy. It is popular for sports brands, CTAs, and interfaces that need energy without tipping into neon.

What is Sky Blue?

Sky Blue (#87CEEB) suggests open air and calm. Use it for soft backgrounds, weather apps, and wellness interfaces that need a light, airy blue.

What is Dodger Blue?

Dodger Blue (#1E90FF) is a vivid, slightly cyan blue familiar from CSS named colors. It stands out for interactive states, charts, and tech product accents.

What is Azure?

Azure (#F0FFFF) is a near-white cyan wash. It is ideal for subtle section backgrounds and print-inspired layouts that need a cool paper tone.

What is Cobalt Blue?

Cobalt Blue (#0047AB) is a bright, painterly blue. Use it for creative tools, illustration systems, and brand marks that need clarity and punch.

What is Cerulean?

Cerulean (#007BA7) is a clear sky-leaning blue with a slight teal bias. It suits travel brands, maps, and product UI that wants freshness over formality.

What is Midnight Blue?

Midnight Blue (#191970) is a deep, ink-toned blue associated with late-night skies. It works for editorial headers, navy-adjacent branding, and dark UI chrome when pure black feels too harsh.

More Blue color definitions

Dark Blue (#00008B): Dark Blue (#00008B) sits between navy and vivid blue—rich enough for hero panels, still readable behind white type. Use it when you want depth without the greenish cast of some slate blues.
Medium Blue (#0000CD): Medium Blue (#0000CD) is a strong mid-spectrum blue close to classic web blue. It reads clearly on light backgrounds and suits links, badges, and illustration accents.
Blue (#0000FF): Blue (#0000FF) is the pure CSS/HTML primary blue. It is highly saturated, so use it sparingly for highlights or as the seed color when generating a 50–950 UI scale.
Medium Slate Blue (#7B68EE): Medium Slate Blue (#7B68EE) is a mid-tone blue with a balanced character. Around HSL(248, 79%, 67%), it stays useful for fintech trust cues.
Slate Blue (#6A5ACD): Slate Blue (#6A5ACD) brings a balanced, mid-tone note to the blue family. On screens it stays readable for calm empty states when contrast is checked.
Cornflower Blue (#6495ED): Cornflower Blue (#6495ED) is a soft mid-blue named after the flower. It feels friendly for SaaS marketing, empty states, and secondary buttons.
Deep Sky Blue (#00BFFF): Designers pick Deep Sky Blue (#00BFFF) as a light blue accent with a vivid vibe. Around HSL(195, 100%, 50%), it stays useful for corporate navigation.
Light Sky Blue (#87CEFA): Light Sky Blue (#87CEFA) lands as a pale blue—balanced enough for data visualization series. On screens it stays readable for SaaS primary actions when contrast is checked.
Light Blue (#ADD8E6): Light Blue (#ADD8E6) brings a balanced, pale note to the blue family. Its RGB mix (173, 216, 230) skews toward balanced blue work—especially SaaS primary actions.
Powder Blue (#B0E0E6): Powder Blue (#B0E0E6) is a pale, dusty blue with low saturation. It works well for cards, chips, and large background washes that must stay quiet.
Light Steel Blue (#B0C4DE): Light Steel Blue (#B0C4DE) reads as a metallic pale blue in digital palettes. On screens it stays readable for data visualization series when contrast is checked.
Steel Blue (#4682B4): Designers pick Steel Blue (#4682B4) as a mid-tone blue accent with a metallic vibe. It pairs well with neutrals and holds up in fintech trust cues.
Cadet Blue (#5F9EA0): Cadet Blue (#5F9EA0) lands as a light blue—balanced enough for data visualization series. Its RGB mix (95, 158, 160) skews toward balanced blue work—especially data visualization series.
Alice Blue (#F0F8FF): Alice Blue (#F0F8FF) is an extremely pale blue-white. Designers use it as a near-white surface tint that still feels cooler than pure #FFFFFF.
Sapphire (#0F52BA): Sapphire (#0F52BA) echoes gemstone blue—deep, saturated, and premium. Strong choice for luxury, education, and fintech accents.
Ultramarine (#3F00FF): Designers pick Ultramarine (#3F00FF) as a very dark blue accent with a high-energy vibe. Around HSL(254, 100%, 50%), it stays useful for corporate navigation.
Prussian Blue (#003153): Prussian Blue (#003153) is a historic pigment blue with a greenish-dark cast. It feels scholarly and works for museums, archives, and serious dark themes.
Egyptian Blue (#1034A6): Egyptian Blue (#1034A6) is a deep blue with a dramatic character. It pairs well with neutrals and holds up in maps and travel UI.
Persian Blue (#1C39BB): Reach for Persian Blue (#1C39BB) when you need a deep blue that feels dramatic. Around HSL(229, 73%, 42%), it stays useful for maps and travel UI.
True Blue (#0073CF): True Blue (#0073CF) reads as a vivid mid-tone blue in digital palettes. On screens it stays readable for data visualization series when contrast is checked.
Electric Blue (#7DF9FF): Designers pick Electric Blue (#7DF9FF) as a pale blue accent with a high-energy vibe. It pairs well with neutrals and holds up in fintech trust cues.
Neon Blue (#4D4DFF): Neon Blue (#4D4DFF) lands as a mid-tone blue—high-energy enough for data visualization series. Its RGB mix (77, 77, 255) skews toward high-energy blue work—especially data visualization series.
Baby Blue (#89CFF0): Baby Blue (#89CFF0) is a pale blue with a soft character. Around HSL(199, 77%, 73%), it stays useful for fintech trust cues.
Columbia Blue (#B9D9EB): Columbia Blue (#B9D9EB) brings a balanced, pale note to the blue family. On screens it stays readable for calm empty states when contrast is checked.
Carolina Blue (#56A0D3): Reach for Carolina Blue (#56A0D3) when you need a light blue that feels balanced. It pairs well with neutrals and holds up in corporate navigation.
Air Force Blue (#5D8AA8): Air Force Blue (#5D8AA8) reads as a balanced mid-tone blue in digital palettes. Its RGB mix (93, 138, 168) skews toward balanced blue work—especially calm empty states.
Pacific Blue (#1CA9C9): Designers pick Pacific Blue (#1CA9C9) as a light blue accent with a vivid vibe. Around HSL(191, 75%, 44%), it stays useful for corporate navigation.
Capri (#00BFFF): Capri (#00BFFF) lands as a light blue—vivid enough for data visualization series. On screens it stays readable for SaaS primary actions when contrast is checked.
Teal Blue (#367588): Teal Blue (#367588) is a mid-tone blue with a balanced character. It pairs well with neutrals and holds up in maps and travel UI.
Indigo Dye (#00416A): Indigo Dye (#00416A) brings a dramatic, deep note to the blue family. Its RGB mix (0, 65, 106) skews toward dramatic blue work—especially SaaS primary actions.
Yale Blue (#0F4D92): Reach for Yale Blue (#0F4D92) when you need a deep blue that feels formal. Around HSL(211, 81%, 31%), it stays useful for maps and travel UI.
Duke Blue (#001A57): Duke Blue (#001A57) reads as a formal very dark blue in digital palettes. On screens it stays readable for data visualization series when contrast is checked.
Oxford Blue (#002147): Oxford Blue (#002147) is a near-black academic blue. It anchors university brands, formal sites, and high-end dark navigation bars.
Space Cadet (#1D2951): Space Cadet (#1D2951) lands as a very dark blue—dramatic enough for data visualization series. Its RGB mix (29, 41, 81) skews toward dramatic blue work—especially data visualization series.
Periwinkle (#CCCCFF): Periwinkle (#CCCCFF) blends soft blue and lavender. It feels playful yet calm for kids products, wellness, and pastel design systems.
Iris (#5A4FCF): Iris (#5A4FCF) brings a balanced, mid-tone note to the blue family. On screens it stays readable for calm empty states when contrast is checked.
Ice Blue (#D6EAF8): Reach for Ice Blue (#D6EAF8) when you need a pale blue that feels muted. It pairs well with neutrals and holds up in corporate navigation.
Non-Photo Blue (#A4DDED): Non-Photo Blue (#A4DDED) reads as a balanced pale blue in digital palettes. Its RGB mix (164, 221, 237) skews toward balanced blue work—especially calm empty states.
Robin Egg Blue (#00CCCC): Designers pick Robin Egg Blue (#00CCCC) as a light blue accent with a vivid vibe. Around HSL(180, 100%, 40%), it stays useful for corporate navigation.
Denim (#1560BD): Denim (#1560BD) recalls blue jeans—practical and casually trustworthy. Good for lifestyle apps, retail, and approachable B2C products.
Blue Gray (#6699CC): Blue Gray (#6699CC) is a light blue with a balanced character. It pairs well with neutrals and holds up in maps and travel UI.
Glaucous (#6082B6): Glaucous (#6082B6) brings a balanced, mid-tone note to the blue family. Its RGB mix (96, 130, 182) skews toward balanced blue work—especially SaaS primary actions.
Liberty Blue (#545AA7): Reach for Liberty Blue (#545AA7) when you need a mid-tone blue that feels balanced. Around HSL(235, 33%, 49%), it stays useful for maps and travel UI.
Resolution Blue (#002387): Resolution Blue (#002387) reads as a dramatic very dark blue in digital palettes. On screens it stays readable for data visualization series when contrast is checked.
Vivid Sky Blue (#00CCFF): Designers pick Vivid Sky Blue (#00CCFF) as a light blue accent with a high-energy vibe. It pairs well with neutrals and holds up in fintech trust cues.
Celeste (#B2FFFF): Celeste (#B2FFFF) lands as a pale blue—balanced enough for data visualization series. Its RGB mix (178, 255, 255) skews toward balanced blue work—especially data visualization series.
Tufts Blue (#3E8EDE): Tufts Blue (#3E8EDE) is a mid-tone blue with a vivid character. Around HSL(210, 70%, 55%), it stays useful for fintech trust cues.
Blue Yonder (#5072A7): Blue Yonder (#5072A7) brings a balanced, mid-tone note to the blue family. On screens it stays readable for calm empty states when contrast is checked.

FAQ

How to use this page?

Scan the named blues, copy a HEX value in one click, or send a shade into our Shade Color tool to generate a 50–950 token scale for UI and design systems.

What is the most popular shade of blue?

Navy is widely treated as the most popular shade of blue for branding and UI—formal, high-contrast, and easy to pair with white.

What is the base blue HEX value?

The reference base blue on this page uses #0000FF. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Blue-50 through Blue-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.