Black Colors
Pure black, near-black and off-black — the complete reference for text, surfaces and dark themes. Learn why most design systems avoid #000000 and what to use instead.
Black color reference
A systematic black scale, from pure black to near-blacks that designers actually ship.
| Name | HEX | RGB | Character | Contrast on white | |
|---|---|---|---|---|---|
| Pure black | #000000 | 0, 0, 0 | Zero luminance | 21.0:1 | |
| Gray 950 | #030712 | 3, 7, 18 | Cool neutral | 20.4:1 | |
| Slate 900 | #0F172A | 15, 23, 42 | Cool, blue-tinted | 18.8:1 | |
| Gray 900 | #111827 | 17, 24, 39 | Cool, near-neutral | 18.8:1 | |
| Zinc 900 | #18181B | 24, 24, 27 | True neutral | 18.1:1 | |
| Stone 900 | #1C1917 | 28, 25, 23 | Warm, brown-tinted | 17.3:1 | |
| Gray 800 | #1F2937 | 31, 41, 55 | Cool, softer dark | 14.4:1 | |
| Zinc 800 | #27272A | 39, 39, 42 | Neutral dark surface | 13.0:1 | |
| Stone 800 | #292524 | 41, 37, 36 | Warm dark surface | 12.4:1 | |
| Gray 700 | #374151 | 55, 65, 81 | Dark gray (borders) | 10.3:1 |
Named blacks
Common named blacks and near-blacks from CSS and design practice.
Why designers avoid pure black
Pure black on pure white is the highest contrast possible — and it is rarely the best choice.
The problem with #000000 on white
- ! Maximum 21:1 contrast can cause halation — text edges glow, especially for readers with astigmatism.
- ! Extended reading becomes tiring on screens.
- ! Pure black on OLED displays can trigger smearing when scrolling.
- ! Feels harsh compared to the brand-tinted darks that modern interfaces use.
What to use instead
- #111827 — cool neutral, the default “black” in most Tailwind projects.
- #0F172A — slate-900, blue-tinted. Perfect for tech and SaaS.
- #1C1917 — stone-900, warm and paper-like. Great for editorial.
- #18181B — zinc-900, true neutral. Balanced and universal.
Black in design and accessibility
Black is the anchor of every typographic system. It represents the highest possible contrast and the strongest possible emphasis. In modern design it is used in three distinct ways: as pure black in places that need maximum contrast (billboards, film titles, high-contrast mode), as near-black for body text and UI, and as off-black for dark-theme surfaces.
Common uses in interfaces
- Headings and emphasis — the strongest visual weight in a typographic hierarchy.
- Dark-theme surfaces — off-blacks (not pure #000) soften OLED glare and improve battery life.
- Icon and logo work — black works on almost any background, which makes it ideal for monochrome marks.
- High-contrast accessibility mode — pure black is the only acceptable background when users enable high-contrast settings.
Accessibility notes
Black on white reaches the maximum possible contrast of 21:1 and easily passes AAA. But pure black can feel harsh — many high-quality interfaces use #111827 or #1F2937 for body copy instead, achieving 14:1 to 19:1 contrast, still comfortably above the 7:1 AAA threshold, while remaining visually comfortable. In dark mode, avoid #000 surfaces; use off-blacks between #0F172A and #1F2937 with light gray text on top.
Frequently asked questions
What is the purest black hex code?
Pure black is #000000 — RGB (0, 0, 0), zero luminance. It is technically the darkest color displayable on any screen. But most modern interfaces avoid it and use near-blacks such as #111827 or #0F172A.
Why do designers avoid pure black?
Pure black on pure white creates the maximum contrast of 21:1, which can feel harsh and cause halation — text edges glow, especially for readers with astigmatism. Near-blacks soften the contrast to a comfortable 15:1–18:1 range, which still passes AAA easily while feeling more comfortable to read.
What is the difference between pure black and off-black?
Pure black is #000000 with zero R, G and B. Off-black has small, often tinted values — #0F172A leans blue, #18181B is neutral, #1C1917 leans warm. Off-blacks are used for surfaces, text and premium dark themes.
Is black accessible for text?
Black on white reaches the maximum possible contrast of 21:1 and easily passes AAA. But for long-form reading, most designers prefer #111827 or #1F2937 for body text — still well above the AAA threshold, but visually softer.
What is the best black for dark mode?
For dark-mode surfaces, use off-blacks between #0B0F17 and #1F2937. Pure black surfaces look harsh on OLED and cause “smearing” when scrolling. Pair dark surfaces with light gray text (like #F1F5F9 or #E5E7EB) instead of pure white.