Royal Blue Background
#4169E1 · rgb(65, 105, 225)
About the royal blue background
Royal blue (#4169E1) brightens pure blue with red and green — rgb(65, 105, 225) — landing at the vivid, confident middle that most people picture when they hear 'blue'. It's sporty (countless team kits), techy and dependable.
White text on royal blue measures about 4.8:1, passing WCAG AA for body copy — one reason it's such a safe choice for full-color hero sections and primary buttons.
What to use a royal blue background for
- Primary buttons and brand CTAs
- Sports team and university colors
- Confident hero sections with white text
- SaaS landing pages and dashboards
How to use royal blue in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page royal blue background */
body {
margin: 0;
background-color: #4169E1;
}
/* A single section or element */
.hero {
background-color: rgb(65, 105, 225);
} Royal Blue shades and tints
Click any swatch to copy it. Tints mix royal blue with white; shades mix it with black.
Royal Blue background FAQ
What is royal blue's hex code?
CSS `royalblue` is #4169E1 — rgb(65, 105, 225). It's brighter than navy, deeper than dodger blue (#1E90FF).
Is white text readable on royal blue?
Yes — white on #4169E1 measures about 4.8:1, above the WCAG AA 4.5:1 requirement, which makes royal blue one of the safest vivid backgrounds for accessible text.
What is the hex code for royal blue?
Royal Blue is #4169E1 in hexadecimal, rgb(65, 105, 225) in RGB and hsl(225, 73%, 57%) in HSL. Paste #4169E1 into any CSS background-color property to use it.
How do I set a royal blue background in CSS?
Add background-color: #4169E1; to any element, or apply it to the whole page: body { background-color: #4169E1; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(65, 105, 225) — with identical results.