19 Shades of White with Hex Codes

Named White Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

WhiteColor Chart: Hex, RGB, HSL & CMYK

Every white above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

White Scale from Light to Dark

A 12-step lightness scale built from the core white hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate white design tokens.

What White Communicates

Pure white is the brightest thing a display can show, and a full page of it can feel clinical or glaring in a dark room. Off-whites between #FAFAFA and #F5F5F5 keep the impression of white while softening the page, and warm whites like ivory and seashell make a layout feel printed rather than screen-native. Every white here fails contrast as a text color on light backgrounds — whites are surfaces, not type.

Where white works well

• Page backgrounds and card surfaces, usually one step below #FFFFFF
• Text on dark backgrounds, where pure white is often too harsh and #F5F5F5 reads better
• Layered surfaces, where each level steps slightly further from pure white
• Warm, paper-like layouts using ivory and floral white

Colors that pair with white

Copy the White Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --white-bone-white: #E3DAC9;
  --white-pearl: #EAE0C8;
  --white-eggshell: #F0EAD6;
  --white-antiquewhite: #FAEBD7;
  --white-linen: #FAF0E6;
  --white-whitesmoke: #F5F5F5;
  --white-oldlace: #FDF5E6;
  --white-chalk: #F7F7F2;
  --white-seashell: #FFF5EE;
  --white-aliceblue: #F0F8FF;
  --white-ghostwhite: #F8F8FF;
  --white-off-white: #FAF9F6;
  --white-floralwhite: #FFFAF0;
  --white-cotton: #FBFBF9;
  --white-snow: #FFFAFA;
  --white-azure: #F0FFFF;
  --white-mintcream: #F5FFFA;
  --white-ivory: #FFFFF0;
  --white-white: #FFFFFF;
}

White Color Questions