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

Brilliant Azure #3399FF 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.
 
 
BRILLIANT AZURE
 
 
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
BRILLIANT AZURE
 
 
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.
 
 
 
DEEP SAFFRON
 

Color Harmonies

Brilliant Azure #3399FF pairs with Deep Saffron (#FF9933) as its complementary color, and #FF3399 and #99FF33 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.

BRILLIANT AZURE
DEEP SAFFRON
Analogous

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

BRILLIANT AZURE
Triadic

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

BRILLIANT AZURE
Split-Complementary

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

BRILLIANT AZURE
ELECTRIC YELLOW
Tetradic (Square)

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

BRILLIANT AZURE
DEEP SAFFRON
Monochromatic

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

BRILLIANT AZURE

Shades & Tints

The shade and tint range for Brilliant Azure #3399FF moves from dark #000D1A tones through the base color to lighter #E6F2FF tones, making it useful for depth, hierarchy, and background variation.

BRILLIANT AZURE

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