ع

Ultramarine

أزرق لازوردي

Color codes

HEX
RGB
HSL
HSV
CMYK (approximate)
CIELAB
CSS
Relative luminance0.0828
Blue Cool ColorsVivid & Neon Colors Cool

Shades of Ultramarine

All shades

Lighter

Darker

Tints mixed with white

Tones mixed with gray

Color harmonies

Complementary

Opposite on the wheel (180°): maximum contrast for accents.

Export
Analogous

Neighbors 30° apart: calm and natural.

Export
Triadic

Three hues 120° apart: vibrant yet balanced.

Export
Split-complementary

The base plus the two neighbors of its complement: contrast with less tension.

Export
Tetradic

Four hues 90° apart: rich, best with one dominant color.

Export
Monochromatic

One hue in several lightness levels: elegant and consistent.

Export

Contrast and readability

White text7.91:1
✓ AA✓ AAA✓ AA Large
Black text2.66:1
✗ AA✗ AAA✗ AA Large
On white7.91:1
✓ AA✓ AAA✓ AA Large
On black2.39:1
✗ AA✗ AAA✗ AA Large

Text colors that pass AA

Check in the contrast checker

In a design

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started Learn more
New

Cards and badges use a soft tint of the color. Read more

Plan your next project

A short paragraph shows how body text sits next to the color.

Get started
New

Cards and badges use a soft tint of the color.

Ultramarine

Full-color background with readable text.

Get started

About Ultramarine

Ultramarine (#3F00FF) is a medium, highly saturated color from the Blue family with a cool character. It is made of 63 red, 0 green and 255 blue (hsl(255, 100%, 50%)). Its contrast ratio is 7.91:1 against white and 2.66:1 against black, so white text reads best on it.

Suggested uses

  • buttons, highlights and calls to action
  • logos and brand accents
  • calm, trustworthy or technical themes

Reading the codes

In HEX, #3F00FF stores red, green and blue as pairs of base-16 digits: 63, 0 and 255 out of 255. In HSL the same color has a hue of 255°, 100% saturation and 50% lightness, which makes lighter or darker variants easy to create by changing only the lightness.

Similar colors

#0000FFBlue#6F00FFElectric Indigo#0000CDMedium Blue#8A2BE2Blue Violet#1C39BBPersian Blue#9400D3Dark Violet#5A4FCFIris#6F2DA8Grape#1F51FFNeon Blue#002FA7Klein Blue

Palettes with this color

Product Launch#111827 #4F46E5 #22D3EE #F9FAFB #F43F5EColor Block#FF006E #FB5607 #FFBE0B #3A86FF #8338ECCitrus Splash#F9C80E #F86624 #EA3546 #662E9B #43BCCDOld Map#F4E9CD #C9B37E #8C7851 #5A4A32 #2F4858

Tools for this color

Shades GeneratorGenerate tints, tones, lighter and darker shades and saturation variations.Contrast CheckerAccurate WCAG contrast ratio with AA/AAA results and accessible suggestions.Color Harmony GeneratorComplementary, analogous, triadic, tetradic, split-complementary and monochromatic harmonies.Color Blindness SimulatorApproximate protanopia, deuteranopia, tritanopia and achromatopsia simulations.

Frequently asked questions

What is the HEX code of Ultramarine?
The HEX code of Ultramarine is #3F00FF. In RGB it is rgb(63, 0, 255) and in HSL hsl(255, 100%, 50%).
Which text color works on Ultramarine?
White text has a contrast ratio of 7.91:1 on Ultramarine and black text 2.66:1, so white text is more readable. WCAG AA needs at least 4.5:1 for normal text.
What is the complementary color of Ultramarine?
Rotating the hue of Ultramarine by 180° gives #C0FF00, its complementary color on the RGB color wheel.
What is Ultramarine in CMYK?
An approximate CMYK value for Ultramarine is cmyk(75%, 100%, 0%, 0%). For printing, ask your printer for an ICC-profiled conversion.