Ultramarine blue is a vibrant, deep hue known for its soothing, serene vibe. It sits between blue and violet on the color wheel, reminiscent of natural blue and lapis lazuli pigments. With shades like intense cobalt and non-toxic cerulean, it's perfect for enhancing brightness in sky-themed designs or palettes.
Ultramarine blue is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #4166F5
- RGB value: 25.5% red, 40.0% green, 96.1% 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 ultramarine blue, consider:
- Royal Blue (#305cde): Royal Blue shares Ultramarine blue's deep, rich hue with a slightly more muted tone, maintaining a regal and calming presence in any color palette.
- Cobalt Blue (#0047ab): Cobalt Blue offers a vibrant and intense saturation similar to Ultramarine blue, with a striking depth that makes it a staple choice in pigment and art.
- Navy Blue (#000080): Navy Blue mirrors the deep sophistication of Ultramarine blue, offering a dark and classic appeal that's both timeless and versatile in shades blending.
- Dark Blue (#111184): Dark Blue captures Ultramarine blue’s dramatic depth and intensity, with a slight edge towards an even more profound, richer tone.
To complement Ultramarine blue, consider pairing it with:
- Coral (#FF8559): This vibrant shade contrasts beautifully with the deep, intense color of Ultramarine blue, creating a lively and eye-catching color palette.
- Mustard Yellow (#FFCE1B): Mustard yellow introduces a warm, sunny tone that complements the cool shades of Ultramarine, making the combination both dynamic and balanced.
- Mint Green (#ADEBB3): Mint green offers a refreshing and soothing contrast to Ultramarine blue, adding a playful touch to your design while maintaining harmony.
- Peach (#FFD3AC): Peach provides a soft and warm backdrop that softens the intensity of Ultramarine blue, making it perfect for decorative contexts and friendly environments.
- Lavender (#D3D3FF): With its gentle hue, lavender pairs elegantly with Ultramarine blue, enhancing its depth while bringing a serene and calming effect to the composition.
While Ultramarine blue is a versatile and striking color, it may clash with:
- Vermilion (#E73121): This intense red can overwhelm Ultramarine blue due to its strong warm hue, leading to a jarring contrast that detracts from both colors' appeal.
- Neon Orange (#FF5C00): The bright, vivid nature of neon orange can create visual discord with Ultramarine blue, as both colors fight for attention in a color palette.
- Lime Green (#89F336): Lime green’s brightness and vibrancy contrast sharply with the deep coolness of Ultramarine blue, potentially creating a garish combination.
- Neon Pink (#FF13F0): Neon pink's vivid saturation competes with Ultramarine blue, resulting in a visually overwhelming pairing that can be difficult to balance aesthetically.
- Yellow (#FFDE21): The brightness of yellow can clash with Ultramarine blue, creating a high-contrast combination that may be unsettling without careful design considerations.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Electric Indigo
Radiant Harmony
Vibrant Ocean
Contrast checker
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
4.73: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
- Large Text
Figma
- Normal Text
How you design, align, and build matters. Do it together with Figma.
4.44: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
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #4166F5, known as Ultramarine blue, has RGB values of R:65, G:102, B:245 and CMYK values of C:73, M:58, Y:0, K:4.
| VALUE | CSS | |
|---|---|---|
| HEX | #4166F5 | #4166F5 |
| RGB DECIMAL | 65, 102, 245 | RGB(65,102,245) |
| RGB PERCENTAGE | 25.5, 40.0, 96.1 | RGB(25.5%,40.0%,96.1%) |
| CMYK | 73, 58, 0, 4 | |
| HSL | HSL(227.7, 90.0%, 60.8%) | HSL(227.7, 90.0%, 60.8%) |
| HSV (OR HSB) | 227.7°, 73.5, 96.1 | |
| WEB SAFE | #51102255 | #51102255 |
| BINARY | 01000001, 01100110, 11110101 | |
| iOS - SwiftUI | Color(red: 0.255, green: 0.400, blue: 0.961) | |
| iOS - UIKit | UIColor(red: 0.255, green: 0.400, blue: 0.961, alpha: 1) | |
| Android - Compose | Color(0xFF4166F5) |
