See a palette on real layouts. Each colour gets a role; change any role, switch to dark, and check that the text stays readable.
How roles work
Roles
Background, surface, text, primary, secondary and accent. Roles you set in the palette generator are used first; the rest are chosen by lightness and colourfulness, and you can change every one.
Light and dark
Dark mode puts the darkest suitable colour behind the content and the lightest in front. Your role choices for each mode are kept separately.
Readability
Every text and button pairing in the preview is checked with WCAG 2.2. Text on coloured buttons uses whichever of near-black or white reads better.
Only the preview changes
The site’s own menu and controls keep their colours, so you always judge the palette, not the page around it.