Blue family
Royal Blue color
A deep, rich blue leaning violet. The reference royal blue is #4169E1, as defined by the CSS named color.
| HEX | #4169E1 | |
|---|---|---|
| RGB | rgb(65, 105, 225) | |
| HSL | hsl(225, 73%, 57%) | |
| HSV | hsv(225, 71%, 88%) | |
| OKLCH | oklch(56.0% 0.188 266.4) | |
| CMYK* | 71, 53, 0, 12 |
* CMYK is a simple conversion without a print profile; ask your printer for exact values.
What color is royal blue?
Royal blue is a deep, vivid blue. It is traditionally said to have been created for a garment for Queen Charlotte of Great Britain in the 18th century. The CSS royalblue, #4169E1, is fairly light and bright; the xkcd survey royal blue is much darker and more violet.
Royal Blue hex codes by source
Color names are not standardized, so the same name can point to different colors. Here is every definition of royal blue in our three sources, with how close each one is to the reference.
| Name | HEX | Source | Compared with the reference |
|---|---|---|---|
| Royal Blue | #4169E1 | CSS named color | Reference shown on this page |
| Royal Blue | #0504AA | xkcd Color Survey | Noticeably different · 9% similar |
| Royal Blue | #4169E1 | Color Names (meodai) | Same color |
Royal Blue vs Navy Blue
#4169E1
#000080
Navy is far darker; royal blue is bright and saturated. In numbers: the two are 0% similar (OKLab distance 0.289). See Navy Blue for its own codes.
Colors similar to royal blue
The closest named colors to #4169E1 across all three sources, with their similarity in OKLab.
Tints and shades of royal blue
The same hue from light to dark, generated in OKLab so the steps look even. Click a step to copy its HEX code.
Colors that go with royal blue
Classic color-wheel combinations built on #4169E1, computed in OKLCH so the partners keep the same lightness and intensity. Each swatch shows the nearest common name.
Complementary
Analogous
Triadic
Split complementary
Royal Blue with white and black text
WCAG asks for a contrast of at least 4.5:1 for body text (AA) and 3:1 for large text. On a royal blue background, white text is the better choice.
Use royal blue in CSS
.royal-blue {
color: #4169E1;
/* or */ color: rgb(65 105 225);
/* or */ color: hsl(225 73% 57%);
/* or */ color: oklch(56.0% 0.188 266.4);
/* CSS keyword */ color: royalblue;
}