Shades of White

What this tool does

White is the colour of light, space, and a blank page, and on a screen it is every colour at once, the maximum of all light. It feels like nothing, but designers know better: there is no single white. A layout needs a soft white background, a slightly different white for cards, and faint greys to separate them, and those subtle off-whites are surprisingly hard to pick by eye.

That is what this does. You give it a white, and it builds the whole run of that white 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 whites and the science of the brightest colour there is.

How to use it

1. Set your white. When it loads the tool shows a white and its Hex. Swap in your own with Change Color or the Color Picker, or type a hex in.
2. Set the number of shades. The Color Shades box holds the count, ten by default. Raise it for finer steps between white and grey.
3. Read the values. Every shade comes with its HEX, RGB, HSL, and HSV beside it, ready to copy.

Because white is already as light as a colour goes, its range runs downward, darkening toward grey. That gives you the off-whites and pale greys that quietly structure a clean, light design.

How it works

The tool runs on TinyColor, a colour library that handles lightening and darkening a colour precisely. It takes your white and steps it down toward black, giving you a run of off-whites and soft greys, each written out in the four code formats.

This is why a white tool is really a tool for off-whites. Pure white has nowhere lighter to go, so the useful part of its range is the set of barely-there greys just below it, the subtle surface colours that let a light interface have depth without ever looking grey.

The colour that reflects everything

White is the exact opposite of black. Where a black object soaks up light, a white object reflects nearly all of it back, and because white light is really a mixture of every colour, a white surface bounces back the whole spectrum at once. That is what your eye reads as white. And just as nothing is perfectly black, nothing is perfectly white either, every real surface absorbs at least a little.

That has produced a quiet race for the whitest white, with a practical payoff. The standard bright white pigment is titanium dioxide, but researchers have since made ultra-white paints, using materials like barium sulphate, that reflect around 98 percent of sunlight. Painted on a roof, a white that bright bounces away so much heat that it can cool the building beneath it, turning the colour into a tool against rising temperatures. On screen, white is simpler again, #FFFFFF is every pixel at full strength.

The named whites, with hex codes

Pure white is a single value, but the off-whites each lean warm or cool. Here are the common ones, with a hex for each.

• White (#FFFFFF): pure white, every colour at full strength.
• Snow (#FFFAFA) and Seashell (#FFF5EE): off-whites with a faint warm tint.
• Ghost White (#F8F8FF): an off-white with a cool, bluish lean.
• White Smoke (#F5F5F5): a soft, very pale grey.
• Floral White (#FFFAF0) and Ivory (#FFFFF0): warm, soft, creamy whites.

Here is the part that matters in practice. Pure #FFFFFF can glare on a bright screen, so designers rarely use it for large backgrounds. A white with a hint of warmth feels cosy and easy on the eye, while a white with a hint of cool feels clean and technical, and choosing between them quietly sets the whole mood of a design.

What white says

White is the colour of purity and cleanliness. It reads as fresh, simple, and honest, the colour of clean sheets, blank paper, and open space, which is why it sits at the heart of minimalism and of so much modern, premium design. Used as space rather than as a colour, white makes everything else feel calmer and more considered.

Its meaning is not universal, though. In much of the West white signals weddings, peace, and new beginnings, while in parts of Asia it is the colour of mourning. And too much of it can tip from clean into cold, sterile, or empty. The trick is that white is most powerful as breathing room, the quiet space that gives the rest of a design somewhere to rest.

Building a palette from your white

White's job is usually to be the canvas. Its sharpest partner is black, the foundation of clean typography, and white with a single strong accent colour makes that colour feel crisp and modern. Mostly, though, white works by getting out of the way and giving everything else room to breathe.

To build a working set, use the steps from this tool as the spine: a soft off-white as the main background, a slightly deeper off-white for cards and panels, and faint greys for borders and dividers. Then bring in your text colour and one accent. Keeping the base in this off-white family gives a light design real depth while holding on to that clean, open feel.

Questions people ask

What is the hex code for white?

Pure white is #FFFFFF, with red, green, and blue light all at full strength. It is one of the named CSS colours, so you can also just write "white" in your stylesheet.

What is the whitest white?

The standard white pigment is titanium dioxide, but researchers have made ultra-white paints, using materials such as barium sulphate, that reflect around 98 percent of sunlight, bright enough to passively cool a building.

Should I use pure white for backgrounds?

Often a slight off-white is easier on the eye than pure #FFFFFF, which can glare on a bright screen. A hint of warmth feels cosy, a hint of cool feels clean, and both reduce the harshness of pure white.

Can I use my own white?

Yes. Paste your exact white in as the base, and the tool builds the darker steps of that colour, so you get a matching set of off-whites and pale 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. White, light reflection, the whitest whites, and symbolism. Wikipedia. https://en.wikipedia.org/wiki/White