Blue Yonder

HEX: #5072A7 | Modern Palette

On White
4.88:1
PASS
On Black
4.31:1
FAIL

Color Specifications

HEX
#5072A7
RGB
80, 114, 167
HSL
216°, 52% ,65%
CMYK
52.1, 31.74, 0, 34.51

About Blue Yonder

Blue Yonder (#5072A7) is a color with RGB(80, 114, 167) and HSL(216.55°, 52.1%, 65.49%). In design, it fits Cool styles and is suitable for Text, Button, Logo. Its complementary color is #A78550, which creates strong contrast. Its triadic palette includes #A75072 and #72A750. The name comes from Blue Yonder (English).

  • HEX: #5072A7
  • RGB: 80, 114, 167
  • HSL: 216.55°, 52.1%, 65.49%
  • Style: Cool
  • Use case: Text, Button, Logo
  • Complementary color: #A78550
  • Triadic colors: #A75072, #72A750
  • The name comes from Blue Yonder (English).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Blue Yonder #5072A7 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 YONDER
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
BLUE YONDER
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
BLUE YONDER
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Blue Yonder #5072A7 pairs with #A78550 as its complementary color, and #A75072 and #72A750 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 YONDER
Analogous

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

BLUE YONDER
Triadic

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

BLUE YONDER
Split-Complementary

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

BLUE YONDER
Tetradic (Square)

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

BLUE YONDER
Monochromatic

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

BLUE YONDER

Shades & Tints

The shade and tint range for Blue Yonder #5072A7 moves from dark #080C11 tones through the base color to lighter #EEF1F7 tones, making it useful for depth, hierarchy, and background variation.

BLUE YONDER

Color Characteristics

Mood
Style
Cool
Use case
Text Button Logo

Accessibility Simulation

Deuteranopia #6A6AA7
Protanopia #6F6FA7
Tritanopia #407A7A
Achromatopsia #717171

Frequently Asked Questions

Blue Yonder (#5072A7) is a color with RGB(80, 114, 167) and HSL(216.55°, 52.1%, 65.49%).

#5072A7 pairs strongly with #A78550 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#5072A7 is suitable for Text, Button, Logo and works well with Cool styles.

The name Blue Yonder is linked to Blue Yonder from English, meaning A distant, often idealized, and somewhat undefined place or future; the far-off blue sky or horizon..

Name, History & Etymology

Origin Word Blue Yonder
Meaning A distant, often idealized, and somewhat undefined place or future; the far-off blue sky or horizon.
Language English
First Recorded Use Late 19th Century

History

The phrase 'blue yonder' combines 'blue,' referring to the color of the sky or distant objects, and 'yonder,' an archaic or dialectal word meaning 'at or in that place or direction; over there.' 'Yonder' itself has Old English roots ('geondra'). The combination creates a poetic and evocative term for a distant, often imagined, place. It became particularly popular in American English, often associated with open spaces, adventure, or an optimistic future. Its use can be found in various forms of media, from songs to novels, to describe a journey into the unknown or a hopeful outlook.

First Recorded Use

The exact first use is difficult to pinpoint to a single instance, but the phrase gained traction in literature and common parlance during the late 19th century. It evokes a sense of vastness and the unknown, often with a positive or hopeful connotation.

Cultural Associations

In American culture, 'blue yonder' often carries connotations of freedom, exploration, and the pioneering spirit. It's frequently used in contexts related to aviation (e.g., 'flying into the blue yonder'), travel, or dreaming of future possibilities. It can also imply a sense of escapism or a longing for something beyond immediate reach. The phrase has been used in titles of songs, books, and even company names (e.g., 'Blue Yonder' as a supply chain software company, though their branding might lean into the idea of looking ahead and optimizing the future).

Similar Named Colors
Queen Blue #436B95 ΔE 4.26
UCLA Blue #536895 ΔE 4.88
Han Blue #446CCF ΔE 4.99
Tufts Blue #417DC1 ΔE 5.91

Code Snippets

/* Background */
.element {
    background-color: #5072A7;
}

/* Text */
.element {
    color: #5072A7;
}

/* Border */
.element {
    border: 1px solid #5072A7;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #5072A7,
        #D5B179
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #5072A7,
        #D5B179
    );
}

// SCSS variable
$blue-yonder: #5072A7;

// With RGB channels (useful for rgba() usage)
$blue-yonder-r: 80;
$blue-yonder-g: 114;
$blue-yonder-b: 167;

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