Shades of Black in CSS: Hex Codes, Swatches and Contrast

Last reviewed on 2026-10-03

"Black" on the web is rarely one colour. Designers use pure #000000 for maximum contrast, softer off-blacks like #121212 for dark themes, and tinted blacks (slate, charcoal, warm stone) to give a dark interface some character. This page lists the most useful shades of black for CSS backgrounds with their hex codes, live swatches, and the computed WCAG contrast ratio of white text and mid-grey text on each one.

All the ways to write pure black in CSS

These declarations all produce exactly the same colour:

background-color: black;
background-color: #000;
background-color: #000000;
background-color: #000000ff;          /* 8-digit hex with full alpha */
background-color: rgb(0 0 0);          /* modern space-separated syntax */
background-color: rgb(0, 0, 0);        /* legacy comma syntax */
background-color: hsl(0 0% 0%);
background-color: hwb(0 0% 100%);

To make a whole page black, set it on the root element and give text a light colour; the full walkthrough (where the code goes, inline vs. stylesheet, the JavaScript way) is in how to make a black background with CSS.

Shades of black: swatches

Shades of black: hex codes and contrast

Contrast ratios were calculated with the WCAG 2 relative-luminance formula. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold) and UI components; AAA requires 7:1 for normal text. Mid-grey here is #9E9E9E, a typical "secondary text" colour.

Two things stand out. First, every one of these blacks passes AAA with white text, so the choice between them is about mood, not legibility. Second, secondary grey text gets marginal fast: #9E9E9E drops below 4.5:1 on the lighter, tinted blacks such as onyx #353839, charcoal #36454F and darkslategray. If you use lighter "blacks" for cards, lighten your secondary text too. Check your own pair with the dark background contrast checker.

Pure black or off-black?

Reasons to use pure #000

• OLED screens. On OLED displays, pixels showing pure black are switched off, which is why "true black" themes exist for phones.
• Maximum contrast for imagery, video players, photo galleries and cinematic hero sections.
• Seamless blending with black images, videos and device bezels.

Reasons to use an off-black like #121212

• Less harsh text. Pure white on pure black (21:1) can look like it glows or bleeds for some readers, particularly people with astigmatism. Dropping the background to #121212 and text to #E0E0E0 still gives about 14:1.
• Visible elevation. Shadows don't show on pure black. Material Design's dark theme guidance uses #121212 as the base surface and expresses elevation with progressively lighter surfaces instead of shadows.
• Scrolling smear. Some OLED panels show a purple or dark trail when content scrolls across pure black, because fully-off pixels take slightly longer to switch on. A near-black such as #0A0A0A or #111 avoids fully-off pixels.

"Slate black" and tinted blacks

A tinted black is a very dark colour with a hint of hue. Blue-tinted blacks (#0F172A, #020617) read as cool and technical; warm blacks (#1C1917, #100C08) feel softer and more editorial. Tints work best when the rest of the palette shares the hue: pair slate backgrounds with blue-grey borders and text.

/* A slate-tinted dark theme */
:root {
  --bg:        #0F172A;   /* slate black */
  --surface:   #1E293B;   /* raised cards */
  --border:    #334155;
  --text:      #E2E8F0;
  --text-soft: #94A3B8;
}
body {
  background-color: var(--bg);
  color: var(--text);
}

Building a black scale with custom properties

A dark interface usually needs four or five blacks: page, surface, raised surface, border and hover. Defining them once as custom properties keeps everything consistent:

:root {
  --black-0: #000000;   /* page or media background */
  --black-1: #0A0A0A;   /* page background (off-black) */
  --black-2: #121212;   /* cards */
  --black-3: #1E1E1E;   /* raised cards, menus */
  --black-4: #2A2A2A;   /* borders, dividers */
}
.card       { background: var(--black-2); border: 1px solid var(--black-4); }
.card:hover { background: var(--black-3); }

Black with a little depth

A flat black can feel empty on large screens. A subtle gradient between two blacks adds depth without changing the overall colour:

body {
  background-color: #000;
  background-image: radial-gradient(ellipse at top, #1a1a1a 0%, #000 70%);
  min-height: 100vh;
}

More ideas: black gradient backgrounds, black grid and dot backgrounds, black background examples and colours that work with black.

FAQ

What is the hex code for black?

#000000 (short form #000), which is the same as the CSS keyword black and rgb(0 0 0).

What is a good off-black for a website?

#121212 is a widely used baseline for dark themes; #0A0A0A and #111111 are closer to pure black. All three pass WCAG AAA with white text.

What colour is "slate black"?

There is no single standard value. In CSS work it usually means a very dark blue-grey such as Tailwind's slate-900 #0F172A or slate-950 #020617. The CSS named colour darkslategray (#2F4F4F) is much lighter and greener.