Shades of black

CSS has exactly one black, #000000. Designers usually reach for near-blacks instead, such as Tailwind's slate 950 (#020617) or stone 950 (#0c0a09), which keep almost all the contrast and carry a slight colour cast.

Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.

Base colour

Named shades

Or take colours from a photo

or drop it here. It never leaves your browser.

Shades

50#f7f7f7White1.1 FailInk16.9 AAA
100#ebebebWhite1.2 FailInk15.2 AAA
200#d7d7d7White1.4 FailInk12.6 AAA
300#bebebeWhite1.9 FailInk9.7 AAA
400#a1a1a1White2.6 FailInk7.0 AAA
500#868686White3.6 AA largeInk5.0 AA
600#6f6f6fWhite5.0 AAInk3.6 AA large
700#585858White7.1 AAAInk2.5 Fail
800#424242White10.0 AAAInk1.8 Fail
900#303030White13.2 AAAInk1.4 Fail
950#1f1f1fWhite16.5 AAAInk1.1 Fail

Copy as

CSSTailwindHexJSON

Palette code

:root {
  --color-black-50: #f7f7f7;
  --color-black-100: #ebebeb;
  --color-black-200: #d7d7d7;
  --color-black-300: #bebebe;
  --color-black-400: #a1a1a1;
  --color-black-500: #868686;
  --color-black-600: #6f6f6f;
  --color-black-700: #585858;
  --color-black-800: #424242;
  --color-black-900: #303030;
  --color-black-950: #1f1f1f;
  --color-accent-1: #dedede;
  --color-accent-2: #aeaeae;
  --color-accent-3: #555555;
  --color-accent-4: #2e2e2e;
}

At a glance

Black (CSS black): #000000 · white text 21.00:1; Source: w3.org, checked 2026-11
Slate 950 (Tailwind CSS v3): #020617 · white text 20.17:1 (AAA); Source: github.com, checked 2026-11
Gray 950 (Tailwind CSS v3): #030712 · white text 20.13:1 (AAA); Source: github.com, checked 2026-11
Zinc 950 (Tailwind CSS v3): #09090b · white text 19.89:1 (AAA); Source: github.com, checked 2026-11
Neutral 950 (Tailwind CSS v3): #0a0a0a · white text 19.79:1 (AAA); Source: github.com, checked 2026-11
Stone 950 (Tailwind CSS v3): #0c0a09 · white text 19.75:1 (AAA); Source: github.com, checked 2026-11
Slate 900 (Tailwind CSS v3): #0f172a · white text 17.85:1 (AAA); Source: github.com, checked 2026-11
Gray 900 (Tailwind CSS v3): #111827 · white text 17.73:1 (AAA); Source: github.com, checked 2026-11
Neutral 900 (Tailwind CSS v3): #171717 · white text 17.92:1 (AAA); Source: github.com, checked 2026-11
Zinc 900 (Tailwind CSS v3): #18181b · white text 17.71:1 (AAA); Source: github.com, checked 2026-11
Stone 900 (Tailwind CSS v3): #1c1917 · white text 17.48:1 (AAA); Source: github.com, checked 2026-11

Give your page these colours

A Liite page comes with 15 themes, from sunset to midnight, and your own colours on top. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.

Make your free page

Shades of black: what to know

This page starts the colour palette generator for this case. For every option and how to use it, see the colour palette generator.

Why near-black instead of black

Near-blacks keep almost all of black's contrast: white on neutral 950 (#0a0a0a) is 19.79:1, against 21:1 on pure black. Every near-black here clears the 7:1 AAA level with room to spare.

The faint tint is the point. Slate and gray 950 lean blue and suit cool palettes; stone 950 leans warm and sits better next to browns, creams and oranges.

Blacks in a dark theme

For a dark theme, use a 950 as the page background and a 900 for cards one level up, so surfaces stay distinct without borders. Check your text colour against both: the tool shows the ratio for every swatch.

Questions

What are the different shades of black color?

In CSS there's only black (#000000). In practice, designers use near-blacks with a slight tint, like the Tailwind 950 and 900 greys listed here, from blue-tinted slate to warm stone.

What are some popular black shades for design?

Tailwind's darkest greys are widely used in web design: slate 950 (#020617), gray 950 (#030712), zinc 950 (#09090b), neutral 950 (#0a0a0a) and stone 950 (#0c0a09).