Royal Blue Color

About royal blue

#4169E1 is the CSS named color royalblue. It is lighter and friendlier than pure blue, with a touch of red and green that keeps it from looking harsh, which makes it a popular choice for buttons and brand colors.

Outside CSS, “royal blue” traditionally describes a much deeper, darker blue (often given as #002366). If you are matching fabric, uniforms or a historic brand, check which one you need.

#4169E1 is the value of the CSS named color royalblue, defined in the CSS Color specification and identical in every browser.

Other colors called royal blue

• Traditional royal blue #002366The deeper, darker royal blue outside CSS.Copy

Royal Blue shades and tints

Shades mix royal blue with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with royal blue

Color harmonies based on the hue of #4169E1: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Royal Blue contrast and readability

On a royal blue background, white text reads best (4.84:1). Here is how royal blue works as a text color:

White text on #4169E1 passes WCAG AA for normal text, so it works well for primary buttons. As text on white it is readable too; check the exact ratio below for small text.

Using royal blue in CSS and HTML

:root {
  --color-royal-blue: #4169E1;
}

.highlight {
  background-color: var(--color-royal-blue);
}

.banner {
  background-color: royalblue;
  color: #ffffff;
}

.label {
  color: #4169E1;
  border: 2px solid rgb(65, 105, 225);
}

<p style="background-color: #4169E1; color: #FFFFFF;">
  Royal Blue background
</p>