A good palette starts with one base color and grows from there. Pick a hue, choose a harmony scheme that fits the job, then fill in the neutrals and state colors a real interface needs. Here is how to build one that actually works in the browser.
Pick a base color, then a harmony scheme
Start with a single base color, often your brand color, and let the harmony scheme generate the rest. Each scheme has a different use:
- Complementary: two colors opposite on the wheel. High contrast, great for a primary plus an accent that needs to stand out.
- Analogous: colors next to each other. Calm and cohesive, good for backgrounds and large surfaces.
- Triadic: three evenly spaced colors. Vibrant and balanced, useful when you need variety without clashing.
- Monochromatic: one hue at different lightness levels. The simplest, safest choice for clean UI work.
Drop your base color into the Color Palette Generator and switch schemes to compare them side by side before committing.
A real UI palette is more than pretty hues
Harmony schemes give you the colorful part, but an interface needs more structure than that. A usable palette has:
- A primary: your main action color, used for buttons and links.
- An accent: a secondary color for highlights and emphasis.
- Neutrals: a range of greys for text, borders, and backgrounds. Most of a UI is actually neutral.
- State colors: success (green), warning (amber), and error (red) so users get clear feedback.
If you only ship the harmony colors and skip the neutrals and states, the design falls apart the moment you build a real form.
Generate your palette in three steps
- Open the Color Palette Generator and enter your base color as a hex value.
- Choose a harmony scheme - complementary, analogous, triadic, or monochromatic - and tweak until it feels right.
- Copy the hex codes and drop them into your CSS variables or design tokens.
It runs entirely in your browser, so nothing you enter leaves your device.
Always check contrast before shipping
A palette can look beautiful and still be unreadable. Text needs enough contrast against its background to meet WCAG: at least 4.5:1 for normal body text and 3:1 for large text. Check every text-on-background pairing, especially your primary color used on white and any light grey text. If a combination fails, adjust the lightness until it passes rather than guessing.
Related tools
- Color Converter - switch any color between hex, RGB, and HSL.
- CSS Gradient Generator - blend two palette colors into a smooth gradient.
- WCAG Contrast Checker - confirm your text and background pairs are readable.
Pick a base, choose a scheme, add neutrals and states, then check contrast before you ship.