Royal Blue color code: #4169E1
The CSS named royal blue: bright, energetic and considerably lighter than navy.
Royal Blue · rgb(65, 105, 225)
Every format for Royal Blue
- HEX
- #4169E1
- RGB
- rgb(65, 105, 225)
- HSL
- hsl(225, 73%, 57%)
- HSV
- 225°, 71%, 88%
- CMYK
- 71%, 53%, 0%, 12%
- Lightness
- 57% · mid-tone
Hue sits at 225°, which makes Royal Blue a true blue navy, with 73% saturation. In the Royal Navy family it reads as a mid-tone option.
Text contrast on Royal Blue
Contrast ratios are calculated using the WCAG 2.1 relative luminance formula. Normal body text needs 4.5:1 and large text needs 3:1 to pass AA.
White text on Royal Blue
The quick brown fox jumps over the lazy dog.
4.85:1 — AA for normal textBlack text on Royal Blue
The quick brown fox jumps over the lazy dog.
4.33:1 — AA for large text onlyRoyal Blue text on white
The quick brown fox jumps over the lazy dog.
4.85:1 — AA for normal textAccessibility notes
- Pair Royal Blue with white text for the strongest reading experience: that combination gives 4.85:1.
- Used as a text colour on white, it clears the 3:1 bar for large headings.
- Never rely on Royal Blue alone to communicate state. Add an icon, label or underline so the meaning survives for colour-blind users and in greyscale printing.
- When placing text over a photograph tinted with Royal Blue, add a solid overlay first. Contrast measured against a flat colour does not hold over varying imagery.
Using Royal Blue in CSS and HTML
CSS example
:root {
--royal-blue: #4169E1;
}
.panel {
background-color: var(--royal-blue);
color: #FFFFFF;
border: 1px solid #4169E1;
}HTML example
<div style="background-color: #4169E1; color: #FFFFFF; padding: 1rem;">
Royal Blue #4169E1
</div>Common uses
- Primary buttons, active navigation states and chart series.
- Royal Navy palettes for brand systems that need a dependable cool anchor.
- Print work where a deep blue is preferred to black, using the CMYK build 71%, 53%, 0%, 12%.
- Data visualisation, as one step in a lightness-based navy scale.
Design recommendations
- Build lighter and darker variants by changing only the lightness in
hsl(225, 73%, 57%). Keeping hue fixed is what makes a scale look intentional. - Give Royal Blue at least one warm counterweight. A cool palette with no warm accent tends to read as cold rather than calm.
- Saturation is high here, so use it in measured amounts. Large flat areas of a saturated navy can feel heavy on screen.
Complementary and matching colors
Each of these is derived from the hue, saturation and lightness of Royal Blue. Click a swatch to copy it.
Similar navy shades
Continue exploring
FAQs about Royal Blue
What is the Royal Blue color code?
The Royal Blue color code is #4169E1 in HEX, rgb(65, 105, 225) in RGB and hsl(225, 73%, 57%) in HSL.
What is the RGB value of Royal Blue?
Royal Blue is rgb(65, 105, 225), meaning 65 units of red, 105 of green and 225 of blue on the 0 to 255 scale.
What is the CMYK value of Royal Blue?
In CMYK, Royal Blue converts to approximately 71%, 53%, 0%, 12%. Printed output will look slightly less saturated than the screen preview because CMYK covers a narrower gamut.
Does white text work on Royal Blue?
White text on Royal Blue gives a contrast ratio of 4.85:1, which is AA for normal text.
Does black text work on Royal Blue?
Black text on Royal Blue gives a contrast ratio of 4.33:1, which is AA for large text only.
Which colors go with Royal Blue?
Its direct complement is #E3BE4F, and the warm accent #E4E444 works well for calls to action. For a quieter scheme, pair it with the analogous blues listed above.
Is Royal Blue a light or dark navy?
At 57% lightness, Royal Blue is classed as a mid-tone navy in this collection.