Shades of White: Hex, RGB, and HSL Codes

What counts as a shade of white?

White #FFFFFF is a single value, so a page of white shades is really a page of off-whites — 17 of them, each carrying a small amount of hue. The warm side holds Ivory #FFFFF0, Cream #FFFDD0, Linen #FAF0E6, and Parchment #FCF5E5; the cool side holds GhostWhite #F8F8FF and AliceBlue #F0F8FF; and Snow #FFFAFA sits between them with the faintest pink.

Choosing between them is one of the highest-leverage decisions in a layout. WhiteSmoke #F5F5F5 is the standard surface tint for cards and panels because it separates from #FFFFFF without reading as gray. Eggshell #F0EAD6, Alabaster #EDEADE, and Bone #E3DAC9 have enough yellow to look like paper, which is why editorial and print-inspired designs reach for them — and why they make a screen feel warmer without any visible color.

How to use these color codes

1. Find your shade. The list runs roughly light to dark, with a live preview beside every name — scan it the way you would a paint chart.
2. Click a code to copy. Each row carries the hex, RGB, and HSL value of that color. One click copies that exact string to your clipboard.
3. Paste it into your project. Drop the hex into CSS, Figma, Photoshop, or a document. Clicking the swatch itself copies the hex, so you can grab colors without aiming at the small text.

What white communicates

White reads as space rather than as color. It signals cleanliness, simplicity, and openness, and in layout its main job is negative space — the amount of white around an element does more to communicate quality than the element itself usually does.

The warm-cool split carries real meaning. Cool whites like GhostWhite and AliceBlue read as clinical and technical, the register of medical and software design. Warm whites like Ivory, Cream, and Old Lace #FDF5E6 read as traditional, comfortable, and expensive — the palette of stationery, weddings, and heritage brands. Pure #FFFFFF sits between the two and reads as modern and slightly stark, which is why it works for minimal design and rarely for anything meant to feel cozy.

Honest limitations

A hex code is exact, but the color you see is not. The same #FF0000 looks different on an OLED phone, a cheap office monitor, and a printed page, because each device has its own gamut and calibration. Treat these values as a precise starting point for screens, and always check a physical proof before committing a color to print — CMYK cannot reproduce every shade listed here.

Color names are a mix of two things. Entries badged CSS are official CSS named colors: the name itself works in a stylesheet and every browser resolves it to exactly that hex. The rest are conventional names — Burgundy, Sage, Espresso — that no standards body owns. Their hex values follow the most widely cited convention, but another chart may place them a few percent lighter or darker, so quote the hex rather than the name when the exact value matters.

Why is it free?

FreeToGenerate.com keeps every tool genuinely free. This page is a static list of color values rendered in your browser — nothing to install, no account, no premium tier holding back the darker half of the palette. Copy as many codes as you need, as often as you need.

Other color families

redorangeyellowgreencyanbluepurplepinkbrowngrayblackAll color families