Blue

HEX: #0000FF | Modern Palette

On White
8.59:1
PASS
On Black
2.44:1
FAIL

Color Specifications

HEX
#0000FF
RGB
0, 0, 255
HSL
240°, 100% ,50%
CMYK
100, 100, 0, 0

About Blue

Blue (#0000FF) is a color with RGB(0, 0, 255) and HSL(240°, 100%, 50%). It is commonly associated with Bold moods. In design, it fits Vivid, Cool styles and is suitable for Text, Button, Accent. Its complementary color is Yellow (#FFFF00), which creates strong contrast. Its triadic palette includes Red (#FF0000) and Green (#00FF00). The name comes from *blēwaz (Proto-Germanic).

  • HEX: #0000FF
  • RGB: 0, 0, 255
  • HSL: 240°, 100%, 50%
  • Mood: Bold
  • Style: Vivid, Cool
  • Use case: Text, Button, Accent
  • Complementary color: Yellow (#FFFF00)
  • Triadic colors: Red (#FF0000), Green (#00FF00)
  • The name comes from *blēwaz (Proto-Germanic).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #0000FF from deepest shade to lightest tint.

Color Characteristics

Mood
Bold
Style
Vivid Cool
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #0000FF
Protanopia #0000FF
Tritanopia #006464
Achromatopsia #4C4C4C

Frequently Asked Questions

Blue (#0000FF) is a color with RGB(0, 0, 255) and HSL(240°, 100%, 50%).

#0000FF pairs strongly with Yellow (#FFFF00) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#0000FF is suitable for Text, Button, Accent and works well with Vivid, Cool styles.

#0000FF is commonly associated with Bold.

The name Blue is linked to *blēwaz from Proto-Germanic, meaning blue, light blue, grey.

Name, History & Etymology

Origin Word *blēwaz
Meaning blue, light blue, grey
Language Proto-Germanic
First Recorded Use Old English

History

The word 'blue' has a long history, tracing back to Proto-Germanic *blēwaz. It evolved into Old English 'blǣw' or 'blāw'. Its meaning has consistently referred to the color of the sky or sea. Interestingly, many ancient languages did not have a distinct word for blue, often grouping it with green or grey. The distinction for blue as a separate color term developed later in various cultures.

First Recorded Use

Before 12th century

Cultural Associations

Blue is a color with rich cultural significance. In Western cultures, it often symbolizes tranquility, stability, wisdom, and loyalty. It's frequently associated with masculinity. In many religions, blue can represent heaven or divinity. However, its meaning can vary; in some cultures, it might be associated with sadness (e.g., 'feeling blue') or even evil. It's a popular color for uniforms, corporate branding, and art.

Similar Named Colors
Bluebonnet #1C1CF0 ΔE 1.95
Electric Ultramarine #3F00FF ΔE 2.32
Han Purple #5218FA ΔE 4.25
Medium Blue #0000CD ΔE 6.38

Code Snippets

/* Background */
.element {
    background-color: #0000FF;
}

/* Text */
.element {
    color: #0000FF;
}

/* Border */
.element {
    border: 1px solid #0000FF;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #0000FF,
        #FFFF00
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #0000FF,
        #FFFF00
    );
}

// SCSS variable
$blue: #0000FF;

// With RGB channels (useful for rgba() usage)
$blue-r: 0;
$blue-g: 0;
$blue-b: 255;

// Usage
.element {
    background-color: $blue;
    color: rgba($blue-r, $blue-g, $blue-b, 0.8);
}