Worked palette example
Restrained neutrals and one strong action help restore hierarchy.
Colors here are examples, not an automatic accessibility certificate. Test every foreground/background pair before using these values for text.
Open this example in the eight-role Theme Studio →Mistake 1: choosing only from a swatch strip
Swatches hide the realities of long paragraphs, form fields and crowded layouts. Fix it by previewing the same colors on a page with a header, body copy, several buttons and a few cards.
Mistake 2: using too many action colors
When three bright fills compete for attention, visitors cannot tell which action is primary. Define one principal action and use quieter treatments for secondary tasks. Reserve warning colors for warnings.
Mistake 3: assuming an accessible brand hue
An attractive logo color might not meet minimum contrast for small text on a white background. Test the foreground/background pair, then consider a darker text variant while retaining the original hue for decoration.
Mistake 4: inconsistent neutral surfaces
If each section chooses a slightly different white or gray, the layout feels disjointed. Name background, surface and border roles and reuse them throughout the site. The same foundation makes mobile variations much easier.
Mistake 5: too little contrast for metadata
Muted does not mean unreadable. Breadcrumbs, input labels, timestamps and card summaries still matter. Choose a muted token with adequate contrast for the font size and background instead of merely reducing opacity.
Mistake 6: relying on hue to communicate state
A red dot and a green dot may be indistinguishable for some visitors or in some viewing conditions. Pair state colors with icons, words or different shapes. Apply the same rule to charts, form validation and notifications.
Mistake 7: skipping the export and recheck stage
A screenshot can look good while the production CSS has mismatched colors. Centralize values in named CSS variables or Tailwind tokens and test again after real text, hover states and loading screens are in place.
Before you ship
Compare the colors against the actual design, verify small text and form states with the Contrast Checker, and export named tokens so future edits remain consistent. There is no palette that automatically makes every interface accessible.
Try it with real colors.
Explore a harmonious palette and see what your choices do in an interface.
Open color studio