DEV Community

Cover image for How to Pick a Color Palette That Doesn't Look Amateur (Free Tools + One Rule)
Tutomod
Tutomod

Posted on Originally published at yoelmod.blogspot.com

How to Pick a Color Palette That Doesn't Look Amateur (Free Tools + One Rule)

Originally published on Tutomod.

Bad color is the number one reason designs scream 'homemade'. Good color is mostly one rule and one free tool, not talent.

Updated August 09, 2026, after a fresh review, with updated visuals and links.

By the end of this you'll build professional looking palettes in five minutes, guaranteed.

Choosing colors for a design palette

Photo by Thirdman on Pexels

Common mistakes, and how to dodge them

  • Five strong colors at once is the classic amateur tell: strength goes in the 10% accent, everything else calms down.
  • Neon on white fails contrast and eye strain: saturate your neutrals with a hint of hue instead.

How to do it

  1. Learn the 60-30-10 rule first. 60% of your design is one main color (often neutral: white, cream, charcoal), 30% a secondary, 10% an accent for buttons and highlights. Almost every 'clean' website you admire is this ratio wearing different outfits.
  2. Generate palettes with Coolors. Go to coolors.co and hit the spacebar: it shuffles five color palettes endlessly after you lock colors you like. Free, no account needed for the basics.
    • Sight falling in love? Lock that color, keep shuffling the rest
    • The app exports hex codes directly
  3. Steal from photos you love. Upload a photo to Coolors' image picker and it pulls a palette straight from the picture. Sunset photo for warmth, forest for calm: instant mood, zero theory.
  4. Check contrast for text. Contrast is usability and law in many places: paste your text and background colors into webaim.org's contrast checker. Body text should hit a 4.5:1 ratio minimum.
  5. Test on a real mockup, not the swatch. Colors that look great as squares fight on a real page. Apply the palette to one actual screen before committing: the 10% accent suddenly looks loud, the 60% reads dingy: adjust now, not after printing.

Building a color palette with free tools

Photo by Ivan S on Pexels

Good habits to keep

  • Keep a palette file with hex codes in your notes: consistency builds the brand feel over time.
  • Adobe Color and the Tailwind color scales are infinite free inspiration when Coolors runs dry.
  • Notice nature and hotel branding: both follow 60-30-10 instinctively.

Before you ask

How many colors should a palette have?
Three to five roles: main, secondary, accent, plus text and background neutrals. More is chaos.

Dark mode palette separately?
Yes, invert thoughtfully: backgrounds go dark, accents often need softening to keep contrast humane.

Keep reading

The short version

Lock one color, shuffle the rest, obey 60-30-10: palettes stop being art school and become a five minute checkbox.

Top comments (0)