Palette Website Preview
Enter your colours and two fonts, and see them applied live to sample website pages, in light and dark mode, before you commit.
About this tool
This tool applies your palette to sample page mock-ups so you can judge it in a realistic setting: a business homepage, an online shop, a restaurant menu, a booking page, a loyalty card and a dashboard with charts. Choose the text colour, background, primary, secondary and accent colours (card and border tints are derived from them), then one font for headings and one for body text, from system fonts and a few bundled open-licence fonts.
Dark mode is worked out from your colours, the “Shuffle roles” button tries other combinations and the generator suggests random harmonious palettes while keeping the colours you have locked, with undo and redo at any time. Insufficient contrast is flagged right on the mock-up, using WCAG thresholds. Share your test with a simple link, export the colours as CSS variables, JSON or for Tailwind, and download the mock-up as a PNG. Everything happens in your browser and nothing is sent to a server.
- 6 mock-ups: homepage, shop, menu, booking, loyalty, dashboard
- Light and dark mode worked out automatically
- Random palettes with locks, role shuffle, undo/redo
- WCAG contrast warnings on the mock-up
- Share link that keeps your settings
- CSS, JSON, Tailwind and PNG export