Blog / / Color Palette

Generating Colors for Your UI Designs

Picking up from my last Watch Me Work Wednesday, I've had just added some lovely device mockups and trendy blobs to my landing page and so you might be wondering how did I pick the colors?

Landing page design with blobs and device mockups
Landing page design

Well there are a couple of color palette generators that I recommend when you're just starting out and you are still getting the hang of color theory, color harmony and choosing color schemes and color palettes for your designs. And we use these over at Desginerup.co with our students in our product design master course.

One my favorite quick and dirty tools to use is Happy Hues by Mackenzie Child.

Happyhues.co website
Happyhues.co website

One of the big issues I've also found with most color palette generators as Mackenzie points out, is context. Seeing color schemes in isolation can be really different then seeing what they would look like on your actual UI designs, but Happy Hues takes care of that.

Here's how I use it to kick off my design:

✅ Head over to Happyhues.co

✅ Select one of the pre-made color palettes.

✅  You can preview them by selecting a combination from the left-hand sidebar.

What's really cool is that you get to see what these colors look like in context in an actual design. You can see the header font, body text, buttons, even illustrations.

✅  Scrolling down you easily one-click copy the hex codes for each element right to your clipboard so you can paste them into your design software.

You can see them used on cards here and even better these cards also explain the theory behind color. Again this is just a quick shortcut tool, of course I always stress the importance of really studying and understanding color theory and color harmony and it's application and you can learn much more about that in detail in my video UI Design | How to choose colors and color palettes.

If we keep scrolling here we can read about the psychology behind these colors and the adjectives and associations commonly tied to them, which I really appreciate.

Happy Hues psychology of color screen
Happy Hues psychology of color screen

I went ahead and chose color palette 6 as a starting point

Happy hues color palette 6
Happy hues color palette 6

And back over at my design, that I'm continuing from last time, I'm just going to copy and paste the hex onto one of my trendy blobs, and then lower the opacity and voila!

Landing page design
Landing page design

So I'll probably tweak this palette from here and you can watch me do that starting with the typography in my next Watch Me Work Wednesday video, but Happy Hues is a great color generating tool for starting you off with a nice balanced color palette for your UI designs.

Want to want to learn how to make stunning, original UI designs like these, from scratch based on actual user research and learn how to utilize more tools like this to speed up your workflow and get hired as a UI/UX designer?

Product Design Master Course
Product Design Master Course

Checkout our Product Design Master Course where you'll learn all of these professional tricks, design principles and more in a custom, tailored program with 1:1 instruction.

This post was a collaboration between

Elizabeth Alli, DesignerUp

  • Elizabeth Alli

    Elizabeth Alli

    Mindful designer and mentor helping to create meaningful products and experiences.

    More posts by Elizabeth Alli.

    Elizabeth Alli
  • DesignerUp

    DesignerUp

    Read more posts by this author.

    DesignerUp