Royal Blue

#305CDE

What color is Royal Blue?

Royal blue is a bold, vivid blue with a slight purple lean, hex #305CDE, brighter and richer than navy. It has a strong, saturated tone similar to the blue of a sapphire gemstone.

What is the meaning of the color Royal Blue?

The name traces to early 19th-century England, where the shade was said to have been produced for a gown made for Queen Charlotte around 1810. The color spread quickly through British textile trade, where deep saturated blues became associated with aristocratic dress and ceremonial fabric. By the early 20th century, royal blue had become a standard named color in commercial dye catalogues across Europe and North America. Everton F.C., founded in 1878, adopted royal blue as its official club color, one of the earliest documented institutional uses of the name in sport.

RGB
48, 92, 222
HSL
225°, 73%, 53%
CMYK
78, 59, 0, 13
HSV
225°, 78%, 87%
Royal blue color

What colors go with Royal Blue?

Colors that pair well with Royal blue include:
Gold: rich, warm contrast
White: clean, crisp balance
Crimson: bold, high-impact pairing
Silver: cool, polished complement
Ivory: soft, warm contrast

Similar Colors

Conversions & Codes

Format Value CSS
HEX #305CDE color: #305CDE;
RGB 48, 92, 222 color: rgb(48, 92, 222);
RGB Percentage 19%, 36%, 87% color: rgb(19%, 36%, 87%);
CMYK 78%, 59%, 0%, 13% Not supported in CSS
HSL 225°, 73%, 53% color: hsl(225, 73%, 53%);
HSV 225°, 78%, 87% Not supported in CSS
CIE-LAB 42, -9, -43 color: lab(42% -9 -43);
Decimal 3169502 Not supported in CSS

Color Variations

Shades

#305BDF
#214DD2
#1D45BB
#1A3CA4
#16338C
#122B75
#0F225E
#0B1A46

Tints

#C1CEF5
#ACBEF2
#97ADEF
#839DEC
#6E8CE8
#597CE5
#446CE2
#305BDF

Tones

#305BDF
#3860D6
#4164CD
#4A69C4
#536DBC
#5B71B3
#6476AA
#6D7AA1

Hues

#305BDF
#8730DF
#DF30B3
#DF3030
#DFB330
#87DF30
#30DF5B
#30DFDF

Color Harmonies

Analogous

#30B3DF
Click to copy
#305CDE
Click to copy
#5B30DF
Click to copy

Complementary

#305CDE
Click to copy
#DFB330
Click to copy

Split Complementary

#305CDE
Click to copy
#DF5B30
Click to copy
#B3DF30
Click to copy
96%

Triadic

#305CDE
Click to copy
#DF305B
Click to copy
#5BDF30
Click to copy

Tetradic

#305CDE
Click to copy
#DF30B3
Click to copy
#DFB330
Click to copy
#30DF5B
Click to copy

Square

#305CDE
Click to copy
#DF30B3
Click to copy
#DFB330
Click to copy
#30DF5B
Click to copy

CSS & Dev Snippets

CSS
.royal-blue {
  color: #305CDE;
}
SCSS
$royal-blue: #305CDE;
RGB
rgb(48, 92, 222)

Accessibility & Contrast

White background

5.66:1
5.66
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

3.71:1
3.71
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags