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

53 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

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

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

This page is a named-blue color card: pick a swatch, copy HEX or formatted values, check WCAG contrast, or open Shade Color to build a 50–950 HSL scale from that base.

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.

Blue Shades Glossary

Each named blue lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Values are fixed reference swatches for design and QA—not brand guidelines.

Navy: #000080 hsl(240, 100%, 25%) W 16.0:1 AAA B 1.3:1 Fail

CSS color: #000080; Tailwind bg-[#000080]
Royal Blue: #4169E1 hsl(225, 73%, 57%) W 4.8:1 AA B 4.3:1 Fail

CSS color: #4169E1; Tailwind bg-[#4169E1]
Sky Blue: #87CEEB hsl(197, 71%, 73%) W 1.7:1 Fail B 12.1:1 AAA

CSS color: #87CEEB; Tailwind bg-[#87CEEB]
Dodger Blue: #1E90FF hsl(210, 100%, 56%) W 3.2:1 Fail B 6.5:1 AA

CSS color: #1E90FF; Tailwind bg-[#1E90FF]
Azure: #F0FFFF hsl(180, 100%, 97%) W 1.0:1 Fail B 20.5:1 AAA

CSS color: #F0FFFF; Tailwind bg-[#F0FFFF]
Cobalt Blue: #0047AB hsl(215, 100%, 34%) W 8.4:1 AAA B 2.5:1 Fail

CSS color: #0047AB; Tailwind bg-[#0047AB]
Cerulean: #007BA7 hsl(196, 100%, 33%) W 4.8:1 AA B 4.4:1 Fail

CSS color: #007BA7; Tailwind bg-[#007BA7]
Midnight Blue: #191970 hsl(240, 64%, 27%) W 14.8:1 AAA B 1.4:1 Fail

CSS color: #191970; Tailwind bg-[#191970]
Dark Blue: #00008B hsl(240, 100%, 27%) W 15.3:1 AAA B 1.4:1 Fail

CSS color: #00008B; Tailwind bg-[#00008B]
Medium Blue: #0000CD hsl(240, 100%, 40%) W 11.2:1 AAA B 1.9:1 Fail

CSS color: #0000CD; Tailwind bg-[#0000CD]
Blue: #0000FF hsl(240, 100%, 50%) W 8.6:1 AAA B 2.4:1 Fail

CSS color: #0000FF; Tailwind bg-[#0000FF]
Cornflower Blue: #6495ED hsl(219, 79%, 66%) W 3.0:1 Fail B 7.1:1 AAA

CSS color: #6495ED; Tailwind bg-[#6495ED]
Deep Sky Blue: #00BFFF hsl(195, 100%, 50%) W 2.1:1 Fail B 9.9:1 AAA

CSS color: #00BFFF; Tailwind bg-[#00BFFF]
Light Sky Blue: #87CEFA hsl(203, 92%, 75%) W 1.7:1 Fail B 12.2:1 AAA

CSS color: #87CEFA; Tailwind bg-[#87CEFA]
Light Blue: #ADD8E6 hsl(195, 53%, 79%) W 1.5:1 Fail B 13.7:1 AAA

CSS color: #ADD8E6; Tailwind bg-[#ADD8E6]
Powder Blue: #B0E0E6 hsl(187, 52%, 80%) W 1.4:1 Fail B 14.7:1 AAA

CSS color: #B0E0E6; Tailwind bg-[#B0E0E6]
Light Steel Blue: #B0C4DE hsl(214, 41%, 78%) W 1.8:1 Fail B 11.8:1 AAA

CSS color: #B0C4DE; Tailwind bg-[#B0C4DE]
Steel Blue: #4682B4 hsl(207, 44%, 49%) W 4.1:1 Fail B 5.1:1 AA

CSS color: #4682B4; Tailwind bg-[#4682B4]
Cadet Blue: #5F9EA0 hsl(182, 25%, 50%) W 3.1:1 Fail B 6.9:1 AA

CSS color: #5F9EA0; Tailwind bg-[#5F9EA0]
Alice Blue: #F0F8FF hsl(208, 100%, 97%) W 1.1:1 Fail B 19.6:1 AAA

CSS color: #F0F8FF; Tailwind bg-[#F0F8FF]
Sapphire: #0F52BA hsl(216, 85%, 39%) W 7.2:1 AAA B 2.9:1 Fail

CSS color: #0F52BA; Tailwind bg-[#0F52BA]
Ultramarine: #3F00FF hsl(255, 100%, 50%) W 7.9:1 AAA B 2.7:1 Fail

CSS color: #3F00FF; Tailwind bg-[#3F00FF]
Prussian Blue: #003153 hsl(205, 100%, 16%) W 13.4:1 AAA B 1.6:1 Fail

CSS color: #003153; Tailwind bg-[#003153]
Egyptian Blue: #1034A6 hsl(226, 82%, 36%) W 10.2:1 AAA B 2.1:1 Fail

CSS color: #1034A6; Tailwind bg-[#1034A6]
Persian Blue: #1C39BB hsl(229, 74%, 42%) W 8.9:1 AAA B 2.4:1 Fail

CSS color: #1C39BB; Tailwind bg-[#1C39BB]
True Blue: #0073CF hsl(207, 100%, 41%) W 4.8:1 AA B 4.4:1 Fail

CSS color: #0073CF; Tailwind bg-[#0073CF]
Electric Blue: #7DF9FF hsl(183, 100%, 75%) W 1.2:1 Fail B 16.9:1 AAA

