Colors · value from the CSS Color Module Level 4 (W3C)
Dark red color: hex code #8B0000, RGB and palettes
Dark red is #8B0000 (RGB 139, 0, 0), the CSS color darkred: red at about half strength with no green or blue. White text on it measures 10.01:1, and it passes comfortably as text on white.
- HEX
#8B0000- RGB
rgb(139, 0, 0)- HSL
hsl(0, 100%, 27%)
Best text on it: white at 10.01:1
Every code for Dark red
- HEX
#8B0000 - RGB
rgb(139, 0, 0) - HSL
hsl(0, 100%, 27%) - HSV
0°, 100%, 55% - CMYK
0%, 100%, 100%, 45% - Lab
lab(28.8% 51.5 42.8) - OKLCH
oklch(40% 0.164 29.2) - Decimal
9109504
Tints, shades and tones
From white to black in 10% steps, with Dark red in the middle. Tap a code to copy it.
- 90%#F3E6E6
- 80%#E8CCCC
- 70%#DCB3B3
- 60%#D19999
- 50%#C58080
- 40%#B96666
- 30%#AE4D4D
- 20%#A23333
- 10%#971A1A
- Base#8B0000
- 10%#7D0000
- 20%#6F0000
- 30%#610000
- 40%#530000
- 50%#460000
- 60%#380000
- 70%#2A0000
- 80%#1C0000
- 90%#0E0000
Tones (mixed with gray)
- 10%#8A0D0D
- 20%#891A1A
- 30%#882626
- 40%#873333
- 50%#864040
- 60%#844D4D
- 70%#835A5A
- 80%#826666
- 90%#817373
Matching colors
Dark red in 3D color space
OKLab, the space ColorPlum does its math in: lightness runs up the pole, hue goes around it and saturation grows outward. The faint shell is every color a screen can show (saturation is drawn wider than lightness so hues separate). Drag to turn it.
- Dark red
- Triad #008B00
- Triad #00008B
- Complement
- 50% tint
- 50% shade
Dark red in use
Card body text stays dark for reading; dark red carries the header and the button.
Shop nowTagHeadline in Dark red
A paragraph with a link set in this color, which is dark enough for text on white.
How it looks with color-vision deficiency
A simulation (Machado and colleagues, 2009) of how the color and its complement read without one type of cone.
- Typical color vision
#8B0000 - Protanopia (no red cones)
#383000 - Deuteranopia (no green cones)
#574C00 - Tritanopia (no blue cones)
#9A0004
Contrast and readability
| Pairing | Ratio | WCAG 2.2 |
|---|---|---|
| as text on white | 10.01:1 | AA AA large AAA |
| as text on black | 2.09:1 | AA AA large AAA |
| white text on it | 10.01:1 | AA AA large AAA |
| black text on it | 2.09:1 | AA AA large AAA |
| on your background | 8.74:1 | AA AA large AAA |
Export
:root {
--dark-red: #8b0000;
--dark-red-rgb: 139 0 0;
--dark-red-on: #ffffff;
}On this page
Dark red does exactly what its name says: it is red turned down until it feels heavy and serious. The value ColorPlum uses is the CSS named color darkred, #8B0000. Because it is in the CSS list, you can type darkred instead of the hex code in any stylesheet and get the same color.
What the numbers say
The RGB values are 139, 0, 0: red at roughly 55% of its range, and nothing else. That makes the HSL reading very clean, hue 0°, 100% saturation, 27% lightness. In CMYK it is 0%, 100%, 100%, 45%, a simple conversion that a print shop will adjust to its own inks. The decimal form is 9109504 if a tool asks for a single integer.
Because there is no green or blue at all, darkred is a pure red hue and looks hotter than burgundy or wine. In the xkcd survey, the color people named "dark red" is #840000, only 1.6 apart in OKLab, which is close enough that most people could not tell them apart on a screen. The CSS list's own close neighbor is maroon (#800000), at a distance of 2.5. Browns and brick tones are further away: brown (#A52A2A) is 8.2 and firebrick (#B22222) is 9.8.
Choosing text and companions
- White on dark red: 10.01:1, which clears the 7:1 AAA level. Black on it is poor, since the same color as text on black measures only 2.09:1.
- Dark red as text: on white it also gives 10.01:1, so it makes a strong heading or link color. On the pale tint #F3E6E6 it still reaches 8.23:1.
- Complement: the opposite is a dark cyan, #008B8B. Together they feel more vivid than red with green.
- Neighbors on the wheel: the analogous picks are #8B0046 (toward crimson) and #8B4600 (toward brown).
Shade steps go from #7D0000 to #0E0000, and tints from #971A1A to #F3E6E6. The 80% tint, #E8CCCC, is a dusty rose that holds dark red text at 6.64:1.
Worked example
Imagine you build a website for a charity bake sale and need a "Donate" button that is clearly the main action. You fill the button with dark red and set the label in white, which gives 10.01:1. The hover state steps one notch darker to #610000, which keeps white text at 13.92:1, so the button never gets harder to read when someone points at it. Beside it you put a secondary link in the same red on the pale #F3E6E6 panel. Everything passes without any extra tuning, and the red is strong enough that the button still stands out on a mostly white page.
Related colors
For a version with a hint of blue, compare burgundy. For a slightly browner red, see maroon, and for a brighter one, crimson. You can also test a pairing in the contrast checker.