Shades of Black

Shades of black include charcoal, jet, ebony, onyx, and soft near-blacks. The base black color's hex value in HTML is #000000. Browse dark tones below for dark UI surfaces, copy HEX codes, or expand a near-black in Shade Color.

All Shades of Black

38 named colors · one-click copy · WCAG contrast vs white/black

Shade Color

Browse named black colors, copy a precise HEX in one click, and check WCAG contrast on white or black. Display Format only changes how values are shown — it does not build a theme scale. Turn on Preview UI to see each color as text and a button.

Black

#000000 Palette

W 21.0:1 AAA B 1.0:1 Fail

Eerie Black

#1B1B1B Palette

W 17.2:1 AAA B 1.2:1 Fail

Onyx

#353839 Palette

W 11.8:1 AAA B 1.8:1 Fail

Ebony

#555D50 Palette

W 6.8:1 AA B 3.1:1 Fail

Black Olive

#3B3C36 Palette

W 11.1:1 AAA B 1.9:1 Fail

Black Coffee

#3B2F2F Palette

W 12.9:1 AAA B 1.6:1 Fail

Black Bean

#3D0C02 Palette

W 16.8:1 AAA B 1.3:1 Fail

Black Chocolate

#1B1811 Palette

W 17.7:1 AAA B 1.2:1 Fail

Licorice

#1A1110 Palette

W 18.6:1 AAA B 1.1:1 Fail

Smoky Black

#100C08 Palette

W 19.5:1 AAA B 1.1:1 Fail

Rich Black

#010B13 Palette

W 19.8:1 AAA B 1.1:1 Fail

Cool Black

#002E63 Palette

W 13.4:1 AAA B 1.6:1 Fail

Dark Navy

#02075D Palette

W 17.6:1 AAA B 1.2:1 Fail

Black Coral

#54626F Palette

W 6.3:1 AA B 3.4:1 Fail

Cadet

#536872 Palette

W 5.8:1 AA B 3.6:1 Fail

Independence

#4C516D Palette

W 7.8:1 AAA B 2.7:1 Fail

Dark Purple

#301934 Palette

W 16.0:1 AAA B 1.3:1 Fail

Black Plum

#2C1608 Palette

W 17.1:1 AAA B 1.2:1 Fail

Dark Brown

#1A0F0A Palette

W 18.8:1 AAA B 1.1:1 Fail

Bistre

#3D2B1F Palette

W 13.4:1 AAA B 1.6:1 Fail

Black Shadows

#BFAFB2 Palette

W 2.1:1 Fail B 10.0:1 AAA

Soft Black

#1C1C1C Palette

W 17.0:1 AAA B 1.2:1 Fail

Ink Black

#0B0B0B Palette

W 19.7:1 AAA B 1.1:1 Fail

Carbon Black

#0A0A0A Palette

W 19.8:1 AAA B 1.1:1 Fail

Void

#0D0D0D Palette

W 19.4:1 AAA B 1.1:1 Fail

Night

#0C090A Palette

W 19.8:1 AAA B 1.1:1 Fail

Pitch Black

#0E0E10 Palette

W 19.3:1 AAA B 1.1:1 Fail

Iron Black

#222222 Palette

W 15.9:1 AAA B 1.3:1 Fail

Ash Black

#2B2B2B Palette

W 14.2:1 AAA B 1.5:1 Fail

Smoke Black

#1F1F1F Palette

W 16.5:1 AAA B 1.3:1 Fail

Shadow

#232B2B Palette

W 14.5:1 AAA B 1.5:1 Fail

Deep Space

#000008 Palette

W 20.9:1 AAA B 1.0:1 Fail

Black Raspberry

#1A0A0A Palette

W 19.2:1 AAA B 1.1:1 Fail

Obsidian

#0B1215 Palette

W 18.9:1 AAA B 1.1:1 Fail

Vantablack-ish

#050505 Palette

W 20.4:1 AAA B 1.0:1 Fail

UI Near Black

#111827 Palette

W 17.7:1 AAA B 1.2:1 Fail

Slate Near Black

#0F172A Palette

W 17.9:1 AAA B 1.2:1 Fail

Zinc Near Black

#18181B Palette

W 17.7:1 AAA B 1.2:1 Fail

Popular Shade Collections

Browse other named shade galleries, or open the Shade Color tool to generate a custom 50–950 palette.

Shades of Blue

Shades of Green

Shades of Purple

Shades of Pink

Shades of Gray

Shades of Brown

Shades of Yellow

Shades of Red

About Shades of Black

