Why Your Color Schemes Always Look Ugly (and How to Fix It)
Eight color rules pulled from luxury branding and UI work that can fix the problem — no taste required, just a system.
You've spent hours tweaking colors, only to step back and feel something is off. The palette looks cheap, muddy, or just plain wrong. Most designers hit this wall because they rely on gut feeling instead of a system. Here are eight color rules pulled from luxury branding and UI work that can fix the problem.
Pure white (#FFFFFF) and pure black (#000000) make designs look amateur faster than almost anything else.
Try warm off-white (#FCF8F0) and warm off-black (#231E19) instead. Pure tones barely exist in nature. A hint of warmth in your lightest and darkest values makes the whole composition feel more grounded.
Stick to three dominant colors per layout, split roughly like this:
- 60% primary color (backgrounds, large areas)
- 30% secondary color (sections, cards)
- 10% accent color (CTAs, highlights)
Go beyond that and the layout starts to feel like competing elements fighting for attention. Chanel, Apple, and Hermès all hover near this ratio, whether they talk about it openly or not.
You don't need to invent palettes from scratch. Pick a brand whose color work you admire (Hermès, Aesop, Apple are solid starting points) and pull exact hex codes with your browser's eyedropper tool or Figma's. These companies have spent serious money figuring out which colors work. Borrow their homework.
Black shadows look dirty. They sit on the page like smudges, disconnected from everything around them.
Use a darker version of your primary color instead. In HSL, drop the Lightness value and leave hue and saturation alone. If your background is warm beige, your shadows should be deep brown. The result feels like it belongs in the same world as the rest of the design.
Pull together photos, illustrations, and UI elements that all have different saturation levels by dropping an 8% gray layer over the full composition with a blending mode. It mutes the extremes just enough to make everything feel like it came from the same shoot.
Something like an Instagram filter, except you stay in control of how much it pulls back.
The easiest way to add punch: pick one small area and push saturation to the limit.
Run 90% of the layout in warm off-white or beige, then hit 10% with something vivid, a saturated orange or cobalt blue. That's the Hermès playbook. One color does all the heavy lifting and the eye goes straight to it.
Rainbow gradients are almost always a mistake. Keep your gradient between adjacent colors, no more than 60 degrees apart on the hue wheel. Warm yellow fading into soft amber works well. Red jumping to blue does not.
Stop rebuilding palettes from scratch every time. Create a "My Color System" page in Figma or Sketch and save every palette that worked, with hex codes and labels for primary, secondary, and accent roles. Screenshot real projects where you used them so you can see how they behaved in context.
For fresh starting points, Color Palette Hub has curated palettes with hex codes ready to go.
Good color work is not about having "taste." It's a set of rules you can learn and apply systematically. Once you internalize the 60-30-10 split, stop reaching for pure black, and start pulling references from brands that do it well, your palettes will shift noticeably within a week. You'll also start noticing these same patterns everywhere — in app interfaces, magazine layouts, store interiors. The rules are already all around you.