Uwarp

Cobalt blue color

Cobalt blue is #0047AB. Copy the codes, shades, and contrast below.

Build shades

Codes

This name is not a CSS keyword. Set the hex in stylesheets.

  • HEX#0047AB
  • RGB0, 71, 171
  • HSL215, 100%, 34%
  • CMYK100, 58, 0, 33

Shades and tints

Ten steps toward black, then ten toward white. The outlined stop is #0047AB.

  • 000711

  • 000E22

  • 001533

  • 001C44

  • 002456

  • 002B67

  • 003278

  • 003989

  • 00409A

  • Base

  • 1A59B3

  • 336CBC

  • 4D7EC4

  • 6691CD

  • 80A3D5

  • 99B5DD

  • B3C8E6

  • CCDAEE

  • E6EDF7

Palettes from this hex

Hue rotations of #0047AB. Open the scheme generator to edit a set.

Open scheme generator

  • Complementary

    • #0048AD
    • #AD6500

  • Analogous

    • #009FAD
    • #0048AD
    • #0E00AD

  • Triadic

    • #0048AD
    • #AD0048
    • #48AD00

  • Tetradic

    • #0048AD
    • #AD009F
    • #AD6500
    • #00AD0E

Contrast

Ratios use #0047AB against white (#FFFFFF) and near-black (#161616). AA means 4.5:1 for body text.

Open contrast checker

  • On white

    8.44:1

    AAA

  • On near-black

    2.15:1

    Fails AA

  • White text on this color

    8.44:1

    AAA

  • Near-black text on this color

    2.15:1

    Fails AA

How to use cobalt blue

Cobalt blue here is #0047AB, the pigment blue listed on the Wikipedia cobalt blue infobox. It is not a CSS keyword. CSS blue is #0000FF, which is purer and brighter. Navy is #000080, darker and less saturated. If the query is cobalt blue color, compare #0047AB with the logo before you lock a token.

#0047AB carries white text well and reads as a clear action color on light backgrounds. It is saturated enough to vibrate next to pure red, so keep neighboring accents small. The shade ramp gives deeper blues for headers without jumping all the way to navy. If you need the grayer navy of a uniform, use the navy page instead of a cobalt shade. Analogous steps move toward blue-violet and cyan: cobalt for actions, a lighter analogous blue for backgrounds, navy for text. Periwinkle is a pale wash in the broad family, not a tint of this exact hex, because the hues differ.

Nearby colors

Frequently Asked Questions

Quick answers about this tool—open a question to read more.

Sources

Where this swatch and the CSS keyword note come from.

  • Wikipedia, Cobalt blue: Wikipedia lists cobalt blue as #0047AB in the color infobox for the cobalt aluminate pigment. This page uses that swatch. The infobox marks the hex itself as unsourced, so compare it with a brand sample when one exists. en.wikipedia.org/wiki/Cobalt_blue

  • MDN named-color: According to MDN, CSS has blue and navy keywords and no cobalt keyword. The hex on this page has to be written explicitly. developer.mozilla.org/en-US/docs/Web/CSS/named-color