Brilliant Azure

HEX: #3399FF | Modern Palette

On White
2.94:1
FAIL
On Black
7.14:1
PASS

Color Specifications

HEX
#3399FF
RGB
51, 153, 255
HSL
210°, 80% ,100%
CMYK
80, 40, 0, 0

About Brilliant Azure

Brilliant Azure (#3399FF) is a color with RGB(51, 153, 255) and HSL(210°, 80%, 100%). It is commonly associated with Playful moods. In design, it fits Cool styles and is suitable for Text, Button, Background. Its complementary color is Deep Saffron (#FF9933), which creates strong contrast. Its triadic palette includes #FF3399 and #99FF33. The name comes from Brilliant Azure (English).

  • HEX: #3399FF
  • RGB: 51, 153, 255
  • HSL: 210°, 80%, 100%
  • Mood: Playful
  • Style: Cool
  • Use case: Text, Button, Background
  • Complementary color: Deep Saffron (#FF9933)
  • Triadic colors: #FF3399, #99FF33
  • The name comes from Brilliant Azure (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 #3399FF from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Cool
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #8585FF
Protanopia #9292FF
Tritanopia #00AAAA
Achromatopsia #969696

Frequently Asked Questions

Brilliant Azure (#3399FF) is a color with RGB(51, 153, 255) and HSL(210°, 80%, 100%).

#3399FF pairs strongly with Deep Saffron (#FF9933) as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#3399FF is suitable for Text, Button, Background and works well with Cool styles.

#3399FF is commonly associated with Playful.

The name Brilliant Azure is linked to Brilliant Azure from English, meaning A vivid, bright blue color, reminiscent of a clear sky or deep ocean..

Name, History & Etymology

Origin Word Brilliant Azure
Meaning A vivid, bright blue color, reminiscent of a clear sky or deep ocean.
Language English
First Recorded Use Late 20th Century

History

The word 'brilliant' comes from the French 'briller' (to shine), and 'azure' comes from Old French 'azur', ultimately from Persian 'lazhward' (lapis lazuli). The combination 'Brilliant Azure' is a descriptive compound, emphasizing the intensity and brightness of the azure hue. Its popularization is tied to digital color palettes where specific, evocative names are given to hex codes.

First Recorded Use

While 'brilliant' and 'azure' have older individual origins, their specific combination 'Brilliant Azure' as a named color, especially with a hex code like #3399ff, likely emerged with the advent of digital color systems and web design in the late 20th century (1990s).

Cultural Associations

Azure itself is often associated with the sky, sea, divinity, and royalty in various cultures. The addition of 'brilliant' enhances these associations, suggesting purity, clarity, and vibrancy. It evokes feelings of openness, tranquility, and optimism. In digital contexts, it's a popular choice for backgrounds, branding, and UI elements that aim for a fresh and modern feel.

Similar Named Colors
Dodger Blue #1E90FF ΔE 2.79
Bleu De France #318CE7 ΔE 4.56
United Nations Blue #5B92E5 ΔE 4.84
Little Boy Blue #6CA0DC ΔE 5.01

Code Snippets

/* Background */
.element {
    background-color: #3399FF;
}

/* Text */
.element {
    color: #3399FF;
}

/* Border */
.element {
    border: 1px solid #3399FF;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #3399FF,
        #FFFFFF
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #3399FF,
        #FFFFFF
    );
}

// SCSS variable
$brilliant-azure: #3399FF;

// With RGB channels (useful for rgba() usage)
$brilliant-azure-r: 51;
$brilliant-azure-g: 153;
$brilliant-azure-b: 255;

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