ColorPairLabRoyal Blue hex and RGB values
The CSS keyword royalblue gives you #4169E1, or rgb(65, 105, 225).
Royal Blue is lighter than CSS blue. For a heading or link, check this exact value against the page background rather than borrowing another blue’s result.
Compare black and white text
| Text / background | Ratio | AA normal | AA large | AAA normal | AAA large |
|---|---|---|---|---|---|
| #000000 / #4169E1 | 4.33:1 | Fail | Pass | Fail | Fail |
| #FFFFFF / #4169E1 | 4.85:1 | Pass | Pass | Fail | Pass |
White text has the higher contrast on royal blue: 4.85:1. The table compares both options against all four text thresholds, using the unrounded values for pass or fail.
Try royal blue in a layout
The CSS sample below uses white text on #4169E1. Preview a 16 px label and a 24 px heading to compare normal and large text. Swap the colors to try royal blue as the text color; the ratio stays the same.
.sample {
background: #4169E1;
color: #FFFFFF;
}Copy the exact color
Use the converter to copy HEX, RGB or HSL. If you edit in HSL, the final value is rounded to eight-bit sRGB so the preview and exported color agree. For text over an image, gradient or translucent layer, check the finished design separately.