HCHTML Color

Shades of white

Off-whites are whites with a trace of hue: ivory leans yellow, snow leans red, azure and alice blue lean cool. They soften a page without anyone consciously noticing a color.

white · #FFFFFF

16 white color names

Every CSS named color in the white family, lightest to darkest. Each name works directly in CSS. Open any swatch for its full conversions, 50–950 scale and harmonies.

white#ffffffrgb(255 255 255)oklch(1 0 0)ivory#fffff0rgb(255 255 240)oklch(0.996 0.02 106.8)mintcream#f5fffargb(245 255 250)oklch(0.991 0.012 164.8)azure#f0ffffrgb(240 255 255)oklch(0.989 0.016 196.9)snow#fffafargb(255 250 250)oklch(0.989 0.005 17.2)floralwhite#fffaf0rgb(255 250 240)oklch(0.986 0.014 84.6)honeydew#f0fff0rgb(240 255 240)oklch(0.985 0.025 145.4)ghostwhite#f8f8ffrgb(248 248 255)oklch(0.981 0.009 286.2)seashell#fff5eergb(255 245 238)oklch(0.976 0.014 57.6)aliceblue#f0f8ffrgb(240 248 255)oklch(0.975 0.013 244.3)oldlace#fdf5e6rgb(253 245 230)oklch(0.972 0.022 83.3)whitesmoke#f5f5f5rgb(245 245 245)oklch(0.97 0 0)lavenderblush#fff0f5rgb(255 240 245)oklch(0.968 0.017 355.1)beige#f5f5dcrgb(245 245 220)oklch(0.964 0.033 107)linen#faf0e6rgb(250 240 230)oklch(0.96 0.017 67.6)antiquewhite#faebd7rgb(250 235 215)oklch(0.947 0.031 75.2)

Tailwind white scales

The Tailwind v4 default palette families closest to white, 50 to 950.

Using white in a UI

Use an off-white as the page background and pure white for raised surfaces such as cards, or the reverse, to create depth without borders.

white-colors.css
:root {
  --white: oklch(1 0 0); /* #ffffff */
  --ivory: oklch(0.996 0.02 106.8); /* #fffff0 */
  --mintcream: oklch(0.991 0.012 164.8); /* #f5fffa */
  --azure: oklch(0.989 0.016 196.9); /* #f0ffff */
  --snow: oklch(0.989 0.005 17.2); /* #fffafa */
  --floralwhite: oklch(0.986 0.014 84.6); /* #fffaf0 */
  --honeydew: oklch(0.985 0.025 145.4); /* #f0fff0 */
  --ghostwhite: oklch(0.981 0.009 286.2); /* #f8f8ff */
  --seashell: oklch(0.976 0.014 57.6); /* #fff5ee */
  --aliceblue: oklch(0.975 0.013 244.3); /* #f0f8ff */
  --oldlace: oklch(0.972 0.022 83.3); /* #fdf5e6 */
  --whitesmoke: oklch(0.97 0 0); /* #f5f5f5 */
  --lavenderblush: oklch(0.968 0.017 355.1); /* #fff0f5 */
  --beige: oklch(0.964 0.033 107); /* #f5f5dc */
  --linen: oklch(0.96 0.017 67.6); /* #faf0e6 */
  --antiquewhite: oklch(0.947 0.031 75.2); /* #faebd7 */
}
Generate a white scaleBuild a palette

Frequently asked questions

What is the hex code for white?
The CSS keyword white is #FFFFFF, which is rgb(255 255 255) or oklch(1 0 0). Tailwind's neutral-500 is #737373, a softer white that many design systems use instead.
How many shades of white have CSS color names?
This page lists 16 CSS named colors in the white family, from white (#FFFFFF) at the light end to antiquewhite (#FAEBD7) at the dark end. Every one can be used directly in CSS by name.
What colors go well with white?
White pairs well with blue, red and green. For a guaranteed match, open any white shade and use its complementary, analogous or triadic palette, all calculated in OKLCH.
How do I make a white color scale for my design system?
Pick a white you like on this page, open it in the color scale generator, and export an 11-step 50–950 ramp as CSS variables, JSON or a Tailwind v4 theme. The ramp is built in OKLCH, so every step looks evenly spaced.

Other color families

RedOrangeYellowGreenTealBluePurplePinkBrownGray