How to Pick a Color Palette That Works (Without a Design Degree)

Picking colors by "does this look okay together" is how you end up with a palette that looks fine in isolation and falls apart the moment it's actually built into a UI. Here's the shortcut that designers actually use.

You don't need five favorite colors. You need one, and a rule

Instead of picking several colors independently and hoping they work together, pick one base color, then generate the rest of the palette from it using a consistent relationship. Three combinations cover almost every use case:

• Monochromatic: different shades and tints of one hue. Safe, cohesive, a little flat if overused. Great for a clean, minimal interface.
• Analogous: colors that sit next to each other on the color wheel (e.g. blue, teal, green). Harmonious and easy on the eye. Most "calm, professional" interfaces use this.
• Complementary: colors from opposite sides of the wheel (e.g. blue and orange). High contrast, good for making one element (like a call-to-action button) pop against a calmer background.

Rather than doing this math by hand, Color Palette Generator takes one base color and gives you a full harmonious palette built on whichever of these relationships you want, no color theory homework required.

Give every color a job: the 60-30-10 rule

A palette is more than a set of colors; each one needs a role. A simple guide that works for most interfaces is 60-30-10:

• 60%: the dominant color. Usually a neutral such as white, off-white or a dark background. It sets the mood and gives the content room to breathe.
• 30%: the secondary color. Used for cards, sections, navigation and supporting elements.
• 10%: the accent. Reserved for the things you want noticed: buttons, links, highlights.

If everything is an accent, nothing is. Restraint is what makes the accent color work.

Contrast is not optional

A palette can look great in a mockup and still fail the moment real text sits on top of it. Light gray text on a white background, or a saturated color-on-color combination, might look "on brand" but can be close to unreadable for a meaningful chunk of users, including anyone with low vision, and anyone using a phone screen outdoors in daylight.

The accessibility standard most sites aim for (WCAG level AA) asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text and interface elements such as button borders. Check actual text and background combinations against those numbers before committing, not just "does the palette look nice as five swatches side by side." A palette that's beautiful as an abstract set of colors and unreadable as actual UI text has failed at its one job.

Don't rely on color alone

Roughly 1 in 12 men and a smaller share of women have some form of color vision deficiency, most commonly difficulty telling red from green. So never use color as the only way to communicate something. A red error message should also have an icon or the word "Error"; a green "success" should say so. Pairing color with text or shape keeps your design understandable for everyone.

Working with HEX and RGB

Designers and developers pass colors around in a few formats. HEX codes like #7c3aed are the most common on the web; RGB values like rgb(124, 58, 237) describe the same color as red, green and blue amounts. When a design tool gives you one and your code needs the other, HEX to RGB and RGB to HEX convert between them instantly, and the Color Picker helps you grab an exact value from an image or a screen.

Turning a palette into an actual interface

A palette is just the starting point. The real UI work is applying it consistently:

• Gradient Generator: turn two palette colors into a smooth CSS gradient for hero sections or buttons, with the code ready to copy.
• CSS Button Generator: apply your palette to a real button with hover states, instead of guessing at shadow and border values by hand.
• CSS Box Shadow Generator: subtle shadows using your palette's darker shades read as "polished," while a default black shadow at 50% opacity reads as an afterthought.

Plan for dark mode

If your site might ever offer a dark theme, build the palette with that in mind from the start. Pure black backgrounds with bright white text can feel harsh; softer dark grays with slightly dimmed text are easier on the eyes. Test your accent color on both a light and a dark background, because a color that pops on white can look dull or glaring on black.

The one habit worth keeping

Pick your base color last, not first. It's tempting to start with "I like this blue," but it's much easier to choose a base color once you know what it needs to do (pass contrast against your background, work as a button color, hold up across light and dark variants) than to fall in love with a color and then force the rest of the palette to accommodate it.

A quick palette checklist

1. One base color, with the rest generated from a rule.
2. Clear roles: dominant, secondary, accent (60-30-10).
3. Text and backgrounds checked against contrast ratios.
4. Color never the only signal.
5. Tested on light and, if relevant, dark backgrounds.

Consistent colors are also part of a site that feels trustworthy and finished. For the other pieces of a polished site, see our technical SEO checklist.

Related tools

Put this into practice:

• Color Palette Generator
• Gradient Generator
• HEX to RGB
• Color Picker