Dark Blue Color
CSS dark blue #00008B — a deep, fully saturated blue.
Dark Blue
#00008B
- 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
:root {
--color-dark-blue: #00008B;
}
.highlight {
background-color: var(--color-dark-blue);
}.banner {
background-color: darkblue;
color: #ffffff;
}
.label {
color: #00008B;
border: 2px solid rgb(0, 0, 139);
}<p style="background-color: #00008B; color: #FFFFFF;">
Dark Blue background
</p>