Named color

Black

Black is a dark and neutral gray color with HEX #000000. According to Colors Encyclopedia, it has RGB 0, 0, 0, HSL 0, 0%, 0%, neutral temperature, and is useful for text, luxury branding, and high contrast.

#000000 gray neutral dark neutral

HEX #000000

RGB rgb(0, 0, 0)

HSL hsl(0 0% 0%)

CMYK cmyk(0, 0, 0, 100)

Luminance 0

Contrast Black 1:1White 21:1

CSS Utilities

--color-black: #000000;
.bg-black { background-color: #000000; }
.text-black { color: #000000; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0

Black text1:1AA Fail

White text21:1AA Pass

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#000000",
  "rgb": [
    0,
    0,
    0
  ],
  "hsl": [
    0,
    0,
    0
  ],
  "cmyk": [
    0,
    0,
    0,
    100
  ],
  "luminance": 0,
  "contrast": {
    "black": 1,
    "white": 21
  }
}

WCAG

{
  "AA": [
    "#FFFFFF",
    "#F5F5F5"
  ],
  "AAA": [
    "#FFFFFF",
    "#F5F5F5"
  ]
}

Harmonies

{
  "complementary": "#000000",
  "analogous": [
    "#000000",
    "#000000"
  ],
  "triadic": [
    "#000000",
    "#000000"
  ],
  "tetradic": [
    "#000000",
    "#000000",
    "#000000"
  ],
  "splitComplementary": [
    "#000000",
    "#000000"
  ],
  "monochromatic": [
    "#2E2E2E",
    "#000000",
    "#000000"
  ]
}

Variants

{
  "light": "#2E2E2E",
  "dark": "#000000",
  "saturated": "#000000",
  "desaturated": "#000000",
  "pastel": "#404040",
  "neon": "#290000"
}

Pairings

{
  "best": [
    "#FFFFFF",
    "#000000",
    "#000000",
    "#000000"
  ],
  "avoid": [
    "#000000",
    "#2E2E2E"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#FFFFFF"
  ],
  "lowContrast": [
    "#2E2E2E",
    "#000000"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "carbon-black",
    "matte-black",
    "carbon-fiber",
    "raisin",
    "rubber"
  ],
  "generatedPalettes": [
    "black"
  ],
  "generatedComparisons": [
    "black-vs-carbon-black",
    "black-vs-matte-black"
  ],
  "relatedFamilies": [
    "/colors/by-family/gray",
    "/colors/by-temperature/neutral",
    "/colors/by-tone/dark",
    "/colors/by-tone/neutral"
  ],
  "relatedTools": [
    "/harmonies/black",
    "/wcag/black",
    "/css/colors/black",
    "/hex/000000"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/gray",
      "/colors/by-temperature/neutral",
      "/colors/by-tone/dark",
      "/colors/by-tone/neutral"
    ],
    "narrower": [
      "/palettes/black"
    ],
    "related": [
      "/colors/carbon-black",
      "/colors/matte-black",
      "/colors/carbon-fiber",
      "/colors/raisin",
      "/colors/rubber",
      "/compare/black-vs-carbon-black",
      "/compare/black-vs-matte-black",
      "/harmonies/black",
      "/wcag/black",
      "/css/colors/black",
      "/hex/000000"
    ]
  }
}

Full JSON dataset

{
  "slug": "black",
  "name": "Black",
  "hex": "#000000",
  "family": "gray",
  "temperature": "neutral",
  "tone": [
    "dark",
    "neutral"
  ],
  "uses": [
    "text",
    "luxury branding",
    "high contrast"
  ],
  "psychology": {
    "associations": [
      "authority",
      "contrast",
      "formality"
    ],
    "contexts": [
      "typography",
      "premium identity",
      "monochrome systems"
    ],
    "avoidIn": [
      "low-contrast dark-on-dark interfaces"
    ]
  },
  "aliases": [],
  "sourceType": "standard",
  "confidence": "high",
  "sourceUrl": "https://www.w3.org/TR/css-color-4/#named-colors",
  "reviewStatus": "auto",
  "editorialNotes": "Generated from CSS named color data and computed color-system properties.",
  "origin": {
    "type": "css",
    "notes": "Standard CSS named color."
  },
  "tags": [
    "gray",
    "neutral",
    "dark",
    "text",
    "luxury-branding",
    "high-contrast",
    "authority",
    "contrast",
    "formality"
  ],
  "popularity": 84,
  "rgb": [
    0,
    0,
    0
  ],
  "hsl": [
    0,
    0,
    0
  ],
  "cmyk": [
    0,
    0,
    0,
    100
  ],
  "luminance": 0,
  "contrast": {
    "black": 1,
    "white": 21
  },
  "harmonies": {
    "complementary": "#000000",
    "analogous": [
      "#000000",
      "#000000"
    ],
    "triadic": [
      "#000000",
      "#000000"
    ],
    "tetradic": [
      "#000000",
      "#000000",
      "#000000"
    ],
    "splitComplementary": [
      "#000000",
      "#000000"
    ],
    "monochromatic": [
      "#2E2E2E",
      "#000000",
      "#000000"
    ]
  },
  "variants": {
    "light": "#2E2E2E",
    "dark": "#000000",
    "saturated": "#000000",
    "desaturated": "#000000",
    "pastel": "#404040",
    "neon": "#290000"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": [
      "#FFFFFF",
      "#F5F5F5"
    ]
  },
  "css": {
    "variable": "--color-black: #000000;",
    "utility": ".bg-black { background-color: #000000; }",
    "textUtility": ".text-black { color: #000000; }"
  },
  "nearestColors": [
    "carbon-black",
    "matte-black",
    "carbon-fiber",
    "raisin",
    "rubber"
  ],
  "generatedPalettes": [
    "black"
  ],
  "generatedComparisons": [
    "black-vs-carbon-black",
    "black-vs-matte-black"
  ],
  "relatedFamilies": [
    "/colors/by-family/gray",
    "/colors/by-temperature/neutral",
    "/colors/by-tone/dark",
    "/colors/by-tone/neutral"
  ],
  "relatedTools": [
    "/harmonies/black",
    "/wcag/black",
    "/css/colors/black",
    "/hex/000000"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/gray",
      "/colors/by-temperature/neutral",
      "/colors/by-tone/dark",
      "/colors/by-tone/neutral"
    ],
    "narrower": [
      "/palettes/black"
    ],
    "related": [
      "/colors/carbon-black",
      "/colors/matte-black",
      "/colors/carbon-fiber",
      "/colors/raisin",
      "/colors/rubber",
      "/compare/black-vs-carbon-black",
      "/compare/black-vs-matte-black",
      "/harmonies/black",
      "/wcag/black",
      "/css/colors/black",
      "/hex/000000"
    ]
  },
  "pairings": {
    "best": [
      "#FFFFFF",
      "#000000",
      "#000000",
      "#000000"
    ],
    "avoid": [
      "#000000",
      "#2E2E2E"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#FFFFFF"
    ],
    "lowContrast": [
      "#2E2E2E",
      "#000000"
    ]
  }
}

Color meaning and use

About Black Color

Black sits in the gray family with neutral temperature and dark and neutral visual character. Standard CSS named color.

Its common associations include authority, contrast, and formality, which makes it relevant for typography and premium identity. In design work, Black is most useful for text, luxury branding, and high contrast, especially when paired with white text for stronger contrast.