The visualizer applies five color roles (text, background, primary, secondary, and accent) to a sample landing page and a sample dashboard, so you can judge a palette on headings, body text, buttons, and tinted surfaces instead of as five swatches. Edit the roles in the toolbar at the bottom of the screen, check how the colors read against each other, then export them as CSS variables, a Tailwind config, or a theme for a UI library.
When a palette is loaded, from the dice, the palette browser, or a link, only its primary, secondary, and accent colors are taken as they are. Text and background are derived from the primary color. In the light theme the background is the primary mixed 95% toward white and the text is the primary darkened to 15% of its RGB values; the dark theme swaps the two. A light primary starts in the dark theme, so it does not end up as a pale color on a pale page. This is why text and background change when you pick a new palette: they are meant to be tinted versions of the primary rather than plain black and white.
The preview uses each color at full strength and as translucent tints. Buttons are filled with the primary color and get black or white labels automatically; the secondary and accent colors appear as 10% and 20% tints behind cards and badges. The tints are written as CSS variables on the page, from --primary5 to --primary95 in 5% steps, which is a useful pattern to copy if your own components need soft backgrounds from one brand color.
Select a role in the toolbar (Text, Background, Primary, Secondary, Accent) to open a color picker with a HEX field you can type into. In browsers that support the EyeDropper API, currently Chromium-based ones such as Chrome and Edge, a Pick button picks a color from anywhere on your screen. On small screens the roles are in a drawer behind the button that shows the five swatches.
The dice loads a random palette from twelve themed sets (Christmas, Coffee, Cold, Cream, Dark, Earth, Fall, Food, Gold, Gradient, Halloween, and Happy). It tries up to 50 palettes to find one whose primary color reaches 4.5:1 contrast against the derived background. The palette browser lists the same sets. The moon and sun button switches between light and dark themes by deriving text and background from the primary again, so it replaces any text or background color you set by hand. Make manual text and background edits after choosing the theme.
Choosing a palette with the dice or the browser moves the page to an address like /palette-visualizer/120409-f8f3f5-781d42-a3423c-de834d, in the order text, background, primary, secondary, accent. Edits made in the toolbar do not update the address, so copy the HEX values from the role swatches at the top of the page when you share an edited palette. Selecting a swatch copies its value.
Links are read flexibly. With five colors, the third, fourth, and fifth are used as primary, secondary, and accent, and text and background are derived as described above. With one to four colors, the first three are read as primary, secondary, and accent, and any missing role comes from the default palette. A four-color link from the palette generator's Visualize button therefore uses its first three colors and ignores the fourth. Try the dashboard opens the same palette on a dashboard layout with charts and tables.
The Export button in the toolbar opens three tabs. CSS gives :root custom properties named --text, --background, --primary, --secondary, and --accent. Tailwind gives a tailwind.config.js with the five colors under theme.extend.colors. Frameworks has snippets for shadcn/ui, Bootstrap, Material UI, Chakra UI, Flowbite, Preline, React Native, and Flutter.
The Tailwind tab uses the JavaScript config format. Tailwind CSS v4 can still load it with an @config directive, but the usual v4 approach is to define the colors in CSS with @theme, as below, which creates utilities such as bg-primary, text-text, and border-accent. The Bootstrap and Material UI snippets pick light or dark from your background color, so they match the theme you are previewing.
@import "tailwindcss";
@theme {
--color-text: #120409;
--color-background: #f8f3f5;
--color-primary: #781d42;
--color-secondary: #a3423c;
--color-accent: #de834d;
}The preview shows whether colors look right together, but it does not warn you when a pairing is hard to read. The default palette is a useful example. WCAG level AA asks for 4.5:1 for normal text and 3:1 for large text and UI parts; these ratios are computed from the HEX values above:
Updated