Ultramarine color code: #120A8F
A dense violet-blue historically ground from lapis, still one of the richest blues available.
Ultramarine · rgb(18, 10, 143)
Every format for Ultramarine
- HEX
- #120A8F
- RGB
- rgb(18, 10, 143)
- HSL
- hsl(244, 87%, 30%)
- HSV
- 244°, 93%, 56%
- CMYK
- 87%, 93%, 0%, 44%
- Lightness
- 30% · mid-tone
Hue sits at 244°, which makes Ultramarine a true blue navy, with 87% saturation. In the Royal Navy family it reads as a mid-tone option.
Text contrast on Ultramarine
Contrast ratios are calculated using the WCAG 2.1 relative luminance formula. Normal body text needs 4.5:1 and large text needs 3:1 to pass AA.
White text on Ultramarine
The quick brown fox jumps over the lazy dog.
14.33:1 — AAA for normal textBlack text on Ultramarine
The quick brown fox jumps over the lazy dog.
1.47:1 — below AA, decorative use onlyUltramarine text on white
The quick brown fox jumps over the lazy dog.
14.33:1 — AAA for normal textAccessibility notes
- Pair Ultramarine with white text for the strongest reading experience: that combination gives 14.33:1.
- Used as a text colour on white, it clears the 3:1 bar for large headings.
- Never rely on Ultramarine alone to communicate state. Add an icon, label or underline so the meaning survives for colour-blind users and in greyscale printing.
- When placing text over a photograph tinted with Ultramarine, add a solid overlay first. Contrast measured against a flat colour does not hold over varying imagery.
Using Ultramarine in CSS and HTML
CSS example
:root {
--ultramarine: #120A8F;
}
.panel {
background-color: var(--ultramarine);
color: #FFFFFF;
border: 1px solid #120A8F;
}HTML example
<div style="background-color: #120A8F; color: #FFFFFF; padding: 1rem;">
Ultramarine #120A8F
</div>Common uses
- Primary buttons, active navigation states and chart series.
- Royal Navy palettes for brand systems that need a dependable cool anchor.
- Print work where a deep blue is preferred to black, using the CMYK build 87%, 93%, 0%, 44%.
- Data visualisation, as one step in a lightness-based navy scale.
Design recommendations
- Build lighter and darker variants by changing only the lightness in
hsl(244, 87%, 30%). Keeping hue fixed is what makes a scale look intentional. - Give Ultramarine at least one warm counterweight. A cool palette with no warm accent tends to read as cold rather than calm.
- Saturation is high here, so use it in measured amounts. Large flat areas of a saturated navy can feel heavy on screen.
Complementary and matching colors
Each of these is derived from the hue, saturation and lightness of Ultramarine. Click a swatch to copy it.
Similar navy shades
Continue exploring
FAQs about Ultramarine
What is the Ultramarine color code?
The Ultramarine color code is #120A8F in HEX, rgb(18, 10, 143) in RGB and hsl(244, 87%, 30%) in HSL.
What is the RGB value of Ultramarine?
Ultramarine is rgb(18, 10, 143), meaning 18 units of red, 10 of green and 143 of blue on the 0 to 255 scale.
What is the CMYK value of Ultramarine?
In CMYK, Ultramarine converts to approximately 87%, 93%, 0%, 44%. Printed output will look slightly less saturated than the screen preview because CMYK covers a narrower gamut.
Does white text work on Ultramarine?
White text on Ultramarine gives a contrast ratio of 14.33:1, which is AAA for normal text.
Does black text work on Ultramarine?
Black text on Ultramarine gives a contrast ratio of 1.47:1, which is below AA, decorative use only.
Which colors go with Ultramarine?
Its direct complement is #D7E510, and the warm accent #AEE33B works well for calls to action. For a quieter scheme, pair it with the analogous blues listed above.
Is Ultramarine a light or dark navy?
At 30% lightness, Ultramarine is classed as a mid-tone navy in this collection.