Royal blue sits right on the contrast line
#4169E1 is a mid-tone blue, and that makes text tricky. White on it scores 4.85:1 and black scores 4.33:1, so white just passes AA for normal text and black just fails. Bold white button labels are fine. Thin white text, or royal blue text on a light grey rather than white, can slip under the limit.
If you need more headroom, go darker rather than switching to black text. Dropping the HSL lightness from 57% to 45% keeps the colour recognisably royal and pushes white text well past AA. The strip under the swatch shows those steps.
Royal blue vs cobalt (and navy)
| Name | HEX | Hue | White text |
|---|---|---|---|
| Royal blue (CSS) | #4169E1 | 225° | 4.85:1 |
| Cobalt | #030AA7 | 237° | 13.08:1 |
| Navy (CSS) | #000080 | 240° | 16.01:1 |
| Tailwind blue-600 | #2563EB | 221° | 5.17:1 |
Cobalt is named after the cobalt pigment used in ceramics and glass. It is far more saturated and darker than royal blue, closer to pure blue. Royal blue has some red and green mixed in, which is why it looks friendlier and a little lighter. Tailwind's blue-600 is a common modern stand-in for royal blue in interfaces.
Pairings
Royal blue and gold is a sports-kit staple, but gold text on royal blue only reaches 3.46:1, fine for big lettering and too weak for small print. Royal blue with navy gives a tonal two-blue scheme; coral adds warmth without fighting it.
Questions
What are royal blue's RGB values?
rgb(65, 105, 225), HSL hsl(225, 73%, 57%).
Is royal blue the same as cobalt blue?
No. Cobalt is darker and more intense. If you are matching fabric or paint, take a photo and sample it with the colour picker rather than relying on the name.