This page catalogs named blacks and near-blacks with HEX, HSL, and WCAG contrast. Use them as dark-surface references or seed Shade Color for a dark scale.

Want a full Black theme (50–950)?

Pick one base color from the gallery above.
Click Palette on that card to open Shade Color.
The tool builds a locked-H / locked-S lightness scale (HSL algorithm) named like Black-50 … 950.
Copy the HEX values into CSS variables for production.

Black Shades Glossary

Each named black or near-black lists HEX, HSL, WCAG contrast vs white/black, and copy-ready CSS / Tailwind arbitrary values. Prefer near-blacks over pure #000000 when you need softer dark UI chrome.

Onyx: #353839 hsl(195, 4%, 22%) W 11.8:1 AAA B 1.8:1 Fail

CSS color: #353839; Tailwind bg-[#353839]
Ebony: #555D50 hsl(97, 8%, 34%) W 6.8:1 AA B 3.1:1 Fail

CSS color: #555D50; Tailwind bg-[#555D50]
Rich Black: #010B13 hsl(207, 90%, 4%) W 19.8:1 AAA B 1.1:1 Fail

CSS color: #010B13; Tailwind bg-[#010B13]
Obsidian: #0B1215 hsl(198, 31%, 6%) W 18.9:1 AAA B 1.1:1 Fail

CSS color: #0B1215; Tailwind bg-[#0B1215]
UI Near Black: #111827 hsl(221, 39%, 11%) W 17.7:1 AAA B 1.2:1 Fail

CSS color: #111827; Tailwind bg-[#111827]
Black: #000000 hsl(0, 0%, 0%) W 21.0:1 AAA B 1.0:1 Fail

CSS color: #000000; Tailwind bg-[#000000]
Eerie Black: #1B1B1B hsl(0, 0%, 11%) W 17.2:1 AAA B 1.2:1 Fail

CSS color: #1B1B1B; Tailwind bg-[#1B1B1B]
Black Olive: #3B3C36 hsl(70, 5%, 22%) W 11.1:1 AAA B 1.9:1 Fail

CSS color: #3B3C36; Tailwind bg-[#3B3C36]
Black Coffee: #3B2F2F hsl(0, 11%, 21%) W 12.9:1 AAA B 1.6:1 Fail

CSS color: #3B2F2F; Tailwind bg-[#3B2F2F]
Black Bean: #3D0C02 hsl(10, 94%, 12%) W 16.8:1 AAA B 1.3:1 Fail

CSS color: #3D0C02; Tailwind bg-[#3D0C02]
Black Chocolate: #1B1811 hsl(42, 23%, 9%) W 17.7:1 AAA B 1.2:1 Fail

CSS color: #1B1811; Tailwind bg-[#1B1811]
Licorice: #1A1110 hsl(6, 24%, 8%) W 18.6:1 AAA B 1.1:1 Fail

CSS color: #1A1110; Tailwind bg-[#1A1110]
Smoky Black: #100C08 hsl(30, 33%, 5%) W 19.5:1 AAA B 1.1:1 Fail

CSS color: #100C08; Tailwind bg-[#100C08]
Cool Black: #002E63 hsl(212, 100%, 19%) W 13.4:1 AAA B 1.6:1 Fail

CSS color: #002E63; Tailwind bg-[#002E63]
Dark Navy: #02075D hsl(237, 96%, 19%) W 17.6:1 AAA B 1.2:1 Fail

CSS color: #02075D; Tailwind bg-[#02075D]
Black Coral: #54626F hsl(209, 14%, 38%) W 6.3:1 AA B 3.4:1 Fail

CSS color: #54626F; Tailwind bg-[#54626F]
Cadet: #536872 hsl(199, 16%, 39%) W 5.8:1 AA B 3.6:1 Fail

CSS color: #536872; Tailwind bg-[#536872]
Independence: #4C516D hsl(231, 18%, 36%) W 7.8:1 AAA B 2.7:1 Fail

CSS color: #4C516D; Tailwind bg-[#4C516D]
Dark Purple: #301934 hsl(291, 35%, 15%) W 16.0:1 AAA B 1.3:1 Fail

CSS color: #301934; Tailwind bg-[#301934]
Black Plum: #2C1608 hsl(23, 69%, 10%) W 17.1:1 AAA B 1.2:1 Fail

CSS color: #2C1608; Tailwind bg-[#2C1608]
Dark Brown: #1A0F0A hsl(19, 44%, 7%) W 18.8:1 AAA B 1.1:1 Fail

CSS color: #1A0F0A; Tailwind bg-[#1A0F0A]
Bistre: #3D2B1F hsl(24, 33%, 18%) W 13.4:1 AAA B 1.6:1 Fail

