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

Blue #0000FF is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

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

Color Harmonies

Blue #0000FF pairs with Yellow (#FFFF00) as its complementary color, and Red (#FF0000) and Green (#00FF00) in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

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

BLUE
YELLOW
Analogous

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

BLUE
Triadic

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

BLUE
RED
GREEN
Split-Complementary

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

BLUE
Tetradic (Square)

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

BLUE
YELLOW
Monochromatic

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

BLUE

Shades & Tints

The shade and tint range for Blue #0000FF moves from dark #00001A tones through the base color to lighter #E6E6FF tones, making it useful for depth, hierarchy, and background variation.

BLUE

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);
}