Zaffre is a vibrant, deep blue, reminiscent of cobalt blue, and is positioned on the blue spectrum of the color wheel. It evokes a sense of calm and mystery. Related shades include cobalt and azure. Ideal for adding depth to designs or conveying elegance and sophistication.
Zaffre is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #0014A8
- RGB value: 0.0% red, 7.8% green, 65.9% 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 zaffre, consider:
- Cobalt Blue (#0047AB): Cobalt Blue shares Zaffre's vibrant intensity and deep blue hue. Its brilliant saturation evokes a sense of stability and boldness, capturing the essence of zaffre blue.
- Ultramarine Blue (#4166F5): Ultramarine Blue reflects the rich and vivid character of Zaffre, embracing an energetic and captivating tone that highlights deep blue's liveliness.
- Royal Blue (#305CDE): Royal Blue parallels Zaffre with its majestic tone and bright, dynamic feel. This similar shade offers an engaging and bold appearance, much like zaffre blue.
- Sapphire Blue (#0F52BA): Sapphire Blue closely resembles Zaffre in its rich depth and luxurious appeal, embodying the classic elegance and cool undertones of deep blue.
To complement Zaffre, consider pairing it with:
- Light Orange (#FFDBBB): This warm, muted shade balances Zaffre’s deep blue pigment, providing a soft contrast that brightens the overall palette.
- Mint Green (#ADEBB3): Mint green offers a refreshing contrast to Zaffre, enhancing its richness while adding a lively touch—perfect for creating a vibrant, balanced design.
- Champagne (#F7E6CA): This soft neutral pairs beautifully with Zaffre blue’s intensity by adding warmth and creating an elegant, sophisticated palette.
- Salmon Pink (#FF91A4): Salmon pink adds a playful yet gentle complement to Zaffre, creating a cheerful interplay of tones that’s both eye-catching and harmonious.
- Slate Gray (#6D8196): This cool hue lends a sleek, modern edge when paired with Zaffre, offering a cohesive and visually striking combination.
While Zaffre is a striking cobalt blue with a deep, vivid hue, it may clash with:
- Neon Green (#2CFF05): The vibrant and intense glow of neon green can create a harsh contrast with Zaffre, leading to an overwhelming visual experience.
- Coral (#FF8559): Coral’s warm undertones can compete with the cooler, deeper qualities of Zaffre, causing a discordant and unbalanced pairing.
- Scarlet (#ED2100): Scarlet’s bright, fiery nature clashes with Zaffre’s calm depth, leading to a tension that distracts rather than complements.
- Bright Yellow (#FFED29): The strong, vivid intensity of bright yellow can overpower the rich, deep blue of Zaffre, creating a palette that lacks harmony.
- Hot Pink (#FF46A2): The boldness of hot pink can compete with Zaffre’s cool elegance, making the combination jarring rather than aesthetically pleasing.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Sapphire Surge
Cobalt Caramel
Solar Spark
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
12.61:1
WCAG 2.2 Simple Contrast
Normal Text
- Pass
- AA
- 4.5:1
- Pass
- AAA
- 7:1
Large Text
- Pass
- AA
- 3:1
- Pass
- AAA
- 4.5:1
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
1.67:1
WCAG 2.2 Simple Contrast
Normal Text
- Fail
- AA
- 4.5:1
- Fail
- AAA
- 7:1
Large Text
- Fail
- AA
- 3:1
- Fail
- AAA
- 4.5:1
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #0014A8, known as Zaffre, has RGB values of R:0, G:20, B:168 and CMYK values of C:100, M:88, Y:0, K:34.
| VALUE | CSS | |
|---|---|---|
| HEX | #0014A8 | #0014A8 |
| RGB DECIMAL | 0, 20, 168 | RGB(0,20,168) |
| RGB PERCENTAGE | 0.0, 7.8, 65.9 | RGB(0.0%,7.8%,65.9%) |
| CMYK | 100, 88, 0, 34 | |
| HSL | HSL(232.9, 100.0%, 32.9%) | HSL(232.9, 100.0%, 32.9%) |
| HSV (OR HSB) | 232.9°, 100.0, 65.9 | |
| WEB SAFE | #00153 | #00153 |
| BINARY | 00000000, 00010100, 10101000 | |
| iOS - SwiftUI | Color(red: 0.000, green: 0.078, blue: 0.659) | |
| iOS - UIKit | UIColor(red: 0.000, green: 0.078, blue: 0.659, alpha: 1) | |
| Android - Compose | Color(0xFF0014A8) |
