Ultramarine

For designers seeking a blue with serious presence, Ultramarine (#120A8F) offers an arresting depth. Its pure, intense saturation gives it a striking character that stands apart from more common blues, making it a powerful choice for any palette.

Ultramarine
#120A8F
Copy
Copied
Access our full UI & UX library today.
Join for free

What color is Ultramarine?

Ultramarine is a deep, vibrant blue with a notable intensity. It sits on the cooler side of the spectrum, possessing a slight violet bias that gives the color #120A8F its signature richness.

This specific shade has subtle red undertones, which prevent it from appearing flat and give it a complex character. Its high saturation makes it a commanding presence, distinct from more muted or primary blues.

What is the meaning of the color Ultramarine?

Historically derived from the precious lapis lazuli stone, Ultramarine carries an aura of royalty, divinity, and immense value, giving it a profound sense of luxury.

Psychologically, the deep blue of #120A8F communicates stability, wisdom, and trust, evoking feelings of confidence and sophistication.

How can I effectively use Ultramarine (#120A8F) in my UI design?

In UI design, Ultramarine (#120A8F) creates a sharp, readable interface when set against neutral backgrounds like white or light gray. For a more dynamic feel, pair it with warm colors like ochre or a muted orange; this complementary relationship draws attention to key elements. Applying a classic design principle like the 60-30-10 rule can help balance these bold combinations effectively.

While not as widespread as other blues, similar deep shades are used by brands like Grammarly and Trainline to project stability and sophistication. The relative rarity of this specific shade can give a product a unique and memorable identity in a crowded market.

Use the tools below to explore curated palettes, test color contrast for accessibility, and preview Ultramarine in real UI components from top brands.

How can I use the Ultramarine color codes?

The hex code #120A8F is the most direct way to specify Ultramarine for web and app development. For precise application, always use this exact value to maintain color consistency across your digital assets.

Different projects require different color models. The hex code can be translated into RGB (Red, Green, Blue) for screen displays, CMYK (Cyan, Magenta, Yellow, Key) for print media, or HSL (Hue, Saturation, Lightness) for intuitive adjustments. Each model represents the same color but is optimized for a specific medium.

To make things simple, we've converted Ultramarine's #120A8F hex code into a variety of popular formats. You can find and copy the exact values you need for your project below.

Ultramarine Code Conversions

HEX
#120A8F
Copy
Copied
LAB
34.74, -20.85, 14.42
Copy
Copied
RGB
53, 90, 58
Copy
Copied
XYZ
5.89, 8.37, 5.31
Copy
Copied
HSL
128°, 26%, 28%
Copy
Copied
LCH
34.74, 25.35, 145.33°
Copy
Copied
HSB
128°, 41%, 35%
Copy
Copied
LUV
34.74, -7.15, 19.17
Copy
Copied
CMYK
41%, 0%, 36%, 65%
Copy
Copied
HWB
128°, 21%, 65%
Copy
Copied

Ultramarine Color Harmonies

Analogous

Analogous colors sit next to each other on the color wheel. Paired with Ultramarine, they produce a cohesive and tranquil palette.

#123456
#123456
#123456

Complementary

Complementary colors sit opposite each other on the color wheel. For Ultramarine, this creates a high-contrast pairing that makes both colors pop.

#123456
#123456

Split Complementary

More nuanced than a direct complementary, this scheme pairs Ultramarine with the two colors neighboring its opposite for a flexible, high-contrast palette.

#123456
#123456
#123456

Triadic

A triadic color scheme uses three colors equally spaced on the color wheel. With Ultramarine as a base, this creates a vibrant, high-contrast palette.

#123456
#123456
#123456

Tetradic

Tetradic palettes pair Ultramarine with three other hues, creating two sets of complementary colors that form a rectangle on the color wheel.

#123456
#123456
#123456
#123456

Square

Based on Ultramarine, a square scheme features four colors equidistant on the color wheel, offering a balanced yet strikingly contrasting set of hues.

#123456
#123456
#123456
#123456

Ultramarine Color Variations

Shades

Shades of Ultramarine are made by adding black, which gives the color depth and weight.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tints

By adding white, you can create tints of Ultramarine for a softer, airier effect.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tones

Tones are created by adding gray to Ultramarine, resulting in a softer, less saturated hue.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Hues

Hues are variations of Ultramarine that alter its intensity or temperature, affecting the design's mood.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

What Interfaces Use Colors Like Ultramarine?

No items found.
Keep the inspiration going with Mobbin
Join for free
No items found.

Never run out of inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Nike
Brand Logo Image
Pinterest
Logo Image
Coinbase
Wise Logo Image
Wise
Headspace Logo Image
Headspace
Airbnb Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion