UI Shades

A study in neutral

Azure

#F0FFFF

Family
Neutral
L
0.989
C
0.016
H
197°

Notes

Azure in CSS is almost pure white with a breath of cyan, not the saturated medieval-manuscript blue the name suggests. The discrepancy traces back to X11's color list, which already had a separate slot for the deeper blue. As a background it reads as cool but barely there, useful for tech-product canvases where pure white feels sterile. The historical association is heraldic, so the word still carries authority even when the rendered color is faint. Darker steel blues or charcoal make for legible type. Two azure surfaces side by side will appear identical in low light.

#f0ffff
Azure
Azure
#f0ffff
oklch(0.989 0.016 196.9)
rgb(240 255 255)
hsl(180 100% 97.1%)
Share
#f0ffff
#e1fafa
#c1f0f0
#9de3e4
#70c5c6
#3e9c9d
#1d8384
#006c6e
#004f50
#003637
#001c1d

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Azure

Cross-reference
Q&A

Frequently asked questions

What is Azure?

Azure in CSS is almost pure white with a breath of cyan, not the saturated medieval-manuscript blue the name suggests. The discrepancy traces back to X11's color list, which already had a separate slot for the deeper blue. Its hex code is #F0FFFF.

What are the tints and shades of Azure?

uishades builds an 11-step OKLCH ramp for Azure (#F0FFFF) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Azure?

Its complementary color is #FFF7F8. Triadic partners are #FFF8FF and #FFFAF0; analogous neighbours are #F1FEFF and #F2FFF9.

What are the OKLCH and RGB values of Azure?

Azure is #F0FFFF - OKLCH 0.989 0.016 197°, rgb(240 255 255), in the neutral family.