Color

Royal Blue

#4169E1
Hue
225°
Sat
73%
Light
57%
Tailwind classblue-600closest

Accessibility

WCAG 2.1 contrast against white and black text — pick the combination that passes for your use case.

AaThe quick brown fox.
4.85White on this color
AA PassAA Large PassAAA Fail
AaThe quick brown fox.
4.33Black on this color
AA FailAA Large PassAAA Fail

Color in use

Royal Blue applied to common UI primitives — see how it reads in real interfaces.

Buttons
PrimaryOutlineGhost
Badges
ActiveFeaturedLive
Typography

The future of color is bright.

A paragraph with an inline link in Royal Blue.

Card
Premium Plan

50+ tools, lifetime updates.

Get started
Alert
Heads up — this alert uses Royal Blue as its accent stripe.
Progress & Input
Search…

Shades & tints

Click any swatch to copy its hex.

Color harmonies

Pairings from the color wheel — click any swatch to explore it.

Complementary

#4169E1#E1B941

Split complementary

#4169E1#E16941#B9E141

CSS variables

/* Royal Blue */
:root {
  --color-royal-blue: #4169E1;
  --color-royal-blue-rgb: 65, 105, 225;
  --color-royal-blue-hsl: 225, 73%, 57%;
}

Similar colors

Cerulean Blue
#2A52BE
Persian Blue
#1C39BB
Portage
#8B9FEE
Cornflower Blue
#6495ED
Indigo
#4F69C6
Perano
#A9BEF2
Mariner
#286ACD
Havelock Blue
#5590D9
Torea Bay
#0F2D9E
Sapphire
#2F519E
Tory Blue
#1450AA
Fun Blue
#1959A8

Color tools

Convert #4169E1 to TailwindColor converterGradient generatorColor palettesTailwind colors

Pick this color from any page

Use SuperDev Pro's eyedropper, contrast checker and 50+ dev tools right inside your browser.

Add to Chrome — Free