Shades of blue

This list has 20 CSS-named blues, from alice blue (#f0f8ff) to navy (#000080), including teal and cadet blue on the green side. Each comes with its hex code and how lettering reads on it.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#f3f7ffWhite1.1 FailInk16.9 AAA
100#e2ebffWhite1.2 FailInk15.1 AAA
200#c6d7ffWhite1.4 FailInk12.6 AAA
300#a0bcffWhite1.9 FailInk9.6 AAA
400#769dffWhite2.6 FailInk6.9 AA
500#527df4White3.8 AA largeInk4.8 AA
600#3e64d5White5.3 AAInk3.4 AA large
700#2d4eb2White7.4 AAAInk2.5 Fail
800#1d3891White10.4 AAAInk1.7 Fail
900#102575White13.6 AAAInk1.3 Fail
950#06125aWhite16.9 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-blue-50: #f3f7ff;
  --color-blue-100: #e2ebff;
  --color-blue-200: #c6d7ff;
  --color-blue-300: #a0bcff;
  --color-blue-400: #769dff;
  --color-blue-500: #527df4;
  --color-blue-600: #3e64d5;
  --color-blue-700: #2d4eb2;
  --color-blue-800: #1d3891;
  --color-blue-900: #102575;
  --color-blue-950: #06125a;
  --color-accent-1: #cfdeff;
  --color-accent-2: #89abff;
  --color-accent-3: #2546bb;
  --color-accent-4: #090e8a;
}

At a glance

Alice blue (aliceblue): #f0f8ff · white text 1.07:1 (Fail), near-black text 16.86:1 (AAA); Source: w3.org, checked 2026-11
Light blue (lightblue): #add8e6 · white text 1.52:1 (Fail), near-black text 11.84:1 (AAA); Source: w3.org, checked 2026-11
Powder blue (powderblue): #b0e0e6 · white text 1.43:1 (Fail), near-black text 12.62:1 (AAA); Source: w3.org, checked 2026-11
Light steel blue (lightsteelblue): #b0c4de · white text 1.78:1 (Fail), near-black text 10.16:1 (AAA); Source: w3.org, checked 2026-11
Sky blue (skyblue): #87ceeb · white text 1.74:1 (Fail), near-black text 10.39:1 (AAA); Source: w3.org, checked 2026-11
Light sky blue (lightskyblue): #87cefa · white text 1.71:1 (Fail), near-black text 10.54:1 (AAA); Source: w3.org, checked 2026-11
Deep sky blue (deepskyblue): #00bfff · white text 2.12:1 (Fail), near-black text 8.52:1 (AAA); Source: w3.org, checked 2026-11
Cornflower blue (cornflowerblue): #6495ed · white text 2.97:1 (Fail), near-black text 6.08:1 (AA); Source: w3.org, checked 2026-11
Dodger blue (dodgerblue): #1e90ff · white text 3.23:1 (AA large), near-black text 5.59:1 (AA); Source: w3.org, checked 2026-11
Steel blue (steelblue): #4682b4 · white text 4.10:1 (AA large), near-black text 4.40:1 (AA large); Source: w3.org, checked 2026-11
Cadet blue (cadetblue): #5f9ea0 · white text 3.05:1 (AA large), near-black text 5.93:1 (AA); Source: w3.org, checked 2026-11
Dark cyan (darkcyan): #008b8b · white text 4.14:1 (AA large), near-black text 4.36:1 (AA large); Source: w3.org, checked 2026-11
Teal (teal): #008080 · white text 4.77:1 (AA), near-black text 3.79:1 (AA large); Source: w3.org, checked 2026-11
Royal blue (royalblue): #4169e1 · white text 4.84:1 (AA), near-black text 3.73:1 (AA large); Source: w3.org, checked 2026-11
Slate blue (slateblue): #6a5acd · white text 5.30:1 (AA), near-black text 3.40:1 (AA large); Source: w3.org, checked 2026-11
Blue (blue): #0000ff · white text 8.59:1 (AAA), near-black text 2.10:1 (Fail); Source: w3.org, checked 2026-11
Medium blue (mediumblue): #0000cd · white text 11.16:1 (AAA), near-black text 1.62:1 (Fail); Source: w3.org, checked 2026-11
Dark blue (darkblue): #00008b · white text 15.29:1 (AAA), near-black text 1.18:1 (Fail); Source: w3.org, checked 2026-11
Midnight blue (midnightblue): #191970 · white text 14.84:1 (AAA), near-black text 1.21:1 (Fail); Source: w3.org, checked 2026-11
Navy (navy): #000080 · white text 16.00:1 (AAA), near-black text 1.13:1 (Fail); Source: w3.org, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of blue: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Which shades of blue can carry text

White body text passes WCAG AA (4.5:1) on 8 of the 20: teal (#008080), royal blue (#4169e1), slate blue (#6a5acd), blue (#0000ff), medium blue (#0000cd), dark blue (#00008b), midnight blue (#191970) and navy (#000080). Use these for buttons, banners and anything with white type on it.

Near-black text (#161616) passes on 10: Alice blue (#f0f8ff), light blue (#add8e6), powder blue (#b0e0e6), light steel blue (#b0c4de), sky blue (#87ceeb), light sky blue (#87cefa), deep sky blue (#00bfff), cornflower blue (#6495ed), dodger blue (#1e90ff) and cadet blue (#5f9ea0).

Steel blue (#4682b4) and dark cyan (#008b8b) sit in between: neither white nor near-black text reaches 4.5:1, so keep them for large headings, icons or borders, where WCAG asks for 3:1.

Teal and the blue-greens

Teal (#008080), dark cyan (#008b8b) and cadet blue (#5f9ea0) sit between blue and green. Teal takes white text at 4.77:1 (AA); cadet blue doesn't (3.05:1).

Navy, dark blue and midnight blue are all above 14.84:1 with white text, dark enough to stand in for black in headings and footers.

Questions

What are the names of the different shades of blue?

From light to dark: alice blue, light blue, powder blue, light steel blue, sky blue, light sky blue, deep sky blue, cornflower blue, dodger blue, steel blue, cadet blue, dark cyan, teal, royal blue, slate blue, blue, medium blue, dark blue, midnight blue and navy.

What are the 10 shades of blue?

There's no fixed set of ten. A spread that covers the range: alice blue, powder blue, sky blue, cornflower blue, dodger blue, steel blue, royal blue, blue, midnight blue and navy.

Is teal blue or green?

Both. Teal (#008080) mixes green and blue in equal parts, which is why it's listed with the blues here and pairs with either.