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

55 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

Raisin Black

#242124 Palette

W 15.9:1 AAA B 1.3:1 Fail

Jet

#343434 Palette

W 12.4:1 AAA B 1.7:1 Fail

Charcoal

#36454F Palette

W 9.9:1 AAA B 2.1:1 Fail

Outer Space

#414A4C Palette

W 9.1:1 AAA B 2.3:1 Fail

Dark Charcoal

#333333 Palette

W 12.6:1 AAA B 1.7:1 Fail

Graphite

#383838 Palette

W 11.7:1 AAA B 1.8: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

Oxford Blue

#002147 Palette

W 16.0:1 AAA B 1.3:1 Fail

Space Cadet

#1D2951 Palette

W 14.1:1 AAA B 1.5:1 Fail

Dark Navy

#02075D Palette

W 17.6:1 AAA B 1.2:1 Fail

Midnight

#191970 Palette

W 14.8:1 AAA B 1.4:1 Fail

Gunmetal

#2A3439 Palette

W 12.7:1 AAA B 1.6:1 Fail

Dark Slate Gray

#2F4F4F Palette

W 8.9:1 AAA B 2.4:1 Fail

Davys Gray

#555555 Palette

W 7.5:1 AAA B 2.8:1 Fail

Dim Gray

#696969 Palette

W 5.5:1 AA B 3.8:1 Fail

Paynes Gray

#536878 Palette

W 5.8:1 AA B 3.6:1 Fail

Stormcloud

#4F666A Palette

W 6.1:1 AA B 3.4: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

Cafe Noir

#4B3621 Palette

W 11.4:1 AAA B 1.8: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

Black Currant

#1C1C1C Palette

W 17.0:1 AAA B 1.2: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

Layered blacks beat a single #000 fill for dark themes, photography overlays, and premium fashion sites. Soft charcoal reduces glare; deep ink anchors headers.

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.

Popular Black Shades Glossary

Black notes below explain near-blacks and tinted darks so dark UI layers stay intentional, not flat.

What is Charcoal?

