Skip to content

Blue Background

#0000FF · rgb(0, 0, 255)

About the blue background

Blue (#0000FF) is the blue channel at full blast — and the browser's default link color since 1993. It signals trust, intelligence and calm, which is why half the world's banks, social networks and tech logos are some shade of it.

Pure #0000FF is darker and more electric than most brand blues. White text on it measures about 8.6:1 (excellent accessibility), making it a strong, dependable full-bleed background for tech and finance.

What to use a blue background for

  • Tech, finance and corporate trust branding
  • Link and interactive-state conventions
  • Electric accent backgrounds in dark UIs
  • Classic blue-to-cyan gradients

How to use blue in CSS

Copy the snippet below, or click any code chip on this page to grab a single value.

/* Full-page blue background */
body {
  margin: 0;
  background-color: #0000FF;
}

/* A single section or element */
.hero {
  background-color: rgb(0, 0, 255);
}

Blue shades and tints

Click any swatch to copy it. Tints mix blue with white; shades mix it with black.

Blue background FAQ

What is the RGB value of pure blue?

Pure blue is rgb(0, 0, 255) — the blue channel fully on, red and green off. In HSL it's hsl(240, 100%, 50%).

Why is blue so common in branding?

Blue consistently ranks as the world's favorite color and carries associations of trust, stability and competence. It's also colorblind-safe against most common deficiencies, unlike red-green pairings.

What is the hex code for blue?

Blue is #0000FF in hexadecimal, rgb(0, 0, 255) in RGB and hsl(240, 100%, 50%) in HSL. Paste #0000FF into any CSS background-color property to use it.

How do I set a blue background in CSS?

Add background-color: #0000FF; to any element, or apply it to the whole page: body { background-color: #0000FF; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(0, 0, 255) — with identical results.