#hexpedia

Named color category

White Colors

White and near-white colors create open surfaces, high contrast with dark text, and clean reference layouts.

Indexed white hex colors

A reference grid selected from Hexpedia CSS, xkcd, Material, Tailwind, and generated static color datasets.

Reference #FFFFFF#FFFFFFPale Grey#FDFDFEMaterial Gray 50#FAFAFATailwind Stone 50#FAFAF9Tailwind Gray 50#F9FAFBTailwind Slate 50#F8FAFCSnow#FFFAFAMaterial Gray 100#F5F5F5Notion Gray#F7F6F3Tailwind Stone 100#F5F5F4Tailwind Zinc 100#F4F4F5Tailwind Gray 100#F3F4F6Ghost White#F8F8FFTailwind Slate 100#F1F5F9Mint Cream#F5FFFATailwind Sky 50#F0F9FFVery Light Pink#FFF4F2Tailwind Teal 50#F0FDFAAzure#F0FFFFAlice Blue#F0F8FFTailwind Red 50#FEF2F2Floral White#FFFAF0Seashell#FFF5EEMaterial Gray 200#EEEEEEMaterial Blue Gray 50#ECEFF1Tailwind Pink 50#FDF2F8Tailwind Purple 50#FAF5FFTailwind Blue 50#EFF6FFTailwind Rose 50#FFF1F2Tailwind Orange 50#FFF7ED
Tailwind Cyan 50#ECFEFFTailwind Green 50#F0FDF4Material Brown 50#EFEBE9Tailwind Fuchsia 50#FDF4FFLavender Blush#FFF0F5Tailwind Violet 50#F5F3FFTailwind Emerald 50#ECFDF5Ivory#FFFFF0Linen#FAF0E6Tailwind Indigo 50#EEF2FFTailwind Amber 50#FFFBEBMaterial Teal 50#E0F2F1Tailwind Gray 200#E5E7EBMaterial Light Green 50#F1F8E9Old Lace#FDF5E6Tailwind Stone 200#E7E5E4Material Green 50#E8F5E9Tailwind Neutral 200#E5E5E5Material Cyan 50#E0F7FAMaterial Red 50#FFEBEEMaterial Deep Orange 50#FBE9E7Material Blue 50#E3F2FDMaterial Light Blue 50#E1F5FETailwind Slate 200#E2E8F0Honeydew#F0FFF0Tailwind Zinc 200#E4E4E7Material Indigo 50#E8EAF6Tailwind Sky 100#E0F2FETailwind Yellow 50#FEFCE8Material Lime 50#F9FBE7

Light White

Reference #FFFFFF#FFFFFFPale Grey#FDFDFEMaterial Gray 50#FAFAFATailwind Stone 50#FAFAF9Tailwind Gray 50#F9FAFBTailwind Slate 50#F8FAFCSnow#FFFAFAMaterial Gray 100#F5F5F5Notion Gray#F7F6F3Tailwind Stone 100#F5F5F4Tailwind Zinc 100#F4F4F5Tailwind Gray 100#F3F4F6

Dark White

Reference #FFFFFF#FFFFFFPale Grey#FDFDFEMaterial Gray 50#FAFAFATailwind Stone 50#FAFAF9Tailwind Gray 50#F9FAFBTailwind Slate 50#F8FAFCSnow#FFFAFAMaterial Gray 100#F5F5F5Notion Gray#F7F6F3Tailwind Stone 100#F5F5F4Tailwind Zinc 100#F4F4F5Tailwind Gray 100#F3F4F6

Muted White

Reference #FFFFFF#FFFFFFPale Grey#FDFDFEMaterial Gray 50#FAFAFATailwind Stone 50#FAFAF9Tailwind Gray 50#F9FAFBMaterial Gray 100#F5F5F5Notion Gray#F7F6F3Tailwind Stone 100#F5F5F4Tailwind Zinc 100#F4F4F5Tailwind Gray 100#F3F4F6Material Gray 200#EEEEEEMaterial Blue Gray 50#ECEFF1

Vibrant White

Snow#FFFAFAGhost White#F8F8FFMint Cream#F5FFFATailwind Sky 50#F0F9FFVery Light Pink#FFF4F2Tailwind Teal 50#F0FDFAAzure#F0FFFFAlice Blue#F0F8FFTailwind Red 50#FEF2F2Floral White#FFFAF0Seashell#FFF5EETailwind Pink 50#FDF2F8

How designers use white

White colors are most useful when they are treated as a family rather than a single swatch. Start with the central values for accents, then use lighter versions for surfaces and darker versions for text, borders, or active states. In product interfaces, white can guide attention, but it should not carry meaning alone; pair it with labels, spacing, and predictable hierarchy. For editorial pages, this family can create a recognizable mood while still leaving room for neutral backgrounds. Always test contrast before using any white value behind body text, because perceived brightness can shift quickly across adjacent hues.

Combinations with white

Palette pages use White as the nearest stable anchor for this color family.

Amber + White#FFBF00#FFFFFFBeige + White#F5F5DC#FFFFFFBlack + White#000000#FFFFFFBlue + White#0000FF#FFFFFFBrown + White#8B4513#FFFFFFCyan + White#00FFFF#FFFFFFGold + White#FFD700#FFFFFFGray + White#808080#FFFFFF

Build with white in CSS Forge

Move from reference values into practical CSS experiments with pre-filled generator links.

Build a white gradientTint a shadow