Pure blue is darker than it looks
#0000FF feels bright because it is fully saturated, but our eyes are least sensitive to blue light. Its relative luminance is only about 7%, so white text on it scores 8.59:1 (passes AAA) and black text only 2.44:1. That is the opposite of pure yellow, which looks almost as intense yet needs dark text.
Blue vs navy vs royal blue
| Name | HEX | White text | What sets it apart |
|---|---|---|---|
| Blue | #0000FF | 8.59:1 | Electric, slightly purple on many screens |
| Medium blue | #0000CD | 11.16:1 | Same hue at 80% brightness, calmer |
| Navy | #000080 | 16.01:1 | Half brightness; close to black in small areas |
| Royal blue | #4169E1 | 4.85:1 | Lighter and less saturated, hue shifted to 225° |
| Dodger blue | #1E90FF | 3.24:1 | A sky-leaning blue; white text only passes when large |
All five are CSS keywords, so you can type the name straight into a stylesheet. For more on the two most-searched variations, see navy blue and royal blue.
The blue of links
Unstyled links in most browsers are #0000EE, a hair darker than pure blue, and visited links turn #551A8B. On white they score 9.40:1 and 11.01:1. Those defaults are why users still read “blue and underlined” as clickable. If your design uses blue for decoration as well, links lose that signal; keep the underline.
What goes with blue
On a screen wheel the opposite of blue is yellow, #FFFF00, which makes the strongest contrast of hue you can get. Orange is the softer, painterly version of that pairing. Blue with silver or white reads clean and technical, which is part of why so many banks and software companies use it.
Blue on paper
Straight conversion gives 100% cyan and 100% magenta with no black. Printed, that is a deep violet-blue, noticeably duller than the screen version. Bright screen blues are among the colours that change most between monitor and print, so proof them.
Questions
What is the RGB value of blue?
rgb(0, 0, 255), or hsl(240, 100%, 50%).
How do I make a lighter blue from #0000FF?
Raise the HSL lightness: 70% gives #6666FF. The strip under the swatch above shows nine steps, or use the palette generator for a full set of tints and shades.