Vista Blue

HEX: #7C9ED9 | Modern Palette

On White
2.71:1
FAIL
On Black
7.75:1
PASS

Color Specifications

HEX
#7C9ED9
RGB
124, 158, 217
HSL
218°, 42% ,85%
CMYK
42.86, 27.19, 0, 14.9

About Vista Blue

Vista Blue (#7C9ED9) is a color with RGB(124, 158, 217) and HSL(218.06°, 42.86%, 85.1%). In design, it fits Cool styles and is suitable for Text, Background, Print. Its complementary color is #D9B77C, which creates strong contrast. Its triadic palette includes #D97C9E and #9ED97C. The name comes from Vista Blue (English).

  • HEX: #7C9ED9
  • RGB: 124, 158, 217
  • HSL: 218.06°, 42.86%, 85.1%
  • Style: Cool
  • Use case: Text, Background, Print
  • Complementary color: #D9B77C
  • Triadic colors: #D97C9E, #9ED97C
  • The name comes from Vista Blue (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 #7C9ED9 from deepest shade to lightest tint.

Color Characteristics

Mood
Style
Cool
Use case
Text Background Print

Accessibility Simulation

Deuteranopia #9595D9
Protanopia #9B9BD9
Tritanopia #6EA7A7
Achromatopsia #9D9D9D

Frequently Asked Questions

Vista Blue (#7C9ED9) is a color with RGB(124, 158, 217) and HSL(218.06°, 42.86%, 85.1%).

#7C9ED9 pairs strongly with #D9B77C as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#7C9ED9 is suitable for Text, Background, Print and works well with Cool styles.

The name Vista Blue is linked to Vista Blue from English, meaning A shade of blue reminiscent of a clear sky or distant view..

Name, History & Etymology

Origin Word Vista Blue
Meaning A shade of blue reminiscent of a clear sky or distant view.
Language English
First Recorded Use Late 20th Century

History

The term 'vista' comes from Italian, meaning 'view' or 'sight,' and entered English in the 17th century. 'Blue' is one of the oldest color terms, with roots in Proto-Indo-European. The combination 'Vista Blue' evokes a sense of open spaces, clear skies, or distant horizons, often associated with tranquility and expansiveness. It gained particular prominence as a color option for vehicles, notably Ford Mustangs in the late 1990s and early 2000s, which helped popularize the specific shade and name.

First Recorded Use

The specific color name 'Vista Blue' likely emerged with the proliferation of digital color palettes and standardized color naming conventions, particularly in the automotive and design industries. While 'vista' and 'blue' have ancient origins, their combination as a specific color name is more modern.

Cultural Associations

In Western cultures, blue is often associated with calmness, stability, wisdom, and reliability. The 'vista' component adds a layer of aspiration, freedom, and natural beauty. The specific shade #7c9ed9 is a medium, somewhat muted blue, which can be perceived as sophisticated and serene. Its use in automotive design often aimed to convey a sense of sportiness combined with elegance.

Similar Named Colors
Dark Pastel Blue #779ECB ΔE 2.71
Little Boy Blue #6CA0DC ΔE 3.85
Light Cobalt Blue #88ACE0 ΔE 4.04
Cornflower Blue #6495ED ΔE 4.40

Code Snippets

/* Background */
.element {
    background-color: #7C9ED9;
}

/* Text */
.element {
    color: #7C9ED9;
}

/* Border */
.element {
    border: 1px solid #7C9ED9;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #7C9ED9,
        #E9DDC9
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #7C9ED9,
        #E9DDC9
    );
}

// SCSS variable
$vista-blue: #7C9ED9;

// With RGB channels (useful for rgba() usage)
$vista-blue-r: 124;
$vista-blue-g: 158;
$vista-blue-b: 217;

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