Black Color (#000000)

A dark anchor for body copy and light-page headings. CSS value: #000000.

Color value

Use HEX, RGB, HSL or a CSS color name, without transparency.

Normalized color

CSS names:

Compare black and white text

This compares black and white text on the selected background. Check the result for your text size before choosing either one.

Color relationships

Tints toward white

Shades toward black

Five steps mix the sRGB channels toward white or black: 0%, 25%, 50%, 75% and 100%. Equal numeric steps may not look equally spaced.

Supported color inputs and errors →

Black hex and RGB values

The CSS keyword black gives you #000000, or rgb(0, 0, 0).

Black gives body copy a clear anchor on light pages. Check quieter captions separately if you use a lighter text color.

Compare black and white text

Text / backgroundRatioAA normalAA largeAAA normalAAA large
#000000 / #0000001.00:1FailFailFailFail
#FFFFFF / #00000021.00:1PassPassPassPass

White text has the higher contrast on black: 21.00:1. The table compares both options against all four text thresholds, using the unrounded values for pass or fail.

Try black in a layout

The CSS sample below uses white text on #000000. Preview a 16 px label and a 24 px heading to compare normal and large text. Swap the colors to try black as the text color; the ratio stays the same.

.sample {
  background: #000000;
  color: #FFFFFF;
}

Copy the exact color

Use the converter to copy HEX, RGB or HSL. If you edit in HSL, the final value is rounded to eight-bit sRGB so the preview and exported color agree. For text over an image, gradient or translucent layer, check the finished design separately.

Sources and further reading