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

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 #5072A7 from deepest shade to lightest tint.

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