Azure is a calm and cool color, like a clear sky. It falls between blue and cyan on the color wheel. This bright shade resembles the sea and is linked to tranquility. Related shades include cerulean and turquoise. Perfect for designs needing freshness and a touch of serenity!
Azure is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #007FFF
- RGB value: 0.0% red, 49.8% green, 100.0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as azure, consider:
- Sky Blue (#82c8e5): Sky Blue closely resembles Azure with its light and airy hue that mirrors the open sky. It shares a similarly calming and refreshing vibe, perfect for evoking a sense of openness.
- Baby Blue (#8fd9fb): Baby Blue shares Azure's soft and delicate quality. Its lightness and brightness capture the soothing essence of a clear, serene sky.
- Light Blue (#90d5ff): Light Blue aligns with Azure's bright and cheerful appearance. It maintains a similar level of intensity and clarity, reminiscent of tropical waters under the sun.
- Powder Blue (#b8e3e9): Powder Blue offers a gentle, pastel version of Azure, retaining its tranquil and peaceful qualities. It evokes the subtle tones of a calm sea or a clear sky at dusk.
To complement Azure, consider pairing it with:
- Coral (#FF8559): This warm hue brings out the vibrancy of Azure, creating a lively and energetic palette that’s both refreshing and balanced.
- Peach (#FFD3AC): This soft color offers a gentle contrast to Azure, producing a dreamy and harmonious blend that evokes sunset skies.
- Mint Green (#ADEBB3): This light, refreshing green complements Azure with its cool undertones, enhancing the tranquility of both colors.
- Mustard Yellow (#FFCE1B): This bold, warm shade creates a striking contrast with Azure, adding depth and excitement to any design.
- Navy Blue (#000080): This deep, rich blue provides a classic pairing with Azure, emphasizing a sophisticated and cohesive look.
While Azure is bright, vibrant, and reminiscent of clear skies, it may clash with:
- Neon Green (#2CFF05): The intense brightness of neon green can overpower azure's calm, creating a visually jarring effect.
- Bright Yellow (#FFED29): Its high luminosity can compete with azure's clarity, leading to a lack of harmony in a palette.
- Scarlet (#ED2100): The strong warmth of scarlet can create harsh contrast with azure's cool tone, resulting in visual discord.
- Charcoal (#4A4A4A): The heavy, dark nature of charcoal can dull azure's vibrancy, causing an imbalanced palette.
- Red-Orange (#FF4B33): Its warm intensity can conflict with azure's cooler hue, leading to a clash in saturation that may appear overwhelming.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Electric Sunset
Aqua Ember
Neo Waves
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
3.83:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Fail
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
5.48:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #007FFF, known as Azure, has RGB values of R:0, G:127, B:255 and CMYK values of C:100, M:50, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #007FFF | #007FFF |
| RGB DECIMAL | 0, 127, 255 | RGB(0,127,255) |
| RGB PERCENTAGE | 0.0, 49.8, 100.0 | RGB(0.0%,49.8%,100.0%) |
| CMYK | 100, 50, 0, 0 | |
| HSL | HSL(210.1, 100.0%, 50.0%) | HSL(210.1, 100.0%, 50.0%) |
| HSV (OR HSB) | 210.1°, 100.0, 100.0 | |
| WEB SAFE | #0102255 | #0102255 |
| BINARY | 00000000, 01111111, 11111111 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.498, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.498, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFF007FFF) |
