A vivid medium blue, white text passes AA
What color is royalblue?
The CSS named color royalblue is #4169e1, or rgb(65 105 225): a vivid medium blue in plain words. White text on it reaches 4.85:1, passing WCAG AA, and Recolor (recolor.page) can put it on a real page.
Last updated
| Format | Value |
|---|---|
| Keyword | royalblue |
| Hex | #4169e1 |
| RGB | rgb(65 105 225) |
| HSL | hsl(225 73% 57%) |
| OKLCH | oklch(56.0% 0.188 266.4) |
| Nearest Tailwind color | blue-600 #155dfc, 0.060 away in OKLab |
| White text | 4.85:1: AA passes, AAA fails, large text passes |
| Black text | 4.33:1: AA fails, AAA fails, large text passes |
About royalblue
Measured in OKLCH, royalblue comes out at lightness 56.0%, chroma 0.188 and hue 266.4 degrees: a vivid medium blue.
Here HSL's lightness, 57%, lands near OKLCH's 56.0%, which is not true of every color. No CSS keyword matches it; slateblue (#6a5acd) is the nearest, 0.064 away in OKLab, a clear step off.
White is the ink for royalblue: 4.85:1 passes AA for body text, where black stops at 4.33:1. Its neighbors in the hue-sorted list of names are steelblue and blue.
The closest Tailwind 4.3.3 color is blue-600, 0.060 away in OKLab, so bg-blue-600 comes near; bg-[#4169e1] gives the color itself.
Tints and shades
- #dde7fd
- #bccff9
- #9cb6f4
- #7c9def
- #5e84e8
- #4169e1
- #3151b0
- #223a82
- #132456
- #06102f
- #01020b
From light to dark: 5 toward white and 5 toward black, mixed in OKLCH a sixth of the way at a time with the hue kept. A step that would repeat its neighbor is left out.
A palette around it
- #4169e1
- #1a243e
- #9ab1f0
- #5d543e
- #d4defb
Around royalblue as swatch 1, Recolor's generator made a complementary palette, built on the hue opposite: #1a243e, #9ab1f0, #5d543e, #d4defb, drawn from a seed fixed by its hex. Open it in Recolor.
Using royalblue
As a text color, royalblue on a white page gives the same 4.85:1.
.notice {
background-color: royalblue; /* #4169e1 */
color: white; /* 4.85:1 */
}Common questions
Does white text pass WCAG AA on royalblue?
Yes. White text measures 4.85:1 on royalblue, above the 4.5:1 that WCAG AA asks of body text.
Can royalblue be written in OKLCH?
Yes: oklch(56.0% 0.188 266.4), computed from #4169e1. A named color is an sRGB color, so its OKLCH value converts back to the same hex.
Is there a named color close to royalblue?
No. The nearest, slateblue (#6a5acd), is 0.064 away in OKLab, a different color.