Royal Blue

Meet Royal Blue (#4169E1), a color that commands attention. Its deep saturation and vibrant intensity make it a powerful choice for any design palette, offering a striking presence without overwhelming the eye. It's a classic with a modern punch.

What color is Royal Blue?

What is the meaning of Royal Blue?

How do I use Royal Blue (#4169E1) in UI design?

Using Royal Blue color codes

Royal Blue

#4169E1

Access our full UI & UX library today.

What color is Royal Blue?

What is the meaning of Royal Blue?

How do I use Royal Blue (#4169E1) in UI design?

Using Royal Blue color codes

Royal Blue Code Conversions

HEX

#4169E1

LAB

48, 26, -65

RGB

65, 105, 225

XYZ

20.8, 16.7, 73.3

HSL

225°, 73%, 57%

LCH

48, 70, 292°

HSB

225°, 71%, 88%

LUV

48, -18, -101

CMYK

71, 53, 0, 12

CMYK

71, 53, 0, 12

HWB

225°, 25%, 12%

Royal Blue Color Harmonies

Analogous

Sitting beside Royal Blue on the color wheel, analogous colors produce a harmonious and tranquil composition, creating a sense of unity in design.

#41B9E1

#4169E1

#6941E1

#41B9E1

#4169E1

#6941E1

Complementary

As opposites on the color wheel, complementary colors create a strong visual statement. With Royal Blue, this pairing offers maximum contrast and vibrancy.

#4169E1

#E1B941

#4169E1

#E1B941

Split Complementary

For a nuanced high-contrast look, a split complementary scheme pairs Royal Blue with the two colors that sit beside its direct complement.

#4169E1

#E16941

#B9E141

#4169E1

#E16941

#B9E141

Triadic

A triadic color scheme uses three hues equally spaced on the color wheel. With Royal Blue, this combination produces a vibrant, high-contrast palette.

#4169E1

#E14169

#69E141

#4169E1

#E14169

#69E141

Tetradic

Tetradic color schemes use four colors arranged into two complementary pairs, creating a rich palette when built around a base like Royal Blue.

#4169E1

#E141B9

#E1B941

#41E169

#4169E1

#E141B9

#E1B941

#41E169

Square

A square scheme builds on Royal Blue with three equidistant colors from the color wheel, creating a palette with rich, balanced, and high contrast.

#4169E1

#E141B9

#E1B941

#41E169

#4169E1

#E141B9

#E1B941

#41E169

Royal Blue Contrast Simulation

Text Color

#

Background Color

#

4.85

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

Text Color

#

Background Color

#

Your Catchy Large Text Goes Here

A high contrast makes anything easier to read, especially small text.

4.85

Good

Small Text
Pass
Large Text
Pass
Graphic Components
Pass

Royal Blue Color Variations

Shades

Shades are darker versions of Royal Blue, made by adding black for a weightier feel.

#4169E1

#385AC1

#2E4BA1

#253C81

#1C2D60

#131E40

#090F20

#000000

#4169E1

#385AC1

#2E4BA1

#253C81

#1C2D60

#131E40

#090F20

#000000

Tints

Tints are created by adding white to Royal Blue, resulting in softer, lighter variations.

#4169E1

#5C7EE5

#7794EA

#92A9EE

#AEBFF2

#C9D4F6

#E4EAFB

#FFFFFF

#4169E1

#5C7EE5

#7794EA

#92A9EE

#AEBFF2

#C9D4F6

#E4EAFB

#FFFFFF

Tones

Tones of Royal Blue are created by adding gray, resulting in softer, more subdued variations.

#4169E1

#4A6CD3

#5370C5

#5C73B7

#6576AA

#6E799C

#777D8E

#808080

#4169E1

#4A6CD3

#5370C5

#5C73B7

#6576AA

#6E799C

#777D8E

#808080

Hues

Hues are variations of Royal Blue that differ in intensity or temperature, creating distinct moods.

#4169E1

#9141E1

#E141B9

#E14141

#E1B941

#91E141

#41E169

#41E1E1

#4169E1

#9141E1

#E141B9

#E14141

#E1B941

#91E141

#41E169

#41E1E1

What Interfaces Use Colors Like Royal Blue?

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access
with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox

Never run out of
inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

  • Coinbase

  • Wise

  • Headspace

  • Airbnb

  • Uber

  • Nike

  • Pinterest

  • ChatGPT

  • Shopify

  • Loom

  • Creme

  • Mailchimp

  • Twitch

  • Spotify

  • Apple TV

  • Shop

  • Cosmos

  • Retro

  • Notion

  • Dropbox