Shades of Blue
← Shades generatorFrom aliceblue at 1.07:1 to navy at 16:1, the largest family in CSS
Blue is the biggest family in the CSS named colour list, and the least evenly spaced. It runs from aliceblue, which is so close to white that its contrast ratio is about 1.07:1, down to midnightblue and navy, which sit between 15:1 and 16:1 and will carry small text without complaint. Between those ends the names cluster in odd places: three separate sky blues, nothing much in the muted mid range, and a navy that is exactly half of blue because the original list was built from round binary values.
Blue also behaves oddly in the eye. Short wavelengths are handled by the sparsest of the three cone types, and the lens focuses them slightly differently from red and green, so thin blue type on white can look softer at its edges than the same weight in black. That is a reason to reserve pure blue for larger elements, and to reach for royalblue or something darker when the blue has to carry body text.
Every CSS blue name, with its contrast on white
The 28 named colors in the CSS keyword list that belong to this family, lightest first. The last two columns are the WCAG 2 contrast ratio against white and what that ratio passes for normal text — computed with the same function as the site's contrast checker, so the two never disagree.
| Name | HEX | RGB | On white | WCAG |
|---|---|---|---|---|
| aliceblue | #f0f8ff | rgb(240, 248, 255) | 1.07:1 | fails |
| lavender | #e6e6fa | rgb(230, 230, 250) | 1.23:1 | fails |
| aqua | #00ffff | rgb(0, 255, 255) | 1.25:1 | fails |
| cyan | #00ffff | rgb(0, 255, 255) | 1.25:1 | fails |
| powderblue | #b0e0e6 | rgb(176, 224, 230) | 1.43:1 | fails |
| lightblue | #add8e6 | rgb(173, 216, 230) | 1.53:1 | fails |
| lightskyblue | #87cefa | rgb(135, 206, 250) | 1.72:1 | fails |
| skyblue | #87ceeb | rgb(135, 206, 235) | 1.74:1 | fails |
| lightsteelblue | #b0c4de | rgb(176, 196, 222) | 1.78:1 | fails |
| deepskyblue | #00bfff | rgb(0, 191, 255) | 2.12:1 | fails |
| cornflowerblue | #6495ed | rgb(100, 149, 237) | 2.97:1 | fails |
| dodgerblue | #1e90ff | rgb(30, 144, 255) | 3.24:1 | AA large |
| lightslategray | #778899 | rgb(119, 136, 153) | 3.64:1 | AA large |
| lightslategrey | #778899 | rgb(119, 136, 153) | 3.64:1 | AA large |
| slategray | #708090 | rgb(112, 128, 144) | 4.05:1 | AA large |
| slategrey | #708090 | rgb(112, 128, 144) | 4.05:1 | AA large |
| steelblue | #4682b4 | rgb(70, 130, 180) | 4.11:1 | AA large |
| darkcyan | #008b8b | rgb(0, 139, 139) | 4.15:1 | AA large |
| mediumslateblue | #7b68ee | rgb(123, 104, 238) | 4.15:1 | AA large |
| royalblue | #4169e1 | rgb(65, 105, 225) | 4.85:1 | AA |
| slateblue | #6a5acd | rgb(106, 90, 205) | 5.31:1 | AA |
| blue | #0000ff | rgb(0, 0, 255) | 8.59:1 | AAA |
| darkslateblue | #483d8b | rgb(72, 61, 139) | 9.07:1 | AAA |
| mediumblue | #0000cd | rgb(0, 0, 205) | 11.16:1 | AAA |
| indigo | #4b0082 | rgb(75, 0, 130) | 12.95:1 | AAA |
| midnightblue | #191970 | rgb(25, 25, 112) | 14.85:1 | AAA |
| darkblue | #00008b | rgb(0, 0, 139) | 15.30:1 | AAA |
| navy | #000080 | rgb(0, 0, 128) | 16.01:1 | AAA |
Most of these names are inherited, not designed. The X11 list was a text file maintained by hand on Unix workstations, so blue picked up whatever someone felt like adding: cornflower, powder, dodger, cadet. Navy and blue came in through the sixteen HTML colours instead, which is why navy is #000080, exactly half of blue, and why darkblue at #00008B is actually lighter than navy.
Tints, shades and tones of #1e90ff
Built from one base color three different ways. Tints mix it toward white, shades toward black, and tones toward grey at the same lightness — which is why the tone row goes quiet rather than dark.
Tints
Shades
Tones
The 50-950 scale
Using blue in an interface
Blue is the default colour of a hyperlink in every browser default stylesheet, which makes it the least surprising choice for interactive text and a poor choice for anything that is not clickable. Watch the ratios: steelblue lands near 4.1:1 against white and misses AA for body copy, while royalblue clears it at about 4.8:1. Pale blues like aliceblue and lightcyan are backgrounds, not text, and they disappear entirely on a white card.
FAQ
- What hex code is navy?
- Navy is #000080, or rgb(0, 0, 128). It is exactly half the blue channel of blue itself, which is #0000FF, a legacy of a list built from simple binary steps. Against white it measures roughly 16:1, so it clears AAA for text at any size. Note that darkblue, #00008B, is slightly lighter than navy despite the name.
- Is cyan the same as aqua?
- Yes. Aqua and cyan are two names for #00FFFF, the same way fuchsia and magenta share #FF00FF. Aqua arrived with the sixteen HTML colours and cyan came from X11, and when the two lists were merged neither name was dropped. Browsers treat them as identical, and a colour picker will usually report whichever one it prefers.
- What is the difference between a tint and a shade of blue?
- A tint mixes the base toward white, a shade mixes it toward black, and a tone mixes it toward grey, which lowers saturation without moving lightness much. Applied to dodgerblue, tints give you the pale washes used for callout backgrounds, shades give you hover and pressed states, and tones give you the muted denim blues that sit quietly behind content.
