ع

Royal Blue

أزرق ملكي

Color codes

HEX
RGB
HSL
HSV
CMYK (approximate)
CIELAB
CSS
Relative luminance0.1666
Blue CSS Named ColorsWeb & UI ColorsCool ColorsBranding Colors Cool

Shades of Royal Blue

All shades

Lighter

Darker

Tints mixed with white

Tones mixed with gray

Color harmonies

Complementary

Opposite on the wheel (180°): maximum contrast for accents.

Export
Analogous

Neighbors 30° apart: calm and natural.

Export
Triadic

Three hues 120° apart: vibrant yet balanced.

Export
Split-complementary

The base plus the two neighbors of its complement: contrast with less tension.

Export
Tetradic

Four hues 90° apart: rich, best with one dominant color.

Export
Monochromatic

One hue in several lightness levels: elegant and consistent.

Export

Contrast and readability

White text4.85:1
✓ AA✗ AAA✓ AA Large
Black text4.33:1
✗ AA✗ AAA✓ AA Large
On white4.85:1
✓ AA✗ AAA✓ AA Large
On black3.90:1
✗ AA✗ AAA✓ AA Large

Text colors that pass AA

Check in the contrast checker

In a design

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started Learn more
New

Cards and badges use a soft tint of the color. Read more

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started
New

Cards and badges use a soft tint of the color.

Royal Blue

Full-color background with readable text.

Get started

About Royal Blue

Royal Blue (#4169E1) is a medium, highly saturated color from the Blue family with a cool character. It is made of 65 red, 105 green and 225 blue (hsl(225, 73%, 57%)). Its contrast ratio is 4.85:1 against white and 4.33:1 against black, so white text reads best on it.

Suggested uses

  • buttons, highlights and calls to action
  • logos and brand accents
  • calm, trustworthy or technical themes

Reading the codes

In HEX, #4169E1 stores red, green and blue as pairs of base-16 digits: 65, 105 and 225 out of 255. In HSL the same color has a hue of 225°, 73% saturation and 57% lightness, which makes lighter or darker variants easy to create by changing only the lightness.

Similar colors

#0066CCLink Blue#1560BDDenim#1F51FFNeon Blue#6A5ACDSlate Blue#3B82F6Info Blue#7B68EEMedium Slate Blue#0F52BASapphire#5A4FCFIris#26619CLapis Lazuli#4682B4Steel Blue

Palettes with this color

Clean Blog#FFFFFF #F3F4F6 #374151 #111827 #2563EBSaaS Dashboard#0F172A #1E293B #6366F1 #10B981 #F8FAFCTrust Blue#0B1F3A #1D4E89 #3A7BD5 #A7C7E7 #F2F6FBDusty Blue Ceremony#F4F6F8 #CFD9E2 #9FB3C8 #61789A #D6B88F

Tools for this color

Shades GeneratorGenerate tints, tones, lighter and darker shades and saturation variations.Contrast CheckerAccurate WCAG contrast ratio with AA/AAA results and accessible suggestions.Color Harmony GeneratorComplementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies.Color Blindness SimulatorApproximate protanopia, deuteranopia, tritanopia and achromatopsia simulations.

Frequently asked questions

What is the HEX code of Royal Blue?
The HEX code of Royal Blue is #4169E1. In RGB it is rgb(65, 105, 225) and in HSL hsl(225, 73%, 57%).
Which text color works on Royal Blue?
White text has a contrast ratio of 4.85:1 on Royal Blue and black text 4.33:1, so white text is more readable. WCAG AA needs at least 4.5:1 for normal text.
What is the complementary color of Royal Blue?
Rotating the hue of Royal Blue by 180° gives #E1B941, its complementary color on the RGB color wheel.
What is Royal Blue in CMYK?
An approximate CMYK value for Royal Blue is cmyk(71%, 53%, 0%, 12%). For printing, ask your printer for an ICC-profiled conversion.