Royal Blue

Royal Blue and Blue Bayoux create a cool and calming color scheme that is reminiscent of the ocean.

🎨 Use this gradient for designs related to water or nature.

💡 The color Royal Blue was first used in the military uniforms of the British Royal Navy in the 18th century.

Blue Bayoux
#536976
Martinique
#292E49

CSS Linear Gradient Code

/* Royal Blue CSS Linear Gradient Background */
.gradient {
  background: #536976;
  background: linear-gradient(
    to right,
    #536976,#292E49
  );
}

TailwindCSS Logo TailwindCSS Linear Gradient

/* Royal Blue TailwindCSS Linear Gradient */
<div class="bg-gradient-to-r from-[#536976] to-[#292E49]"></div>

Royal Blue - UI Design Examples

You can use this gradient in your UI design in many ways, for example as a background in a tweet, for buttons or as a text gradient.

Tweet Background Generator

Ilias Ism
Ilias Ism
@illyism
I love this Royal Blue color palette gradient background 👍
December 21, 2024 at 3:59 PM

CSS Linear Gradient Button

Home
Why Royal Blue?

Linear Gradient Border

Royal Blue
Share

CSS Font Gradient

The Best Royal Blue Tailwind CSS Landing Pages

Shade of Royal Blue

We hope you enjoyed Royal Blue. Keep reading for more amazing colorful content for developers, designers and creators!
View our entire collection of UI gradientsView all our color names
Royal Blue