Charcoal (#36454F) is a cool dark gray with a hint of blue-green. Excellent dark-UI surface above pure black.

What is Onyx?

Onyx (#353839) is a cool near-black with a stone feel. Elegant dark surface for luxury and photography sites.

What is Ebony?

Ebony (#555D50) is a greenish dark wood tone. Softer than charcoal for organic dark palettes.

What is Jet?

Jet (#343434) is a near-black gray. Softens dark themes compared with #000 while staying clearly “black.”

What is Rich Black?

Rich Black (#010B13) is a print-inspired near-black with blue depth. Feels denser than flat #000 in dark UI.

What is Gunmetal?

Gunmetal (#2A3439) is a dark blue-gray metal tone. Premium dark surface for hardware and tech brands.

What is Obsidian?

Obsidian (#0B1215) is an almost-black with a cool cast. Ideal base for OLED-friendly dark themes.

What is UI Near Black?

UI Near Black (#111827) matches common Tailwind slate-900. A practical default for modern dark app shells.

More Black color definitions

Black (#000000): Black (#000000) is a very dark black with a muted character. It pairs well with neutrals and holds up in luxury fashion chrome.
Eerie Black (#1B1B1B): Eerie Black (#1B1B1B) brings a muted, very dark note to the black family. Its RGB mix (27, 27, 27) skews toward muted black work—especially photography overlays.
Raisin Black (#242124): Reach for Raisin Black (#242124) when you need a very dark black that feels muted. Around HSL(300, 4%, 13%), it stays useful for luxury fashion chrome.
Outer Space (#414A4C): Outer Space (#414A4C) lands as a deep black—muted enough for premium product photography mats. Its RGB mix (65, 74, 76) skews toward muted black work—especially premium product photography mats.
Dark Charcoal (#333333): Dark Charcoal (#333333) is a deep black with a muted character. Around HSL(0, 0%, 20%), it stays useful for dark theme surfaces.
Graphite (#383838): Graphite (#383838) brings a muted, deep note to the black family. On screens it stays readable for OLED-friendly app shells when contrast is checked.
Black Olive (#3B3C36): Designers pick Black Olive (#3B3C36) as a deep black accent with a muted vibe. Around HSL(69, 5%, 22%), it stays useful for high-contrast type on light UI.
Black Coffee (#3B2F2F): Black Coffee (#3B2F2F) lands as a deep black—dramatic enough for premium product photography mats. On screens it stays readable for photography overlays when contrast is checked.
Black Bean (#3D0C02): Black Bean (#3D0C02) is a very dark black with a dramatic character. It pairs well with neutrals and holds up in luxury fashion chrome.
Black Chocolate (#1B1811): Black Chocolate (#1B1811) brings a dramatic, very dark note to the black family. Its RGB mix (27, 24, 17) skews toward dramatic black work—especially photography overlays.
Licorice (#1A1110): Reach for Licorice (#1A1110) when you need a very dark black that feels dramatic. Around HSL(5, 23%, 8%), it stays useful for luxury fashion chrome.
Smoky Black (#100C08): Smoky Black (#100C08) reads as a dramatic very dark black in digital palettes. On screens it stays readable for premium product photography mats when contrast is checked.
Cool Black (#002E63): Cool Black (#002E63) lands as a very dark black—dramatic enough for premium product photography mats. Its RGB mix (0, 46, 99) skews toward dramatic black work—especially premium product photography mats.
Oxford Blue (#002147): Oxford Blue (#002147) is a near-black academic blue. It anchors university brands, formal sites, and high-end dark navigation bars.
Space Cadet (#1D2951): Space Cadet (#1D2951) brings a dramatic, very dark note to the black family. On screens it stays readable for OLED-friendly app shells when contrast is checked.
Dark Navy (#02075D): Reach for Dark Navy (#02075D) when you need a very dark black that feels dramatic. It pairs well with neutrals and holds up in high-contrast type on light UI.
Midnight (#191970): Midnight (#191970) reads as a dramatic very dark black in digital palettes. Its RGB mix (25, 25, 112) skews toward dramatic black work—especially OLED-friendly app shells.
Dark Slate Gray (#2F4F4F): Dark Slate Gray (#2F4F4F) lands as a deep black—dramatic enough for premium product photography mats. On screens it stays readable for photography overlays when contrast is checked.
Davys Gray (#555555): Davys Gray (#555555) is a deep black with a muted character. It pairs well with neutrals and holds up in luxury fashion chrome.
Dim Gray (#696969): Dim Gray (#696969) brings a muted, mid-tone note to the black family. Its RGB mix (105, 105, 105) skews toward muted black work—especially photography overlays.
Paynes Gray (#536878): Reach for Paynes Gray (#536878) when you need a mid-tone black that feels balanced. Around HSL(205, 18%, 39%), it stays useful for luxury fashion chrome.
Stormcloud (#4F666A): Stormcloud (#4F666A) reads as a balanced mid-tone black in digital palettes. On screens it stays readable for premium product photography mats when contrast is checked.
Black Coral (#54626F): Designers pick Black Coral (#54626F) as a mid-tone black accent with a balanced vibe. It pairs well with neutrals and holds up in dark theme surfaces.
Cadet (#536872): Cadet (#536872) lands as a mid-tone black—balanced enough for premium product photography mats. Its RGB mix (83, 104, 114) skews toward balanced black work—especially premium product photography mats.
Independence (#4C516D): Independence (#4C516D) is a deep black with a balanced character. Around HSL(230, 17%, 36%), it stays useful for dark theme surfaces.
Dark Purple (#301934): Dark Purple (#301934) brings a dramatic, very dark note to the black family. On screens it stays readable for OLED-friendly app shells when contrast is checked.
Black Plum (#2C1608): Reach for Black Plum (#2C1608) when you need a very dark black that feels dramatic. It pairs well with neutrals and holds up in high-contrast type on light UI.
Dark Brown (#1A0F0A): Dark Brown (#1A0F0A) reads as a dramatic very dark black in digital palettes. Its RGB mix (26, 15, 10) skews toward dramatic black work—especially OLED-friendly app shells.
Cafe Noir (#4B3621): Designers pick Cafe Noir (#4B3621) as a deep black accent with a dramatic vibe. Around HSL(29, 38%, 21%), it stays useful for high-contrast type on light UI.
Bistre (#3D2B1F): Bistre (#3D2B1F) lands as a deep black—dramatic enough for premium product photography mats. On screens it stays readable for photography overlays when contrast is checked.
Black Shadows (#BFAFB2): Black Shadows (#BFAFB2) is a light black with a muted character. It pairs well with neutrals and holds up in luxury fashion chrome.
Soft Black (#1C1C1C): Soft Black (#1C1C1C) brings a muted, very dark note to the black family. Its RGB mix (28, 28, 28) skews toward muted black work—especially photography overlays.
Ink Black (#0B0B0B): Reach for Ink Black (#0B0B0B) when you need a very dark black that feels muted. Around HSL(0, 0%, 4%), it stays useful for luxury fashion chrome.
Carbon Black (#0A0A0A): Carbon Black (#0A0A0A) reads as a muted very dark black in digital palettes. On screens it stays readable for premium product photography mats when contrast is checked.
Void (#0D0D0D): Designers pick Void (#0D0D0D) as a very dark black accent with a muted vibe. It pairs well with neutrals and holds up in dark theme surfaces.
Night (#0C090A): Night (#0C090A) lands as a very dark black—dramatic enough for premium product photography mats. Its RGB mix (12, 9, 10) skews toward dramatic black work—especially premium product photography mats.
Pitch Black (#0E0E10): Pitch Black (#0E0E10) is a very dark black with a muted character. Around HSL(240, 6%, 5%), it stays useful for dark theme surfaces.
Iron Black (#222222): Iron Black (#222222) brings a metallic, very dark note to the black family. On screens it stays readable for OLED-friendly app shells when contrast is checked.
Ash Black (#2B2B2B): Reach for Ash Black (#2B2B2B) when you need a very dark black that feels muted. It pairs well with neutrals and holds up in high-contrast type on light UI.
Smoke Black (#1F1F1F): Smoke Black (#1F1F1F) reads as a muted very dark black in digital palettes. Its RGB mix (31, 31, 31) skews toward muted black work—especially OLED-friendly app shells.
Shadow (#232B2B): Designers pick Shadow (#232B2B) as a very dark black accent with a dramatic vibe. Around HSL(180, 10%, 15%), it stays useful for high-contrast type on light UI.
Deep Space (#000008): Deep Space (#000008) lands as a very dark black—dramatic enough for premium product photography mats. On screens it stays readable for photography overlays when contrast is checked.
Black Raspberry (#1A0A0A): Black Raspberry (#1A0A0A) is a very dark black with a dramatic character. It pairs well with neutrals and holds up in luxury fashion chrome.
Black Currant (#1C1C1C): Black Currant (#1C1C1C) brings a muted, very dark note to the black family. Its RGB mix (28, 28, 28) skews toward muted black work—especially photography overlays.
Vantablack-ish (#050505): Vantablack-ish (#050505) reads as a muted very dark black in digital palettes. On screens it stays readable for premium product photography mats when contrast is checked.
Slate Near Black (#0F172A): Slate Near Black (#0F172A) lands as a very dark black—dramatic enough for premium product photography mats. Its RGB mix (15, 23, 42) skews toward dramatic black work—especially premium product photography mats.
Zinc Near Black (#18181B): Zinc Near Black (#18181B) is a very dark black with a muted character. Around HSL(240, 5%, 10%), it stays useful for dark theme surfaces.

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.