Start with your brand
Your color palette should come from your brand, not the other way around. If you already have brand guidelines, pull your primary and secondary colors from there. If you don't, start with one color that represents the feel of your product and build outward.
A good starting point is one primary color, one accent color, and a neutral. You can always add more later, but starting with too many colors makes everything harder to maintain.
Contrast matters more than you think
The most common usability issue with color is contrast. Text that looks fine on your monitor might be unreadable on a phone in direct sunlight, or for someone with low vision. WCAG 2.0 sets minimum contrast ratios for a reason:
- Normal text needs at least a 4.5:1 contrast ratio (AA)
- Large text (18px bold or 24px regular) needs at least 3:1
- Icons and UI elements also need at least 3:1 against their background
Use a contrast checker before you commit to a color pairing. We built Coco for exactly this.
Color harmony basics
You don't need to memorize color theory to pick a good palette. Here are the three patterns that cover most real-world use cases:
- Complementary colors sit across from each other on the color wheel (like blue and orange). They create strong contrast and work well for CTAs and highlights.
- Analogous colors sit next to each other (like blue, teal, and green). They feel natural and cohesive, good for backgrounds and sections that should flow together.
- Triadic colors are evenly spaced around the wheel (like red, yellow, and blue). They're vibrant and balanced, but you need to be careful not to overdo it.
Our Harmony Generator can help you explore these relationships for any color.
Accessibility is not optional
About 1 in 12 men and 1 in 200 women have some form of color vision deficiency. If your interface relies on color alone to communicate something (like red for errors, green for success), some users will miss it entirely.
The fix is straightforward: always pair color with another visual cue. An icon, a label, an underline, a border change. Color can reinforce meaning, but it should never be the only signal.
Tools to help
We built a few tools that make working with color easier:
- Clip Mojo extracts color palettes from any website
- Coco checks contrast ratios against WCAG standards
- Harmony Generator builds complementary and triadic palettes
- SwatchyDB lets you browse real brand color palettes for inspiration