Azure

HEX: #007FFF | Modern Palette

On White
3.83:1
FAIL
On Black
5.48:1
PASS

Color Specifications

HEX
#007FFF
RGB
0, 127, 255
HSL
210°, 100% ,100%
CMYK
100, 50.2, 0, 0

About Azure

Azure (#007FFF) is a color with RGB(0, 127, 255) and HSL(210.12°, 100%, 100%). It is commonly associated with Playful moods. In design, it fits Neon, Cool styles and is suitable for Text, Button, Background. Its complementary color is #FF8000, which creates strong contrast. Its triadic palette includes Rose (#FF007F) and Chartreuse (#7FFF00). The name comes from azur (Old French).

  • HEX: #007FFF
  • RGB: 0, 127, 255
  • HSL: 210.12°, 100%, 100%
  • Mood: Playful
  • Style: Neon, Cool
  • Use case: Text, Button, Background
  • Complementary color: #FF8000
  • Triadic colors: Rose (#FF007F), Chartreuse (#7FFF00)
  • The name comes from azur (Old French).

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

Color Characteristics

Mood
Playful
Style
Neon Cool

Accessibility Simulation

Deuteranopia #6C6CFF
Protanopia #7878FF
Tritanopia #009797
Achromatopsia #828282

Frequently Asked Questions

Azure (#007FFF) is a color with RGB(0, 127, 255) and HSL(210.12°, 100%, 100%).

#007FFF pairs strongly with #FF8000 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#007FFF is suitable for Text, Button, Background and works well with Neon, Cool styles.

#007FFF is commonly associated with Playful.

The name Azure is linked to azur from Old French, meaning sky-blue.

Name, History & Etymology

Origin Word azur
Meaning sky-blue
Language Old French
First Recorded Use Late Middle English

History

The word "azure" entered English from Old French "azur," which itself came from Medieval Latin "azura." This Latin term was derived from Arabic "lāzaward" (لازورد), referring to the lapis lazuli stone, known for its deep blue color. The 'l' in 'lāzaward' was often mistaken as the definite article 'al-' in Arabic, leading to its omission in some European languages. The stone lapis lazuli was historically mined in Afghanistan, and its name is thought to be related to the Persian place name 'Lajward,' where the stone was found. The color azure has been used in heraldry since at least the 12th century, representing truth and loyalty.

First Recorded Use

14th century

Cultural Associations

Azure is a prominent color in vexillology, appearing in the flags of many nations, often symbolizing the sky or sea. In heraldry, azure (blue) is one of the five principal colors (tinctures) and is often depicted by horizontal lines in monochrome representations. The term 'azure' is frequently used in poetry and literature to evoke images of clear skies, deep oceans, and heavenly beauty. The French Riviera is often referred to as the 'Côte d'Azur' (Azure Coast) due to the brilliant blue color of the Mediterranean Sea in that region. In some cultures, blue, including azure, is associated with divinity, protection, and peace.

Similar Named Colors

Blue (Crayola) #1F75FE ΔE 3.95
Blueberry #4F86F7 ΔE 4.14
Bleu De France #318CE7 ΔE 5.02
Brandeis Blue #0070FF ΔE 5.40

Code Snippets

/* Background */
.element {
    background-color: #007FFF;
}

/* Text */
.element {
    color: #007FFF;
}

/* Border */
.element {
    border: 1px solid #007FFF;
}

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

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

// SCSS variable
$azure: #007FFF;

// With RGB channels (useful for rgba() usage)
$azure-r: 0;
$azure-g: 127;
$azure-b: 255;

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