Royal Blue #4169E1
Royal blue, in its CSS form, is #4169E1: a bright, medium blue that is cool, saturated, and much lighter than navy. It has a confident, punchy quality without the harshness of pure blue. Think of team jerseys, first-place ribbons, and school crests.
#4169E1 is the CSS named color royalblue. Older, traditional royal blue is far darker and deeper, and is often given as #002366, so the name covers two quite different shades.
| HEX | #4169E1 | |
|---|---|---|
| RGB | rgb(65, 105, 225) | |
| HSL | hsl(225, 73%, 57%) | |
| HSV | hsv(225, 71%, 88%) | |
| CMYK | cmyk(71%, 53%, 0%, 12%) |
Text on Royal Blue
White text reads better on Royal Blue. Ratios use the WCAG 2 formula: 4.5:1 passes AA for body text, 3:1 passes for large text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Colors that go with Royal Blue
Royal Blue tints and shades
Tints mix Royal Blue with white, shades mix it with black, in 15% steps. Copy any code, or open the tint and shade generator for a full scale.
Tints
Shades
Royal Blue color schemes
Color-wheel harmonies built by rotating the hue of #4169E1 and keeping its saturation and lightness.
Complementary
Analogous
Triadic
Split complementary
Tetradic
Royal Blue color meaning
The name ties the color to monarchy, particularly the British royal family, and the deeper traditional shade still carries that sense of status. The bright modern version feels more sporty than regal.
In the United States a blue ribbon traditionally marks first place at fairs and competitions, which feeds the color's association with winning and quality. Royal blue is also one of the most common team colors in school and professional sports.
Compared with navy, royal blue feels more outgoing. It keeps the trust and steadiness people read into blue in general, then adds energy. For a brand, that combination suits organizations that want to look dependable and modern at the same time, such as tech companies, schools, and sports clubs.
How to use Royal Blue in design
White text works on royal blue for buttons, headings, and banners, and bold weights read best at small sizes. Dark text is a weaker choice here. The color makes an excellent primary call-to-action on a light page, and it holds up well in print and on merchandise.
It can clash with saturated purple or red when they sit side by side. In fashion and interiors, a royal blue dress, velvet sofa, or accent wall looks deliberate and bold, especially with gold, white, or warm orange nearby.
Palettes with Royal Blue tones
Curated palettes with a color close to #4169E1.
Colors similar to Royal Blue
Work with Royal Blue
Royal Blue FAQ
What is the difference between royal blue and navy blue?
Royal blue is brighter and lighter. The CSS royal blue (#4169E1) has plenty of light and a slight lean toward azure, while navy (#000080) is a very dark pure blue. Navy works like a neutral for suits and text; royal blue is a statement color that grabs attention.
What colors go with royal blue?
White, gold, and silver are safe, classic matches. Orange and mustard yellow make high-contrast pairings with real energy. For softer looks, try light gray, blush pink, or cream. Keep saturated purples and reds at a distance, since they compete with royal blue instead of supporting it.