Skip to content

Azure #007fff

The sky, standardized.

RGB
0, 127, 255
HSL
210°, 100%, 50%
CMYK
100, 50, 0, 0
Luminance
0.2240

About Azure

Azure, #007fff, is the exact midpoint between blue and cyan — the color heraldry assigned to the sky and CSS assigned to a near-white (#f0ffff), one of the web’s great naming pranks. True azure is the cloudless noon overhead.

History

The word traveled from lapis lazuli’s Persian lāžward through Old French to every European language’s sky. Heraldry made Azure one of its five classic tinctures; Italian gave its national teams the name — the Azzurri play in it.

Psychology

Azure is openness itself — sky-clarity, freedom and daylight optimism. Brighter than corporate blue, calmer than cyan, it reads as fresh air in color form.

In design

Azure #007fff is a luminous CTA and link blue on white (though only large-text safe at 3.9:1 — deepen slightly for body links). It owns travel, weather and aviation design, pairs with white clouds and sand, and gradients beautifully into both navy and cyan.

In culture

Azure coasts (the Côte d’Azur), azure fields in heraldry, azure skies in every anthem: the word is geography, blazonry and weather at once.

Brands that own azure

Microsoft Azure#0078d4Italian Azzurri#007fffTwitter legacy kin#1da1f2Skyscanner kin#0770e3airBaltic kin#00b0e8

Shades of azure

Sky blueCeruleanCobaltDodger blueBaby blueSapphireCSS azureCapri

Every format

HEX#007fff
RGBrgb(0, 127, 255)
HSLhsl(210, 100%, 50%)
CMYKcmyk(100%, 50%, 0%, 0%)
LABlab(54.4 19.4 -71.4)
LCHlch(54.4 74.0 285.2)
OKLCHoklch(0.613 0.212 256.3)

Copy-ready code

/* CSS */
color: #007fff;
background-color: #007fff;
/* Tailwind (arbitrary) */
class="text-[#007fff] bg-[#007fff]"
/* SCSS */
$brand: #007fff;
/* SwiftUI */
Color(red: 0.000, green: 0.498, blue: 1.000)
/* Android */
Color.parseColor("#007fff")

Accessibility — WCAG contrast

Aa
#007fff on white: 3.83:1
AA ✗ fail · AA-large ✓ · AAA ✗
Aa
#007fff on black: 5.48:1
AA ✓ pass · AA-large ✓ · AAA ✗
true color
protanopia
deuteranopia
tritanopia

RGB percentages

Red0.0%
Green49.8%
Blue100.0%

CMYK percentages

Cyan100.0%
Magenta50.2%
Yellow0.0%
Key (black)0.0%

Color previews

#007fff text on a black background

contrast 5.48:1

Card sample

#007fff text on a white background

contrast 3.83:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #007fff;
Background color
Panel with #007fff background
background-color: #007fff;
Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #007fff;
Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(0, 127, 255, 0.45);
Div box shadow
Elevated card
box-shadow: 0 12px 32px -8px rgba(0, 127, 255, 0.45);
Border & gradient
Gradient panel
border: 3px solid #007fff;
background: linear-gradient(135deg, #007fff, #2B00FF);

Monochromatic scale

#001E3D#004285#0066CC#1489FF#5CADFF#A3D1FF#D6EBFF

Palettes built from #007fff

UI palette
#D6EBFF
#66B2FF
#007fff
#0051A3
#F2800D
Gradient stops
#29D4FF
#007fff
#002AD6
Accent trio
#007fff
#FF0000
#FFFF00
Warm–cool bridge
#00FF80
#00FFFF
#007fff
#0000FF
#8000FF

Shades — darker

#0072E6#0066CC#0059B3#004C99#004080#003366#00264D#001933#000D19

Tints — lighter

#1A8CFF#3399FF#4DA5FF#66B2FF#80BFFF#99CCFF#B3D9FF#CCE5FF#E5F2FF

Hue & tone neighbors

#00D4FF#00AAFF#0055FF#002AFF#3399FF#0066CC#007FFF#197FE6

Color harmonies

Complement
#007fff
#FF8000
Split-complement
#007fff
#FF0000
#FFFF00
Analogous
#007fff
#00FFFF
#0000FF
Triadic
#007fff
#FF007F
#7FFF00
Tetradic
#007fff
#FF00FF
#FF8000
#00FF00

Nearest named colors

royalblue · ΔE 11.3dodgerblue · ΔE 13.3slateblue · ΔE 23.3steelblue · ΔE 45.7midnightblue · ΔE 46.0

Azure, answered

What is the hex code for azure?

True azure is #007fff — halfway between blue and cyan. CSS “azure” confusingly names the near-white #f0ffff.

Where does the word azure come from?

From Persian lāžward (lapis lazuli) via Old French — the gemstone lent its name to the sky across a dozen languages.

Is azure good for links and CTAs?

Excellent visibility, borderline contrast: #007fff is 3.9:1 on white — fine for large elements; deepen toward #0066cc for body-text links.

Work with #007fff in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →