Shades of Black

What this tool does

Black is the most powerful colour there is, elegant and heavy at once, and on a screen it is simply the absence of light. The thing is, you rarely want just one black. A real design needs a near-black for text, a soft charcoal for surfaces, and a range of dark greys in between, and judging those by eye is hard.

That is what this does. You give it a black, and it builds the whole run of that black in even steps, each with its HEX, RGB, HSL, and HSV codes ready to copy. Below the tool there is a reference of the named blacks and the strange science of the darkest colour of all.

How to use it

1. Set your black. The tool opens on a black with its Hex shown. Use Change Color or the Color Picker to set another, or paste a hex in.
2. Pick how many shades. The Color Shades number sets the total, ten to start, and a higher value gives you finer steps.
3. Copy the codes. Each shade lists its HEX, RGB, HSL, and HSV, ready to use in your project.

Because black is already as dark as a colour goes, its range really runs upward, lightening toward white. That gives you the dark charcoals and greys you actually need for text, borders, and surfaces.

How it works

The tool runs on TinyColor, a colour library that steps a colour from light to dark cleanly. It takes your black and opens it up toward white in even steps, giving you the run of greys that sit above it, each written out in the four code formats.

This is why a black tool is really a greyscale tool. Pure black has nowhere darker to go, so the useful part of its range is the set of dark greys just above it, the soft blacks and charcoals that a real interface leans on far more than a stark, pure black.

The colour that absorbs everything

Black is what you see when almost no light reaches your eye. A black object is one that absorbs nearly all the light falling on it and reflects almost none back, which is the opposite of how every other colour works. In fact, no everyday object is perfectly black, they all bounce back a little light, and a truly perfect black exists only in theory.

That has led to a genuine race for the blackest black. The most famous result is Vantablack, a coating grown from carbon nanotubes that absorbs up to 99.965 percent of light, so little escapes that a coated object looks like a flat, featureless void. It even sparked an art-world feud: when the artist Anish Kapoor secured exclusive rights to use it in art, another artist, Stuart Semple, responded by making his own ultra-black paint and selling it to everyone except Kapoor. On screen, of course, black is simpler, #000000 is just the pixel switched fully off.

The named blacks, with hex codes

True black is a single value, but the useful near-blacks each have their own character. Here are reference points, with a hex for each.

• Black (#000000): pure black, no light at all, the darkest a screen can show.
• Soft Black (around #1A1A1A): a very dark grey, gentler than pure black for text.
• Charcoal (#36454F): a dark grey with a slight blue lean.
• Jet (around #343434) and Onyx (around #353839): deep, near-black greys.

Here is a tip that matters more than it sounds. Pure #000000 text on a white background can feel harsh, with an almost vibrating level of contrast. Many designers use a soft near-black instead, something like #1A1A1A, which still reads as black but is noticeably easier on the eye, exactly the kind of value the steps above black give you.

What black says

No colour carries more authority than black. It reads as powerful, elegant, sophisticated, and serious, the colour of the little black dress, the luxury logo, and black-tie formality. It is timeless and goes with everything, which is why it is the safest, strongest choice for anything that wants to feel premium and considered.

It has weight in every sense. Black is the heaviest colour visually, so it dominates a layout and demands restraint, and it carries strong associations of mystery and, in much of the West, of death and mourning. Used well, that gravity is exactly the point, black makes everything around it feel more deliberate. Used carelessly, it can feel oppressive, so it works best with plenty of space around it.

Building a palette from your black

Black is the ultimate anchor. Its classic partner is white, giving the cleanest, sharpest contrast there is, which is why black-on-white is the default of typography itself. Black and gold is the shorthand for luxury, and black with a single bold accent colour makes that accent feel modern and intentional.

To build a working set, use the steps from this tool as the spine: a soft near-black for body text, your darker greys for surfaces and borders, and pure black kept for the moments that need maximum weight. Let neutrals and white space do most of the work, and bring in one accent for life. Because black is so dominant, a little structure goes a very long way.

Questions people ask

What is the hex code for black?

Pure black is #000000, with no red, green, or blue light at all. It is one of the named CSS colours, so you can also just write "black" in your stylesheet.

What is the blackest black?

The best known is Vantablack, a carbon-nanotube coating that absorbs up to 99.965 percent of light, making a surface look like a featureless void. No ordinary material or screen comes close, since real objects always reflect a little light.

Should I use pure black for text?

Often a soft near-black, such as #1A1A1A, is easier on the eye than pure #000000, which can feel harshly high in contrast on a white background. It still reads as black but is gentler to read.

Can I use my own black?

Yes. Paste your exact black in as the base, and the tool builds the lighter steps of that colour, so you get a matching set of near-blacks, charcoals, and greys.

References

1. World Wide Web Consortium (W3C), CSS Color Module Level 4. https://www.w3.org/TR/css-color-4/
2. TinyColor (Brian Grinstead). Documentation. https://github.com/bgrins/TinyColor
3. Black, light absorption, the blackest blacks, and symbolism. Wikipedia. https://en.wikipedia.org/wiki/Black