CSS named color

RoyalBlue

#4169E1
HEX#4169e1
RGBrgb(65, 105, 225)
HSLhsl(225, 73%, 57%)
OKLCHoklch(55.98% 0.1882 266.40)
NAMEroyalblue

Palette

Complementary

180° on the color wheel
Complement
#E1B941

Analogous

±30° around the base hue
Left
#41B9E1
Right
#6941E1

Triadic

±120° for harmonic contrast
Triad 1
#E14169
Triad 2
#69E141

Shades

Lighter and darker variants
Lightest
#DCE3F9
Lighter
#9AAFEF
Base
#4169E1
RoyalBlue
Darker
#193CA3
Darkest
#0F2461

CSS usage

By name
color: royalblue;
background-color: royalblue;
By HEX
color: #4169e1;
background-color: #4169e1;
By RGB
color: rgb(65, 105, 225);
background-color: rgb(65, 105, 225);
By HSL
color: hsl(225, 73%, 57%);
background-color: hsl(225, 73%, 57%);

WCAG contrast vs white

Aa
4.85:1
AA

WCAG contrast vs black

Aa
4.33:1
AA (large text)

Related colors

FAQ — RoyalBlue

What is the HEX code for RoyalBlue?

The HEX code for RoyalBlue is #4169E1. It's one of the 148 named CSS colors and can be used directly in CSS as color: royalblue; or color: #4169e1;

What is RoyalBlue in RGB?

RoyalBlue in RGB is rgb(65, 105, 225) — red 65, green 105, blue 225.

What is RoyalBlue in HSL?

RoyalBlue in HSL is hsl(225, 73%, 57%) — hue 225°, saturation 73%, lightness 57%.

What is the complementary color of RoyalBlue?

The complementary color (directly opposite RoyalBlue on the color wheel) is #E1B941. The two together produce maximum contrast.

Is white text readable on RoyalBlue?

The WCAG contrast ratio against white (#FFFFFF) is 4.85:1, and against black (#000000) it's 4.33:1. White text is more readable. WCAG recommends at least 4.5:1 for body text.

← All colors & converter