CSS color: #7DF9FF; Tailwind bg-[#7DF9FF]
Neon Blue: #4D4DFF hsl(240, 100%, 65%) W 5.5:1 AA B 3.8:1 Fail

CSS color: #4D4DFF; Tailwind bg-[#4D4DFF]
Baby Blue: #89CFF0 hsl(199, 77%, 74%) W 1.7:1 Fail B 12.2:1 AAA

CSS color: #89CFF0; Tailwind bg-[#89CFF0]
Columbia Blue: #B9D9EB hsl(202, 56%, 82%) W 1.5:1 Fail B 14.2:1 AAA

CSS color: #B9D9EB; Tailwind bg-[#B9D9EB]
Carolina Blue: #56A0D3 hsl(204, 59%, 58%) W 2.9:1 Fail B 7.4:1 AAA

CSS color: #56A0D3; Tailwind bg-[#56A0D3]
Air Force Blue: #5D8AA8 hsl(204, 30%, 51%) W 3.7:1 Fail B 5.7:1 AA

CSS color: #5D8AA8; Tailwind bg-[#5D8AA8]
Pacific Blue: #1CA9C9 hsl(191, 76%, 45%) W 2.8:1 Fail B 7.6:1 AAA

CSS color: #1CA9C9; Tailwind bg-[#1CA9C9]
Teal Blue: #367588 hsl(194, 43%, 37%) W 5.2:1 AA B 4.1:1 Fail

CSS color: #367588; Tailwind bg-[#367588]
Indigo Dye: #00416A hsl(203, 100%, 21%) W 10.7:1 AAA B 2.0:1 Fail

CSS color: #00416A; Tailwind bg-[#00416A]
Yale Blue: #0F4D92 hsl(212, 81%, 32%) W 8.4:1 AAA B 2.5:1 Fail

CSS color: #0F4D92; Tailwind bg-[#0F4D92]
Duke Blue: #001A57 hsl(222, 100%, 17%) W 16.3:1 AAA B 1.3:1 Fail

CSS color: #001A57; Tailwind bg-[#001A57]
Oxford Blue: #002147 hsl(212, 100%, 14%) W 16.0:1 AAA B 1.3:1 Fail

CSS color: #002147; Tailwind bg-[#002147]
Space Cadet: #1D2951 hsl(226, 47%, 22%) W 14.1:1 AAA B 1.5:1 Fail

CSS color: #1D2951; Tailwind bg-[#1D2951]
Periwinkle: #CCCCFF hsl(240, 100%, 90%) W 1.5:1 Fail B 13.6:1 AAA

CSS color: #CCCCFF; Tailwind bg-[#CCCCFF]
Iris: #5A4FCF hsl(245, 57%, 56%) W 6.1:1 AA B 3.5:1 Fail

CSS color: #5A4FCF; Tailwind bg-[#5A4FCF]
Ice Blue: #D6EAF8 hsl(205, 71%, 91%) W 1.2:1 Fail B 17.0:1 AAA

CSS color: #D6EAF8; Tailwind bg-[#D6EAF8]
Non-Photo Blue: #A4DDED hsl(193, 67%, 79%) W 1.5:1 Fail B 14.1:1 AAA

CSS color: #A4DDED; Tailwind bg-[#A4DDED]
Robin Egg Blue: #00CCCC hsl(180, 100%, 40%) W 2.0:1 Fail B 10.5:1 AAA

CSS color: #00CCCC; Tailwind bg-[#00CCCC]
Denim: #1560BD hsl(213, 80%, 41%) W 6.1:1 AA B 3.4:1 Fail

CSS color: #1560BD; Tailwind bg-[#1560BD]
Blue Gray: #6699CC hsl(210, 50%, 60%) W 3.0:1 Fail B 7.0:1 AA

CSS color: #6699CC; Tailwind bg-[#6699CC]
Glaucous: #6082B6 hsl(216, 37%, 55%) W 3.9:1 Fail B 5.4:1 AA

CSS color: #6082B6; Tailwind bg-[#6082B6]
Liberty Blue: #545AA7 hsl(236, 33%, 49%) W 6.2:1 AA B 3.4:1 Fail

CSS color: #545AA7; Tailwind bg-[#545AA7]
Resolution Blue: #002387 hsl(224, 100%, 26%) W 13.2:1 AAA B 1.6:1 Fail

CSS color: #002387; Tailwind bg-[#002387]
Vivid Sky Blue: #00CCFF hsl(192, 100%, 50%) W 1.9:1 Fail B 11.1:1 AAA

CSS color: #00CCFF; Tailwind bg-[#00CCFF]
Celeste: #B2FFFF hsl(180, 100%, 85%) W 1.1:1 Fail B 18.6:1 AAA

CSS color: #B2FFFF; Tailwind bg-[#B2FFFF]
Tufts Blue: #3E8EDE hsl(210, 71%, 56%) W 3.4:1 Fail B 6.1:1 AA

CSS color: #3E8EDE; Tailwind bg-[#3E8EDE]
Blue Yonder: #5072A7 hsl(217, 35%, 48%) W 4.9:1 AA B 4.3:1 Fail

CSS color: #5072A7; Tailwind bg-[#5072A7]

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 (#000080) is often cited as a popular deep blue. As text on white it measures about 16:1 (WCAG AAA); on black it fails normal-text contrast—check the W/B labels on the card before using it for type.

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.