Sapphire blue is a deep, calming shade, evoking tranquility. It sits between blue and violet on the color wheel. Its rich, cool tone includes shades like royal and azure. Perfect for designs needing a touch of elegance and depth, it pairs well with soft neutrals for balance.
Sapphire Blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #0F52BA
- RGB value: 5.9% red, 32.2% green, 72.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 Sapphire Blue, consider:
- Royal blue (#305cde): Captures the same majestic quality with a slightly richer hue and less green tint, maintaining a strong and noble character.
- Cobalt blue (#0047ab): Embodies a similar intensity and depth, offering a pure and striking blue that resonates with Sapphire Blue's vibrant essence.
- Navy blue (#000080): Shares the deep, authoritative blue tone, albeit darker, conveying the distinguished and classic vibe of Sapphire Blue.
- Blue (#0000ff): Delivers a straightforward, bold blue that matches Sapphire Blue's striking clarity and simplicity.
To complement Sapphire Blue, consider pairing it with:
- Coral (#FF8559): Coral offers a soft yet lively contrast, adding warmth and a touch of playfulness to designs featuring Sapphire Blue.
- Plum (#8E4585): The rich, deep tones of plum enhance the elegance of Sapphire Blue, creating a sophisticated and balanced look.
- Mint Green (#ADEBB3): Mint green’s freshness cools and complements Sapphire Blue, crafting a serene and harmonious palette.
While sapphire blue is vibrant and striking, it may clash with:
- Neon Orange (#FF5C00): Neon orange's intense brightness creates a visually jarring contrast with sapphire blue's rich tone.
- Cinnabar (#E84B3D): Cinnabar’s bold redness can fight with sapphire blue, leading to an overwhelming and discordant color pairing.
- Lime Green (#89F336): Lime green's vivid brightness can overshadow sapphire blue, resulting in a visually unbalanced combination.
- Crimson Red (#B22222): Crimson red’s deep and intense hue can clash with sapphire blue’s vibrancy, making them both hard to appreciate together.
- Magenta (#FD3DB5): Magenta’s vibrant and bold shade can compete with sapphire blue, resulting in a visually chaotic mixture.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Azure Symphony
Cerulean Spice
Celestial Cascade
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
7.15: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.
2.94: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 #0F52BA, known as Sapphire Blue, has RGB values of R:15, G:82, B:186 and CMYK values of C:92, M:56, Y:0, K:27.
| VALUE | CSS | |
|---|---|---|
| HEX | #0F52BA | #0F52BA |
| RGB DECIMAL | 15, 82, 186 | RGB(15,82,186) |
| RGB PERCENTAGE | 5.9, 32.2, 72.9 | RGB(5.9%,32.2%,72.9%) |
| CMYK | 92, 56, 0, 27 | |
| HSL | HSL(216.5, 85.1%, 39.4%) | HSL(216.5, 85.1%, 39.4%) |
| HSV (OR HSB) | 216.5°, 91.9, 72.9 | |
| WEB SAFE | #0102204 | #0102204 |
| BINARY | 00001111, 01010010, 10111010 | |
| iOS - SwiftUI | Color(red: 0.059, green: 0.322, blue: 0.729) | |
| iOS - UIKit | UIColor(red: 0.059, green: 0.322, blue: 0.729, alpha: 1) | |
| Android - Compose | Color(0xFF0F52BA) |
