Ultramarine #2000B1

Ultramarine is a dark, vivid blue with hex code #2000B1 and RGB rgb(32, 0, 177).

Aa

White text reads best on this color (12.38:1).

About this color

#2000B1 is a dark, vivid blue. In OKLCH its lightness is 35%, its chroma 0.231 and its hue 271°. Its hue sits on the cool side of the wheel. It is the named color Ultramarine. White text reads best on it, at 12.38:1.

Hue familyBlues
Lightnessdark (35%)
Chromavivid (0.231)
Temperaturecool
Nearest nameUltramarine
Black text1.69:1
White text12.38:1

Colors that go with Ultramarine

Matches found by rotating Ultramarine around the OKLCH hue wheel, each labelled with the closest name in our list.

Analogous

Neighbouring hues, 30° either side.

Open the analogous palette in the generator

Color palettes with Ultramarine

Curated color palettes that contain a color within ΔE 0.06 (OKLab) of Ultramarine, closest first.

Similar named colors

The eight named colors closest to Ultramarine, with their ΔE distance.

More about Ultramarine

How to make Ultramarine

A starting recipe from common paint colors, found with a spectral paint model (the color mixer’s paint mode). Real pigments vary, so mix a small test batch and adjust.

  • 1 part blue
  • 1 part purple

Recipe result: #3B3A9F, a difference of ΔE 0.097 from Ultramarine. Ultramarine is more vivid than these paints can mix, so start from a ready-made blue paint and adjust it.

What colors make blue? | Color mixing chart

Codes for Ultramarine in every format

HEX#2000B1
RGBrgb(32, 0, 177)
HSLhsl(251, 100%, 35%)
OKLCHoklch(35.5% 0.231 270.6)

Contrast

WCAG 2 contrast ratios are the conformance target: AA needs 4.5:1 for body text and 3:1 for large text, AAA needs 7:1. APCA Lc values are supplementary guidance from the WCAG 3 drafts.

PairWCAG 2ResultAPCAAPCA guidance
White text on #2000B1 12.38:1 AAA Lc -99.3 Preferred for body text
Black text on #2000B1 1.69:1 Fails Lc 8.5 Not readable
#2000B1 text on white 12.38:1 AAA Lc 95.4 Preferred for body text
#2000B1 text on black 1.69:1 Fails Lc 0.0 Not readable

Shades and tints of Ultramarine

A 50–950 scale built in OKLCH: the hue is held, lightness follows a Tailwind v4-like curve, and every step is kept inside the sRGB gamut. This color sits at step 900.

  1. Step 50

    50

    #F2F5FF

    oklch(97.1% 0.014 272.7)

  2. Step 100

    100

    #E2E9FF

    oklch(93.5% 0.031 271.7)

  3. Step 200

    200

    #CBD8FF

    oklch(88.5% 0.056 270.7)

  4. Step 300

    300

    #A9BEFF

    oklch(80.9% 0.095 270.4)

  5. Step 400

    400

    #7D99FF

    oklch(70.7% 0.152 270.5)

  6. Step 500

    500

    #5F7BFF

    oklch(63.1% 0.198 270.7)

  7. Step 600

    600

    #4558FF

    oklch(55.6% 0.245 270.7)

  8. Step 700

    700

    #362CFF

    oklch(49.2% 0.287 270.7)

  9. Step 800

    800

    #2C00E3

    oklch(42.7% 0.278 270.6)

  10. Step 900

    900 (this color)

    #2000B1

    oklch(35.5% 0.231 270.6)

  11. Step 950

    950

    #12136C

    oklch(27% 0.146 270.6)

Export this scale for Tailwind in the Tailwind colors tool

Ultramarine with color blindness

Simulated with the Machado et al. (2009) model. ΔE is how far the color moves: below about 0.02 you would not notice a change.

VisionSeen asShift (ΔE)
Protanopia (no red cones)#003CB50.076
Deuteranopia (no green cones)#002CAE0.045
Tritanopia (no blue cones)#0047660.173
Achromatopsia (no color)#3434340.233

Use Ultramarine in your product

Turn it into light and dark UI roles checked for contrast, then export to Tailwind v4, shadcn/ui, CSS or design tokens.