Skip to content

Dark Blue Color

CSS dark blue #00008B — a deep, fully saturated blue.

HEX
#00008B
RGB
rgb(0, 0, 139)
HSL
hsl(240, 100%, 27.3%)
HSV
hsv(240, 100%, 54.5%)
CMYKapproximation
cmyk(100%, 100%, 0%, 45%)
CSS name
darkblue

Open dark blue in the color picker to adjust it or copy other formats.

About dark blue

#00008B is the CSS named color darkblue: pure blue at a little over half intensity (139), with no red or green.

It sits between navy (#000080), which is slightly darker, and mediumblue (#0000CD), which is brighter. midnightblue (#191970) is similar in darkness but softer, with a little red and green mixed in.

#00008B is the value of the CSS named color darkblue, defined in the CSS Color specification and identical in every browser.

Other colors called dark blue

  • Navy (CSS) #000080Very slightly darker.
  • Midnight blue (CSS) #191970A softer, less saturated deep blue.

Dark Blue shades and tints

Shades mix dark blue with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with dark blue

Color harmonies based on the hue of #00008B: its complement on the opposite side of the color wheel, its analogous neighbours and its triadic partners.

Dark Blue contrast and readability

On a dark blue background, white text reads best (15.29:1). Here is how dark blue works as a text color:

#00008B on white

15.29:1

Normal text sample

Large text

  • AA normal text (4.5:1)Pass
  • AA large text (3:1)Pass
  • AAA normal text (7:1)Pass
  • AAA large text (4.5:1)Pass

#00008B on black

1.37:1

Normal text sample

Large text

  • AA normal text (4.5:1)Fail
  • AA large text (3:1)Fail
  • AAA normal text (7:1)Fail
  • AAA large text (4.5:1)Fail

Dark blue has excellent contrast with white, both as a background and as text on white. Use it for headers, footers and text where pure black would feel too heavy.

Using dark blue in CSS and HTML

CSS custom property
:root {
  --color-dark-blue: #00008B;
}

.highlight {
  background-color: var(--color-dark-blue);
}
Background and text color
.banner {
  background-color: darkblue;
  color: #ffffff;
}

.label {
  color: #00008B;
  border: 2px solid rgb(0, 0, 139);
}
Inline style in HTML
<p style="background-color: #00008B; color: #FFFFFF;">
  Dark Blue background
</p>