A workflow for designers, design engineers, and front-end developers who need a small, consistent, accessible color system for a website, app, or brand refresh. The plan starts with a single base color and ends with a documented set of tokens you can hand to engineering. Every tool runs in your browser.
Pick a base color. Most projects start with a brand color, an anchor inspired by a photo, or a value pulled from a competitor audit. Write down the hex.
Open the color palette generator and enter your base color. Choose a harmony model (complementary, analogous, or triadic) and let the tool propose related colors. Pick the four or five that feel right for the brand.
For each palette color, open tints and shades and generate a ramp. Tints (mixed with white) become surface, hover, and disabled states. Shades (mixed with black) become borders, pressed states, and emphasis text.
Open the contrast checker and test every text-on-background pairing you intend to ship. Body text wants at least 4.5:1, large text at least 3:1. Adjust the ramp if a key pairing fails.
Open the CSS gradient generator and combine two palette colors into a hero or button gradient. Copy the generated CSS into your stylesheet or design tokens file.
Collect everything into one design tokens file (JSON or CSS custom properties): the base color, the palette, every ramp, the gradient, and the contrast checks. Hand it to engineering as a single source of truth.
Expected output and how to verify
You should have one document listing every color in the system, each tagged with its role (brand, neutral, surface, text, border) and the verified contrast ratio against a chosen background. Open the document in a separate window and mock up a quick screen using the tokens. The colors should feel coherent, the contrast should be comfortable to read, and no value should look out of place.
Common pitfalls
Shipping too many palette colors. Five is usually plenty. Anything more becomes hard to keep consistent across screens and brand assets.
Skipping the contrast step because the colors "look fine" on your monitor. Always test pairings, especially light text on colored backgrounds.
Choosing tints and shades by eye rather than by ramp. A consistent mix percentage between steps keeps the system predictable across designers.
Variations
For a dark-mode variant, repeat the entire workflow with a darker base background and re-test contrast. For a system that needs accent colors lifted directly from product photography, sample colors with the image color picker first, then feed the chosen hexes into the palette generator.
Frequently asked questions
How many colors do I actually need?
Most product UIs ship with one or two brand colors, a neutral ramp of five to nine greys, and a small set of semantic colors (success, warning, danger). Anything more becomes hard to keep consistent across screens.
What contrast ratio should I target?
WCAG aims for at least 4.5:1 for normal body text and 3:1 for large text. Aim higher when you can. Anything below 3:1 will look washed out on lower-quality displays.
What is the difference between a tint and a shade?
A tint is the base color mixed with white, used for surfaces, hovers, and disabled states. A shade is the base color mixed with black, used for borders, pressed states, and emphasis.
How do I document the system for handoff?
Export each step. The palette tool produces a list of hex values, the tints-and-shades tool gives you ramps, and the gradient tool emits ready-to-paste CSS. Drop them all into a single design tokens file.