UI Shades

A study in blue

Royal Blue

#4169E1

Family
Blue
L
0.560
C
0.188
H
266°

Notes

Royal Blue is the bright, slightly purple-leaning blue historically associated with British monarchy. The CSS hex carries strong chroma at mid lightness and reads as confident and slightly formal. Editorial, financial, and heritage brands use it as a primary accent. Pair with cream for warmth, or with warm gold for a luxury accent. Against white it passes body text contrast in most sizes and works as a primary action colour or display heading. AA passes at standard body sizes and AAA at 18px and above.

#4169e1
Royal Blue
Royal Blue
#4169e1
oklch(0.56 0.188 266.4)
rgb(65 105 225)
hsl(225 72.7% 56.9%)
Share
#f1faff
#e9f4ff
#d3e5ff
#bbd4ff
#8bb1ff
#5682fc
#4169e1
#2f52c1
#1e3992
#112569
#06123d

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Royal Blue

Cross-reference
Q&A

Frequently asked questions

What is Royal Blue?

Royal Blue is the bright, slightly purple-leaning blue historically associated with British monarchy. The CSS hex carries strong chroma at mid lightness and reads as confident and slightly formal. Its hex code is #4169E1.

What are the tints and shades of Royal Blue?

uishades builds an 11-step OKLCH ramp for Royal Blue (#4169E1) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Royal Blue?

Its complementary color is #966D00. Triadic partners are #CB3532 and #008F20; analogous neighbours are #8254D3 and #007EBE.

What are the OKLCH and RGB values of Royal Blue?

Royal Blue is #4169E1 - OKLCH 0.560 0.188 266°, rgb(65 105 225), in the blue family.