New designers often start building palettes with the exciting colors: a vibrant blue, a bold orange, a rich purple. Then they realize they have no background color for their page and no text color for their content. Base colors are the foundation that makes everything else work.
Light Base
Your light base is the page background color. It covers more pixels than any other color in your palette. Pure white (#ffffff) works but can feel sterile. A warm off-white (#faf9f7) or cool blue-white (#f8f9fb) adds subtle personality while remaining functionally invisible. The light base should be neutral enough that every other color in your palette looks good against it.
Dark Base
Your dark base is primarily your text color. It also anchors footers, dark sections, and overlays. Pure black (#000000) is harsh. A warm charcoal (#1a1a2e) or cool slate (#1e293b) is more comfortable for extended reading while maintaining excellent contrast ratios against your light base.
The Contrast Foundation
Together, your light and dark bases form the contrast foundation of your entire site. Every chromatic color (primary, supporting, accents) needs to work against at least one of these bases. If your primary passes WCAG against the light base, it is usable for text and buttons on standard pages. If it also passes against the dark base, it is usable in dark sections and dark mode.
PaletteRx's Health Score
PaletteRx checks for the presence of light and dark bases as part of the Health Score. A palette without bases automatically loses 20% of its health score because the tool recognizes that chromatic colors without neutral anchors are not production-ready.