Moonstone Blue

HEX: #73A9C2 | Modern Palette

On White
2.57:1
FAIL
On Black
8.18:1
PASS

Color Specifications

HEX
#73A9C2
RGB
115, 169, 194
HSL
198°, 40% ,76%
CMYK
40.72, 12.89, 0, 23.92

About Moonstone Blue

Moonstone Blue (#73A9C2) is a color with RGB(115, 169, 194) and HSL(198.99°, 40.72%, 76.08%). It is commonly associated with Calm moods. In design, it fits Cool styles and is suitable for Text, Print. Its complementary color is #C28C73, which creates strong contrast. Its triadic palette includes #C273A9 and #A9C273. The name comes from Moonstone Blue (English).

  • HEX: #73A9C2
  • RGB: 115, 169, 194
  • HSL: 198.99°, 40.72%, 76.08%
  • Mood: Calm
  • Style: Cool
  • Use case: Text, Print
  • Complementary color: #C28C73
  • Triadic colors: #C273A9, #A9C273
  • The name comes from Moonstone 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 #73A9C2 from deepest shade to lightest tint.

Color Characteristics

Mood
Calm
Style
Cool
Use case
Text Print

Accessibility Simulation

Deuteranopia #9C9CC3
Protanopia #A4A4C2
Tritanopia #6DACAC
Achromatopsia #A2A2A2

Frequently Asked Questions

Moonstone Blue (#73A9C2) is a color with RGB(115, 169, 194) and HSL(198.99°, 40.72%, 76.08%).

#73A9C2 pairs strongly with #C28C73 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#73A9C2 is suitable for Text, Print and works well with Cool styles.

#73A9C2 is commonly associated with Calm.

The name Moonstone Blue is linked to Moonstone Blue from English, meaning A color resembling the pale, opalescent blue sheen often found in moonstone gemstones..

Name, History & Etymology

Origin Word Moonstone Blue
Meaning A color resembling the pale, opalescent blue sheen often found in moonstone gemstones.
Language English
First Recorded Use Late 20th Century

History

The color 'moonstone blue' emerged as a descriptive color name, likely gaining traction in the late 20th century within fashion, interior design, and automotive industries to evoke a sense of calm, elegance, and a subtle shimmer. It directly references the gemstone moonstone, known for its adularescence (a blue-white light that appears to shimmer across the surface of a cut gemstone). The hexadecimal code #73a9c2 specifically defines a particular shade within this spectrum, a muted, medium-light blue.

First Recorded Use

1980s-1990s (as a named color in fashion/design)

Cultural Associations

Moonstone itself is associated with femininity, intuition, and emotional balance in various cultures. The color 'moonstone blue' inherits some of these connotations, often perceived as serene, sophisticated, and ethereal. It's a popular choice for items intended to convey tranquility or a touch of understated luxury.

Similar Named Colors
Air Superiority Blue #72A0C1 ΔE 4.67
Dark Sky Blue #8CBED6 ΔE 6.12
Iceberg #71A6D2 ΔE 6.27
Bright Cerulean #1DACD6 ΔE 7.07

Code Snippets

/* Background */
.element {
    background-color: #73A9C2;
}

/* Text */
.element {
    color: #73A9C2;
}

/* Border */
.element {
    border: 1px solid #73A9C2;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #73A9C2,
        #DBB9A9
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #73A9C2,
        #DBB9A9
    );
}

// SCSS variable
$moonstone-blue: #73A9C2;

// With RGB channels (useful for rgba() usage)
$moonstone-blue-r: 115;
$moonstone-blue-g: 169;
$moonstone-blue-b: 194;

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