Website Color Palette Preview
Apply five colors to a website mockup, check text contrast, and export semantic CSS variables.
You might also need: Readable Text Color Generator , Random Gradient Generator , 5-Color Palette Generator and more
Assign your five colors
Use solid sRGB HEX colors: 3 or 6 digits, with or without #. Changes update the mockup immediately.
Separate colors with spaces, commas, or semicolons. Order: page background, card background, page text, button background, button text. Exactly five valid colors apply immediately; then swap roles as needed.
Live website preview
This display-only mockup shows your palette on common website elements. The sample navigation and button are visual examples.
Make room for your next idea.
See how your colors work together across a page before adding them to a website, portfolio, or dashboard.
A small idea, clearly presented
Use cards to group useful details. Check that body text stays readable on both the page and the card background.
Explore the projectText contrast for the displayed pairs
Page text / page background
#1E293B / #F1F5F9
Contrast: 13.35:1
- Normal text AA (4.5:1): Meets
- Normal text AAA (7:1): Meets
- Large text AA (3:1): Meets
Card text / card background
#1E293B / #FFFFFF
Contrast: 14.63:1
- Normal text AA (4.5:1): Meets
- Normal text AAA (7:1): Meets
- Large text AA (3:1): Meets
Button text / button background
#FFFFFF / #1D4ED8
Contrast: 6.70:1
- Normal text AA (4.5:1): Meets
- Normal text AAA (7:1): Does not meet
- Large text AA (3:1): Meets
Checks three solid text/background pairs using WCAG 2 sRGB ratios. Results use unrounded values and display two decimal places. Large text means at least 24 CSS px at normal weight or 18⅔ CSS px in bold.
Export your palette as CSS variables
These five custom properties match the colors used in the preview. Add them to your stylesheet and reference them with var(--palette-background), var(--palette-surface), var(--palette-text), var(--palette-primary), and var(--palette-on-primary).
How to preview a website color palette
- Enter five HEX colors individually, paste a five-color list, or open a palette from the five-color generator.
- Assign colors to the page, cards, text, and button. Use the swap menus to try different roles.
- Review the mockup and the three contrast pairs. Copy the CSS variables or download the .css file for your project.
Ways to try your website colors
- Try the example's pale page background, white cards, dark text, and blue button for a business website.
- Swap the page and text colors to explore a dark website palette, then recheck card and button contrast.
- Bring five colors from an image or brand palette, assign them to interface roles, and check whether the text pairs are readable.
Frequently asked questions
How is this different from a shade generator?
This tool applies your five colors to page roles and a website mockup. It does not generate tints or shades. Use the swap controls to explore how an existing palette works in a real layout.
Which colors does the contrast check compare?
It checks page text against the page background, page text against the card background, and button text against the button background. Each pair gets separate normal-text AA, normal-text AAA, and large-text AA results.
Why can a displayed 4.50:1 ratio still fail AA?
Labels round to two decimals, but pass/fail checks use the full computed ratio. A ratio just below 4.5:1 does not meet normal-text AA even when its rounded label reads 4.50:1.
Does exporting CSS automatically style my website?
Export five CSS custom properties and reference them in your website’s background, text and button styles.
Are my colors saved or uploaded?
Edits stay in this browser tab and are not included in analytics events. Opening the preview from the palette generator uses temporary same-tab session storage; the preview removes the valid transfer after reading it. Copy or download the colors if you want to keep them.
Your palette is processed in this browser tab. Colors are not included in analytics events or URLs. A palette explicitly sent from the generator is transferred through temporary same-tab session storage and removed when loaded. Copy or download your palette to keep it.
Find this tool useful? Share it with your team to speed up your workflow.
If you like it, tap to support it; if it needs improvements, tap and we’ll prioritize updates.