CSS color: #3D2B1F; Tailwind bg-[#3D2B1F]
Black Shadows: #BFAFB2 hsl(349, 11%, 72%) W 2.1:1 Fail B 10.0:1 AAA

CSS color: #BFAFB2; Tailwind bg-[#BFAFB2]
Soft Black: #1C1C1C hsl(0, 0%, 11%) W 17.0:1 AAA B 1.2:1 Fail

CSS color: #1C1C1C; Tailwind bg-[#1C1C1C]
Ink Black: #0B0B0B hsl(0, 0%, 4%) W 19.7:1 AAA B 1.1:1 Fail

CSS color: #0B0B0B; Tailwind bg-[#0B0B0B]
Carbon Black: #0A0A0A hsl(0, 0%, 4%) W 19.8:1 AAA B 1.1:1 Fail

CSS color: #0A0A0A; Tailwind bg-[#0A0A0A]
Void: #0D0D0D hsl(0, 0%, 5%) W 19.4:1 AAA B 1.1:1 Fail

CSS color: #0D0D0D; Tailwind bg-[#0D0D0D]
Night: #0C090A hsl(340, 14%, 4%) W 19.8:1 AAA B 1.1:1 Fail

CSS color: #0C090A; Tailwind bg-[#0C090A]
Pitch Black: #0E0E10 hsl(240, 7%, 6%) W 19.3:1 AAA B 1.1:1 Fail

CSS color: #0E0E10; Tailwind bg-[#0E0E10]
Iron Black: #222222 hsl(0, 0%, 13%) W 15.9:1 AAA B 1.3:1 Fail

CSS color: #222222; Tailwind bg-[#222222]
Ash Black: #2B2B2B hsl(0, 0%, 17%) W 14.2:1 AAA B 1.5:1 Fail

CSS color: #2B2B2B; Tailwind bg-[#2B2B2B]
Smoke Black: #1F1F1F hsl(0, 0%, 12%) W 16.5:1 AAA B 1.3:1 Fail

CSS color: #1F1F1F; Tailwind bg-[#1F1F1F]
Shadow: #232B2B hsl(180, 10%, 15%) W 14.5:1 AAA B 1.5:1 Fail

CSS color: #232B2B; Tailwind bg-[#232B2B]
Deep Space: #000008 hsl(240, 100%, 2%) W 20.9:1 AAA B 1.0:1 Fail

CSS color: #000008; Tailwind bg-[#000008]
Black Raspberry: #1A0A0A hsl(0, 44%, 7%) W 19.2:1 AAA B 1.1:1 Fail

CSS color: #1A0A0A; Tailwind bg-[#1A0A0A]
Vantablack-ish: #050505 hsl(0, 0%, 2%) W 20.4:1 AAA B 1.0:1 Fail

CSS color: #050505; Tailwind bg-[#050505]
Slate Near Black: #0F172A hsl(222, 47%, 11%) W 17.9:1 AAA B 1.2:1 Fail

CSS color: #0F172A; Tailwind bg-[#0F172A]
Zinc Near Black: #18181B hsl(240, 6%, 10%) W 17.7:1 AAA B 1.2:1 Fail

CSS color: #18181B; Tailwind bg-[#18181B]

FAQ

How to use this page?

Copy dark HEX neutrals for elevation tokens, or generate a dark ladder with Shade Color.

What is the most popular shade of black?

Charcoal is a popular near-black for interfaces because it reduces glare versus #000 while still reading as black.

What is the base black HEX value?

The reference base black on this page uses #000000. Use it as a starting seed in Shade Color, or pick any named swatch above as your base.

How do I turn a swatch into a full UI theme?

Click Palette on one gallery card. Shade Color locks hue and saturation, then varies lightness into tokens like Black-50 through Black-950 for CSS variables.

What do the W / B contrast labels mean?

Each card shows WCAG 2.x contrast for this color used as text on white (W) and text on black (B). AA means at least 4.5:1 (normal text); AAA means at least 7:1. Fail means below 4.5:1 — still fine for large decorative areas, but avoid for small body text.

What does Preview UI show?

Turn on Preview UI to see the color as text on white/black and as a simple button sample. It is a quick accessibility and context check—not a full design system.

Why use this gallery instead of sampling from a screenshot?

Named colors here use fixed HEX values, so you avoid compression and display-profile drift from screenshots. Copy the code once, then reuse it consistently in CSS or design tokens. For a full 50–950 CSS variable block, open Palette on a card and use Copy CSS in Shade Color.