Worked palette example
An example stylesheet using similar warm accents alongside stable text and surface roles.
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 →1. Inventory before replacing anything
Existing CSS often contains primary actions, hover variations, neutral surfaces, borders and typography values written as raw HEX or RGB. Start by counting every distinct color and the selectors that use it. Some colors are purposeful, while others are leftovers from prior revisions. A literal palette cannot tell the difference on its own, so treat an automated inventory as a map to investigate, not a mandate to unify everything.
2. Separate appearance from responsibility
A color used for body text has a different responsibility from a color used on a full-width background. Name semantic roles such as background, surface, text, muted, primary, accent and border. A single HEX color may appear in several contexts, so a global find-and-replace can accidentally change things that should remain different. Review relevant properties and selectors before assigning a color to one role.
3. Choose a safe, reversible first pass
For a legacy site, one practical first step is to create design-token variables that keep the existing visual values. This changes the implementation without intentionally changing the appearance. Once the token names and usage are verified, map selected tokens to the new brand color system in a second pass. A single migration that both renames and recolors everything can be difficult to debug when something breaks.
4. Audit colors that machines cannot fully resolve
Stylesheets can reference custom properties, gradients, images, opacity, pseudo-elements, imported files and conditional selectors. Static file analysis cannot always determine the foreground/background combinations that appear at runtime. Check button hover and focus states, error labels, dropdowns, dark sections and text over images in an actual browser after making changes. Color contrast depends on rendered context, not just raw color values.
5. Export reviewed changes and integrate deliberately
Use the CSS Migration Lab to import stylesheets locally, approve specific mappings, download migrated CSS copies and place its token stylesheet before those copies. Read the generated change report to see which lines were affected. Compare the site visually at mobile, tablet and desktop widths and test its primary interactions. Keep the original files under version control so you can revert individual migrations if needed.
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