CSS Color: RoyalBlue
Named CSS color RoyalBlue — #4169E1 in HEX, rgb(65, 105, 225) in RGB, hsl(225, 73%, 57%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | RoyalBlue | color: RoyalBlue; |
| HEX | #4169E1 | color: #4169E1; |
| RGB | rgb(65, 105, 225) | color: rgb(65, 105, 225); |
| HSL | hsl(225, 73%, 57%) | color: hsl(225, 73%, 57%); |
About RoyalBlue
RoyalBlue is a rich, medium-bright blue with a subtle violet undertone. At hex `#4169E1`, it sits at 225 degrees on the hue wheel — 15 degrees closer to violet than pure blue. With 73% saturation and 57% lightness, it is vibrant without being overwhelming.
In web design, RoyalBlue conveys elegance, authority, and trustworthiness. It is a popular choice for primary brand colors in enterprise software, banking applications, and professional services. Its slight violet shift gives it a more distinctive character than generic blues.
For accessibility, RoyalBlue against white achieves approximately 3.9:1 contrast, passing WCAG AA for large text. For body text, pair it with lighter backgrounds or use a slightly darker shade. Against dark backgrounds, it provides excellent readability.
RoyalBlue is warmer and more violet than DodgerBlue, and brighter than Navy. It pairs well with white, gold, light gray, and soft coral. In Tailwind CSS, `blue-600` is the closest match for this elegant, trustworthy blue.
FAQ
What is the hex code for RoyalBlue?
The CSS named color RoyalBlue has the hex code #4169E1. You can use it in CSS as color: #4169E1; or simply color: RoyalBlue;.
What is RoyalBlue in RGB?
In RGB notation, RoyalBlue is rgb(65, 105, 225). Use it in CSS as color: rgb(65, 105, 225);.
What is RoyalBlue in HSL?
In HSL notation, RoyalBlue is hsl(225, 73%, 57%). Use it in CSS as color: hsl(225, 73%, 57%);.
What color category is RoyalBlue?
RoyalBlue belongs to the Blue color family in the CSS named colors specification.
Can I use the name "RoyalBlue" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: RoyalBlue; or background-color: RoyalBlue; directly in your stylesheet. Named colors are case-insensitive.
Related Colors
Try in Color Converter
Convert RoyalBlue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →