Skip to content
AI Color

Shades of White

Eleven steps of white from the lightest tint to the darkest shade, all sharing hue 60° and 12% saturation so they work together as a set. Every white has a temperature, and mixing two of them in one layout is immediately noticeable.

Using a white ramp in a design system

A ramp like this one is the unit of work in a modern design system. Rather than choosing individual colors for each component, you assign roles to steps: the 50 and 100 steps become backgrounds and hover states, the 200 and 300 steps become borders and dividers, the 500 step is the brand color itself, and the 700 through 900 steps carry text and pressed states.

Because every step here shares a hue and saturation, the resulting interface reads as one coherent surface. The moment you hand-pick a color that sits outside the ramp, it will look subtly wrong even to people who cannot articulate why.

Check the steps you intend to pair before you ship them. The lightest tints will not carry text on white, and the darkest shades will not carry white text at small sizes in every case. Run them through the contrast checker once and record the results.

White color palettes

Full palettes built around white, ready to copy as CSS or Tailwind tokens.

  • White Sunlit Signal

    338

    White Sunlit Signal color palette using #f4f1f0, #e8ebf3, #c3d0db, #b1c2d3, #a497c3.

  • White Golden Drift

    323

    White Golden Drift color palette using #f2f4f5, #dee5ea, #c4cfdc, #adc0d1, #a497c3.

  • White Velvet Terrace

    283

    White Velvet Terrace color palette using #f4f1f0, #e7eaf3, #c6d3dd, #b0c1d3, #b3a3cc.

  • White Washed Harbour

    239

    White Washed Harbour color palette using #f3f4f7, #f4f1f0, #dee4ea, #afc3d2, #9fa8d0.

  • White Antique Current

    231

    White Antique Current color palette using #f2f4f6, #f4f1f0, #dde3e9, #b5c3d5, #a3add1.

  • White Quiet Alcove

    229

    White Quiet Alcove color palette using #f3f5f6, #dee4ea, #bfcbd8, #abbbd0, #a797c4.

  • White Smoked Orchard

    197

    White Smoked Orchard color palette using #f3f5f6, #dde3e9, #b8c7d7, #a3acd2, #9e8aad.

  • White Velvet Prairie

    186

    White Velvet Prairie color palette using #f3f5f7, #f4f1f0, #dae1e7, #c4d1dc, #b0bfd3.

See all white color palettes

Shades of other colors

Shades of white FAQ

How many shades of white are there?

In principle there are millions, because a shade is any value along the lightness axis of a hue. In practice a design system needs about eleven steps, which is exactly what this page provides: five tints above the base, the base itself, and five shades below it.

What is the hex code for white?

The base white on this page is #f8f8f6, which is hsl(60, 12%, 97%). Every other swatch keeps the same hue and saturation and varies only lightness, so they all belong together.

What is the difference between a tint, a tone and a shade?

A tint is the color mixed with white, a shade is the color mixed with black, and a tone is the color mixed with grey, which lowers saturation. This page shows tints and shades; use the color mixer if you want tones.

Which shade of white should I use for text?

Use the darkest swatch that still reads as white rather than black. On this page that is generally the 800 or 900 step, which reaches 14.66:1 against white.