White Colors
Pure white and its off-white variants — the surfaces, backgrounds and cards that carry every interface. Learn why modern design systems rarely use pure #FFFFFF.
White and off-white reference
A systematic white scale from pure white down to near-gray. Perfect for surfaces, cards, dividers and layered UI.
| Name | HEX | RGB | Character | Contrast on black | |
|---|---|---|---|---|---|
| Pure white | #FFFFFF | 255, 255, 255 | Absolute white | 21.0:1 | |
| Whisper white | #FEFEFE | 254, 254, 254 | Imperceptible off-white | 20.9:1 | |
| Snow | #FCFCFC | 252, 252, 252 | Very subtle off-white | 20.7:1 | |
| Ivory (warm) | #FEFCE8 | 254, 252, 232 | Warm yellow tint | 20.5:1 | |
| Cream | #FEF9C3 | 254, 249, 195 | Warm, softer cream | 20.0:1 | |
| Slate 50 (cool) | #F8FAFC | 248, 250, 252 | Cool blue-tinted | 19.7:1 | |
| Gray 50 (neutral) | #F9FAFB | 249, 250, 251 | Neutral off-white | 19.9:1 | |
| Stone 50 (warm) | #FAFAF9 | 250, 250, 249 | Warm off-white | 19.9:1 | |
| White smoke | #F5F5F5 | 245, 245, 245 | Light gray surface | 19.5:1 | |
| Gray 100 | #F3F4F6 | 243, 244, 246 | Subtle surface tint | 19.2:1 |
Named whites
Common named whites and off-whites from CSS and design practice.
Why designers avoid pure white
Pure white is the brightest color any screen can display — and it is rarely the best surface color.
The problem with #FFFFFF everywhere
- ! Feels clinical and harsh, especially on large surfaces.
- ! Pure white background + pure black text = 21:1 contrast, which can cause halation.
- ! Creates no visual layering — cards, pages and modals all look identical.
- ! On bright displays, pure white can cause discomfort over long reading sessions.
What to use instead
- #F9FAFB — neutral off-white for page backgrounds.
- #F8FAFC — cool off-white for tech and SaaS interfaces.
- #FAFAF9 — warm off-white for editorial and lifestyle.
- #FFFFFF — reserved for elevated surfaces (cards, modals) that sit on off-white backgrounds.
White in design and accessibility
White is the substrate of modern interface design. It creates space, separates content, establishes hierarchy and provides the neutral canvas on which every other color appears more vivid. In well-designed interfaces, white is not just a color — it is a strategic tool that controls density, rhythm and breathing room.
Common uses in interfaces
- Page backgrounds — often an off-white like #F9FAFB rather than pure white.
- Cards and elevated surfaces — pure white sitting on an off-white page to create layering.
- Negative space — the empty areas around content that make it readable.
- Dark theme text — light text on dark surfaces, often #E5E7EB rather than pure white.
Accessibility notes
White text only works on dark backgrounds. On light grays, white fails contrast completely. For dark themes, white on #111827 reaches about 18.8:1 — passes AAA. But pure white text on pure black surfaces can be tiring on screens; many dark themes use #E5E7EB or #F1F5F9 for body text — still comfortably above 14:1 while reducing halation.
Frequently asked questions
What is the purest white hex code?
Pure white is #FFFFFF — RGB (255, 255, 255), the brightest color displayable. It is the maximum luminance a screen can produce. Modern interfaces often prefer off-whites like #FAFAFA, #F9FAFB or #F8FAFC — they read as white but feel softer and more refined.
What is the difference between pure white and off-white?
Pure white has R, G and B all at 255. Off-white reduces one or more channels slightly — for example #FAFAFA (neutral), #FEFCE8 (warm yellow-tinged), or #F8FAFC (cool blue-tinged). Off-whites are used for surfaces, cards and content backgrounds to reduce glare and add subtle warmth or coolness.
What colors go with white?
White works with everything — it is the universal neutral. Warm whites pair well with browns, terracottas and warm grays. Cool whites pair with blues, grays and cool pastels. Pure white is often avoided in large surfaces because it can feel clinical; off-whites feel more comfortable and add character.
Is white accessible for text?
White text is only accessible on dark backgrounds. On mid or light grays it fails contrast. For dark themes, white on #111827 or #1F2937 reaches about 17–19:1 — passes AAA. But pure white on pure black (21:1) can be tiring; many dark themes use #E5E7EB or #F1F5F9 for body text.
Why do designers avoid pure white?
Pure white is the brightest color and feels harsh on large surfaces. Interfaces layered on pure white lose hierarchy because cards, modals and pages all look identical. Off-white backgrounds with pure white elevated surfaces create the subtle layering that makes modern interfaces feel crafted.