How to build a color palette with free tools like Coolors

You will build a usable color palette for a website, brand or design project using free browser tools instead of guessing. It suits beginners and designers who want a faster starting point. You only need a browser, and a photo or an existing brand color helps for the extraction step.

Top 7 Free Color Palette Tools Every Designer Needs in 2026, by Hassan's Toolbox on YouTube. 5 min 2 s.

10 chapters. Tap a step to jump to it.Chapters from the creator
Video length
5 min 2 s
Time to do it
20 minutes
Difficulty
Easy
Steps
8

What you need

Steps

  1. Open Coolors and press the spacebar to generate a random five-color palette. Lock any color you like and keep pressing space to build the rest around it.

  2. Go to Adobe Color, open the Extract theme tab and upload a photo or logo. It pulls a five-color palette straight from the image so your scheme matches existing brand assets.

  3. For interface work, try HueMint. Enter your brand color and choose a harmony, and it generates a full UI palette with background, text and accent colors.

  4. Use Khroma if you want suggestions trained on your taste. Pick the colors you like, then browse the palettes and type pairings it generates for you.

  5. Browse Color Hunt for trending four-color palettes and copy the hex codes of any set you like. It is the fastest option when you only need inspiration.

  6. Test your pick in Palette On, which covers color theory and accessibility. Check that body text and background pass a contrast ratio of at least 4.5 to 1.

  7. Paste your final hex codes into Realtime Colors to see them on a live sample website. Adjust the shades until headings, text and buttons all read clearly.

  8. Save the finished codes in a notes file or your design tool's swatch library, and name each one by its job, such as background, text and accent.

Tips and common mistakes

Start from one color you already love, then let the generator fill the rest so the palette stays coherent.

Keep two or three main colors plus a neutral, and use tints of the same hue instead of adding new ones.

Check contrast before you commit, because a palette that looks good can still be unreadable on screen.

Copy the hex codes rather than taking a screenshot, so the colors stay exact when you paste them.

Questions

Do I need an account to use these tools?

Most of them work in the browser without signing in, though an account lets you save palettes. The video presents all seven as free tools, so check each site for current limits.

Can I use these palettes in Adobe Illustrator or Figma?

Yes. Copy the hex codes and paste them into the color picker or add them as swatches in your document. That way the palette stays editable in your design file.

Which tool should I start with?

Start with Coolors for quick generation, then use Adobe Color if you need to match an existing image. Finish with Realtime Colors to see the palette in a realistic layout.

This guide was drafted from the video's details and general task knowledge. It has not been checked against the full video. Check the video and relevant product instructions before following a procedure. Report a correction.

More in Art & Design

See all