Royal blue’s HEX code is #4169E1. It sits at hue 225 with 73% saturation and 57% lightness — a vivid, medium-bright blue with enough violet lean to feel regal without reading as purple.
Below you get every royal blue code format, the five computed harmony palettes, and exact WCAG contrast ratios. Every value is computed from the hex, so you can drop them into your design tokens without rounding.
What Is the Color of Royal Blue?
Royal blue is the CSS named color royalblue, mapped to #4169E1. Its RGB is rgb(65, 105, 225): the blue channel dominates at 225, green adds 105, and red sits at 65, which is why the hue leans slightly violet rather than pure blue.
Historically, the name came from a dressmaking competition for Queen Charlotte in 18th-century England. In modern UI, it signals trust, authority, and energy — the same reasons banks, SaaS products, and government sites reach for it.
What Is Royal Blue vs Navy Blue?
Royal blue (#4169E1) is significantly lighter and more saturated than navy (#000080). Royal sits at 57% lightness and 73% saturation; navy sits at 25% lightness and full saturation. The result: royal blue pops on white, while navy recedes and reads closer to black.
In design systems, navy works for backgrounds and deep containers; royal blue works for interactive highlights, links, and brand accents.
Is Royal Blue a Darker Blue?
Not compared to navy, midnight, or cobalt. At 57% lightness, royal blue sits in the mid-bright range — darker than sky blue (#87CEEB) and cornflower (#6495ED), lighter than navy (#000080) and dark blue (#00008B). It’s the blue you pick when you want vibrancy without darkness.
How Does Royal Blue Appear on Digital Screens?
On white, royal blue passes WCAG AA at 4.85:1. On pure black it manages 4.33:1 — large text only.
Dark mode uses the variant #4F74E3 on a blue-cast dark surface #0C101D, where it reaches 4.46:1 — large text only. Royal blue’s dark mode story needs care: pair the brighter variant with icons and headings, not body copy.
What UI Elements Work Best with Royal Blue?
Royal blue’s mid-brightness and high saturation make it ideal for interactive elements that need to stand out without shouting.
Buttons and CTAs
White text on #4169E1 passes AA at 4.85:1. Use #314FA9 for hover — it jumps to 7.44:1 (AAA). You can use Visily’s Theme feature to apply these consistently across your wireframes.
Navigation Bars
A royal blue navbar creates a strong brand anchor. White labels and icons clear AA, and the dark variant #314FA9 works for active-item highlights.
Data Visualizations
Royal blue reads as trustworthy neutral in charts, so it works as the default series color in financial dashboards and analytics tools. Its shade ramp from #4169E1 through #314FA9 gives you sequential depth.
Dark Mode Surfaces
The #0C101D surface with #4F74E3 accents keeps royal blue’s identity alive at 4.46:1. Use it for large text and icons — body text should stay white or light gray.
What Are the Best Royal Blue Color Palettes for UI?
Five harmony schemes come from royal blue’s position at hue 225. Every value below is computed from #4169E1.
Monochromatic
The set: #4169E1, #183797, and #A5B8F1. One hue at three values gives you a disciplined corporate look — SaaS dashboards and enterprise tools pick this to keep the interface clean.
Analogous
The set: #4169E1 with #6941E1 (toward violet) and #41B9E1 (toward cyan). Neighboring hues stay calm together, ideal for tech, finance, and communication products.
Complementary
The set: #4169E1 against #E1B941, its direct opposite (gold/amber). Maximum hue contrast makes the gold ideal for the 10% accent layer: upgrade badges, premium tiers, and marketing moments.
Triadic
The set: #4169E1, #E14169 (crimson-pink), and #69E141 (green). Three evenly spaced hues at matched saturation suit multi-category data or gamified interfaces.
Split-Complementary
The set: #4169E1 with #E16941 and #B9E141. You keep the complementary energy with a softer landing, making it easier to balance across a full product surface.
Which Colors Are Similar to Royal Blue?
The three closest named colors are medium blue (#0000CD), steel blue (#4682B4), and dodger blue (#1E90FF). Medium blue is deeper and purer, steel blue adds gray that mutes the intensity, and dodger blue is brighter and lighter.
What Color Does Not Go with Royal Blue?
Avoid the near-neighbors #5C41E1 and #41ACE1. They sit 15 to 45 degrees away at the same lightness, so edges between them and #4169E1 vibrate.
Certain saturated reds also clash: the intensity of both colors fights for dominance, so if you need red in a royal-blue system, desaturate one of them.
Which Colors Pair Best with Royal Blue?
The single best accent partner is #E1B941, royal blue’s computed gold complement. For neutrals, crisp whites and light grays are the safest bets, and warm metallics like brass lean into royal blue’s regal associations.
Apply the 60-30-10 split: 60% neutral background, 30% royal blue for structure and primary components, 10% gold accent.
Does Royal Blue Meet Accessibility Standards?
Yes, at AA level: #4169E1 on white scores 4.85:1, clearing the WCAG AA threshold of 4.5:1. Use #314FA9 (7.44:1) when AAA compliance matters.
Royal blue is safe for color-blind users since blue is the last hue affected in red-green deficiencies. Still, pair any color-dependent meaning with an icon or label.
How Can You Convert Royal Blue Between HEX, RGB, HSL, CMYK, and Other Color Formats?
All six formats describe the same color:
- HEX #4169E1 — the default for CSS and design tokens.
- RGB rgb(65, 105, 225) — use RGBA for alpha overlays.
- HSL hsl(225, 73%, 57%) — programmatic shifts; hover states are one lightness change away.
- HSB 225, 71, 88 — what Figma’s and Photoshop’s pickers show.
- CMYK 71, 53, 0, 12 — for print brand collateral.
Wrapping Up
Royal blue (#4169E1) earns its place as a UI primary: AA contrast on white, a balanced violet lean that signals authority without heaviness, and harmony palettes that stretch from corporate to creative. The numbers above are computed, not guessed.
Put them to work in Visily‘s Theme feature: pick the harmony that fits your product and ship a royal blue interface today.
