#0047AB

Cobalt Blue color code

Cobalt Blue hex code: #0047AB · RGB 0, 71, 171. Also called cobalt.

Build a website palette from cobalt blue →

What color is cobalt blue?

Cobalt blue is a strong, saturated mid-dark blue named after the cobalt-based pigment developed in the early 1800s (often credited to French chemist Louis Jacques Thénard). The common reference value is #0047AB.

Cobalt is confident and dependable, which is why it's common in tech, finance, sports kits and ceramics. On websites it is an excellent primary color: dark enough for white text and vivid enough to stand out as a link or button.

White text on cobalt passes WCAG AAA for normal text. Cobalt pairs well with white and light gray, warm yellow or orange accents, and crisp black. Use a lighter cobalt tint for hover backgrounds and focus rings.

Cobalt Blue variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Cobalt blue (reference value)#0047ABrgb(0, 71, 171) · reference

Bright cobalt#1F5FD1rgb(31, 95, 209) · HueWiz pick

Deep cobalt#00337Crgb(0, 51, 124) · HueWiz pick

Cobalt tint#8FB0E6rgb(143, 176, 230) · HueWiz pick

Cobalt Blue on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with cobalt blue's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme

StudioWorkAboutContact

Spring collection

Designed around cobalt blue.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Light roles · surface #F2F7FF · text #141F32 · link #0047AB

dark theme

StudioWorkAboutContact

Spring collection

Designed around cobalt blue.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Dark roles · surface #0C1421 · text #E9EFF9 · link #3C7CE4

Cobalt Blue color palettes

Hand-picked combinations that work with cobalt blue. Hover a swatch to see its code; click to copy.

Cobalt Blue contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

Pairing	Ratio	Normal text	Large text
White text on cobalt blue	`8.43:1`	AAA	AAA
Black text on cobalt blue	`2.48:1`	Fail	Fail
Cobalt Blue text on white	`8.43:1`	AAA	AAA
Cobalt Blue text on near-black #111111	`2.23:1`	Fail	Fail

Cobalt Blue shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #0047AB. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-cobalt-blue-50: #F2F7FF;
  --color-cobalt-blue-100: #E3EEFF;
  --color-cobalt-blue-200: #C6DCFF;
  --color-cobalt-blue-300: #A1C4FC;
  --color-cobalt-blue-400: #7DA7EA;
  --color-cobalt-blue-500: #5B8AD7;
  --color-cobalt-blue-600: #386DC4;
  --color-cobalt-blue-700: #1653B3;
  --color-cobalt-blue-800: #003C94;
  --color-cobalt-blue-900: #002A6B;
  --color-cobalt-blue-950: #001845;
  --color-cobalt-blue: #0047AB;
}

CSS variables

:root {
  --cobalt-blue: #0047AB;
  --cobalt-blue-rgb: 0 71 171;
  --cobalt-blue-light: #E3EEFF;
  --cobalt-blue-dark: #003C94;
}

.btn-cobalt-blue {
  background: #0047AB;
  color: #FFFFFF;
}

Need semantic roles (surface, text, primary, accent) and exports? Open cobalt blue in the Tailwind color generator.

Cobalt Blue FAQ

What is the hex code for cobalt blue?

#0047AB is the value HueWiz uses for cobalt blue; it equals rgb(0, 71, 171). Other common versions include #1F5FD1 (bright cobalt), #00337C (deep cobalt), #8FB0E6 (cobalt tint).

Is cobalt blue a warm or cool color?

With an HSL hue of 215° and 100% saturation, cobalt blue reads as a cool blue.

What text color looks best on cobalt blue?

Use white or very light text. White on #0047AB measures 8.43:1 and black measures 2.48:1; WCAG AA needs 4.5:1 for normal text.

What colors go with cobalt blue?

Try cobalt & citrus (#0047AB, #FFB703, #FFFFFF); delft ceramic (#FFFFFF, #E6EEF9, #8FB0E6); cobalt & coral (#0047AB, #FF7F50, #FAF7F2). Each palette above can be copied or opened in the HueWiz studio.