Skip to content
ColorPlum

Colors · value from the CSS Color Module Level 4 (W3C)

Royal blue color: hex code #4169E1, RGB and shades

Royal blue is #4169E1 (RGB 65, 105, 225), a CSS named color: a bright, medium blue with a hint of violet. White text on it, or it on white, measures 4.84:1, just clearing the AA minimum.

By Paul Gunder. Every value is computed from published standards; see how ColorPlum works.

Updated

ColorPlum swatchRoyal bluemedium, vivid blue
HEX
#4169E1
RGB
rgb(65, 105, 225)
HSL
hsl(225, 73%, 57%)

Best text on it: white at 4.84:1

Copy codes as
Build a paletteMake a gradientCheck contrastWallpaper

Every code for Royal blue

  • HEX#4169E1
  • RGBrgb(65, 105, 225)
  • HSLhsl(225, 73%, 57%)
  • HSV225°, 71%, 88%
  • CMYK71%, 53%, 0%, 12%
  • Lablab(46.8% 17.8 -66.7)
  • OKLCHoklch(56% 0.188 266.4)
  • Decimal4286945

Tints, shades and tones

From white to black in 10% steps, with Royal blue in the middle. Tap a code to copy it.

  1. 90%#ECF0FC
  2. 80%#D9E1F9
  3. 70%#C6D2F6
  4. 60%#B3C3F3
  5. 50%#A0B4F0
  6. 40%#8DA5ED
  7. 30%#7A96EA
  8. 20%#6787E7
  9. 10%#5478E4
  10. Base#4169E1
  11. 10%#3B5FCB
  12. 20%#3454B4
  13. 30%#2E4A9E
  14. 40%#273F87
  15. 50%#213571
  16. 60%#1A2A5A
  17. 70%#142044
  18. 80%#0D152D
  19. 90%#070B17

Tones (mixed with gray)

  1. 10%#476BD7
  2. 20%#4E6ECE
  3. 30%#5470C4
  4. 40%#5A72BA
  5. 50%#6175B1
  6. 60%#6777A7
  7. 70%#6D799D
  8. 80%#737B93
  9. 90%#7A7E8A

Matching colors

Complementary
Analogous
Triadic
Split complementary
Tetradic (square)
Monochromatic
  • #132C76
  • #1D44B8
  • #4169E1
  • #839DEB
  • #C5D1F6

Royal blue in 3D color space

OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.

Royal blue with its complement, its triad and its tint and shade
  • Royal blue
  • Triad #E14169
  • Triad #69E141
  • Complement
  • 50% tint
  • 50% shade

Royal blue in use

New collectionAutumn edit

Card body text stays dark for reading; royal blue carries the header and the button.

Shop nowTag

Headline in Royal blue

A paragraph with a link set in this color, which is dark enough for text on white.

How it looks with color-vision deficiency

A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.

  • Typical color vision#4169E1
  • Protanopia (no red cones)#0879E5
  • Deuteranopia (no green cones)#006ADF
  • Tritanopia (no blue cones)#00869B

Contrast and readability

PairingRatioWCAG 2.2
as text on white4.84:1AA AA large AAA
as text on black4.33:1AA AA large AAA
white text on it4.84:1AA AA large AAA
black text on it4.33:1AA AA large AAA
on your background4.23:1AA AA large AAA

Export

:root {
  --royal-blue: #4169e1;
  --royal-blue-rgb: 65 105 225;
  --royal-blue-on: #ffffff;
}
On this page

CSS spells it royalblue and gives it the value #4169E1. The name is tied to the rich blue associated with royalty, and in CSS it is a lively, clear blue that is lighter than navy and more saturated than a sky tone.

What the codes mean

In RGB, royal blue is 65, 105, 225: blue is high, green is in the middle, and red is low. In HSL that is hue 225°, 73% saturation and 57% lightness. The CMYK estimate is 71%, 53%, 0%, 12%. At hue 225° it leans slightly toward violet compared with a pure blue at 240°, and this is why it looks warm for a blue.

The xkcd survey list disagrees with CSS by a wide margin. Its "royal blue" is #0504AA, a very dark, deep blue that sits 22.6 away in OKLab distance, which is a large gap. If someone says "royal blue", the CSS color is the lighter one you see on the web and the survey color is the darker one many people picture. The nearest survey names to the CSS color are "cornflower blue" (#5170D7, 3.1 away) and "azul" (#1D5DEC, 4.7 away). In CSS, slateblue (#6A5ACD) is 6.4 away, and dodgerblue (#1E90FF) is 10.2 away. A calmer alternative is lavender.

Using royal blue well

  • Text on it: white measures 4.84:1, which clears AA. Black on it falls to 4.33:1.
  • As text: royal blue on white is also 4.84:1, so it works for links and headings. On ghost white (#F8F8FF) it reads 4.58:1, still above 4.5:1 but with little room.
  • Shades: the 40% shade, #273F87, with white reaches 9.78:1, so hover and pressed states can go darker without losing contrast.
  • Pairings: the complement is a golden yellow, #E1B941. White, silver and gold are the usual partners; see blue and silver palettes.

Worked example

You are designing a primary button for a booking site. The fill is royal blue and the label is white, so the button measures 4.84:1. That passes AA at normal size, but it does not pass AAA, so the label should be bold and at least 16px. When the pointer hovers, switch the fill to #273F87, which makes the label 9.78:1. Use the tint ladder above for the disabled state: the 80% tint, #D9E1F9, with the label in the 40% shade gives a calm "unavailable" look that is still legible. Test your own background with the "Try a background" field.

Royal blue versus navy and cobalt

Navy is far darker, and cobalt is usually purer and slightly deeper. Royal blue lies between the two. For a darker, formal look, see the navy blue and yellow palettes, and for a brighter option, neon blue.

Sources

  1. W3C, CSS Color Module Level 4: named colors and color conversions (checked 2026-11-10) w3.org
  2. xkcd, Color survey results: the 954 most common color names (Randall Munroe, 2010; checked 2026-11-10) xkcd.com
  3. W3C, Web Content Accessibility Guidelines (WCAG) 2.2: contrast minimum (checked 2026-11-10) w3.org