HueWiz / Colors / Black
#000000

Black hex code: #000000

Black is a very dark neutral — a near-black that works as a supporting color rather than a statement.

Build palettes with Black →

Using Black in your designs

Black sits at 0% lightness with almost no saturation, which makes it a true workhorse neutral. In practice it behaves best as a text or near-black surface color: it stays out of the way, lets accent colors do the talking, and pairs safely with nearly any hue on the wheel.

With a 21.00:1 contrast ratio against white, black is dark enough to carry white text at any size — use it confidently for buttons, headers and filled UI elements. It is also dark enough to serve as a background in a dark theme, where lighter tints of black can act as hover and border states.

Black in hex, RGB, and CSS

Black is #000000 in hexadecimal and rgb(0, 0, 0) in RGB. In CSS, black, #000, and #000000 represent the same sRGB color. Six-digit hex is often clearest in design tokens because it uses the same format as colors that cannot be shortened.

Black on white reaches the maximum WCAG contrast ratio of 21:1. Pure black can feel visually heavy on bright interfaces, so body text is sometimes softened to a near-black such as #222222. Always test that actual value against its real background rather than assuming every dark gray passes.

Black color palettes

Every palette below is computed from black's position on the color wheel (hue 0°). Hover any swatch to see its code; click to copy.

Complementary

Analogous

Triadic

Split-complementary

Tetradic

Monochromatic

Tints and shades of Black

Tints mix black toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.

Shades → base → tints

Contrast & accessibility

WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how black performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).

PairingRatioNormal textLarge text
White text on Black21.00:1AAAAAA
Black text on Black1.00:1FailFail
Protanopia#000000
Deuteranopia#000000
Tritanopia#000000

Black in code

Copy-ready snippets. In CSS you can also use the keyword black directly.

:root {
  --black: #000000;
  --black-rgb: 0, 0, 0;
  --black-tint: #737373;
  --black-shade: #000000;
}

.btn-black {
  background: var(--black);
  color: #ffffff;
}

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-black: #000000;
  --color-black-light: #737373;
  --color-black-dark: #000000;
}

Generate a complete ramp and semantic roles in the Tailwind color generator.

Tailwind CSS v3 — extend your theme

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        black: { DEFAULT: "#000000", light: "#737373", dark: "#000000" }
      }
    }
  }
};

Colors similar to Black

The closest CSS named colors by perceptual (Lab) distance.

darkslategray#2F4F4F · ΔE 34
dimgray#696969 · ΔE 44
gray#808080 · ΔE 54
slategray#708090 · ΔE 54
darkolivegreen#556B2F · ΔE 55
teal#008080 · ΔE 57
← PreviousbisqueNext →blanchedalmond
Copied