Royal Blue

Blue Bayoux 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 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

Martha Samuel

@marthatalks

I love this Royal Blue color palette gradient background 👍
July 7, 2025 05:33

CSS Linear Gradient Button

Home
Why Royal Blue?
Get Started

Linear Gradient Border

Royal Blue

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!
Royal Blue
Blue Bayoux
Martinique