Analyzing UX of Color Palettes Websites

As a designer, I spend a fair amount of time playing around with colors and combining them. While many artists and designers get their inspiration from photos (see: Unsplash‘s beautiful collections), I sometimes get frustrated with this method. Even a great photo might not have a clear palette that represents its subjects, and if it does, it’s hard to keep track of fresh color combinations for the next time your project calls for it. I decide that it’s time to take a closer look at websites that curate color palettes and find one to incorporate into my workflow.

In this article, I’m going to look at the design and functionality of 3 websites that showcase color palettes for artists and designers: Design Seeds, Coolors, and Color Hunt.

In short, these 3 sites are tailored towards different goals. While Design Seeds is focused on providing inspiring imagery, Coolors is more about different ways to adjust your own color palettes, and Color Hunt is about showcasing a carefully curated collection. Coolors is more convenient as a design tool, but Color Hunt gets huge bonus points for the thoughtful design.

In Corner #1: Design Seeds

Two menu bars? And the collection of palettes are in “Blog”? Oh why, Design Seeds?

Design Seeds celebrates the beauty of nature and everyday life through color palettes from curated Instagram photos.

The Good:

• The front page has clear CTA, with a preview of the palette format.
• The page of the color palettes collection: An uncluttered 2-column grid brings focus to the photos and encourages the eyes to travel down. I like how the photos bring context to the palettes, and HEX codes are available on the same page.
• The site allows you to search for palettes by color and by collection, such as “Heavenly Hue” or “Flora”.

The Bad:

• Without the loud hero image from their front page, I couldn’t find my way to their color palettes collection as it is labelled an indistinct “Blog”.
• The double menus are confusing to navigate.
• The position of the HEX code under each palette takes up a lot of space.
• It’s impossible to view more than 1 palette at once, so there is a lot of scrolling.
• User is 100% passive and can’t interact with the color palettes.

Overall: Like a photo book, Design Seeds is a great site to view color palettes with a natural theme, but it remains more of an inspiration source than a design tool. Be ready to weed through pages of palettes if you have something specific in mind.

In Corner #2: Coolors

Just colors, and a couple dozens of ways to adjust them.

Coolors come as a website, an iOS app, an Adobe add-on tool, and a Chrome extension. It already sounds more convenient than Design Seeds, but let’s see if the functionality is up to par.

The Good:

• First glance: the UI is clean and easy to use. The menu and toolbar are straightforward, and explanation appears above icons if you hover. The fact that there is only one color palette stretching across the screen adds to the perceived simplicity of the website.
• Functionality: There are 3 ways to create a palette randomize one, upload a photo, or copy from another user. Beyond that, there are about a dozen ways to tweak a palette by its individual colors or as a whole. I personally love the ability to adjust the hue, saturation, and brightness of all 5 colors at once.
• Sign-up: It’s not required unless you want to save/share a palette, and it’s a breeze.
• Designer-friendly: Quickly test for 8 types of color blindness with a button.
• Community: You can view and vote on other people’s palettes.
• Fun factor: Space bar to generate random palettes. (if you are a bored designer, this can be pretty exciting)

The Bad:

• The community feature is overwhelming. The sight of 28 color palettes, divided into tiny slivers, crammed in the pitch black window makes me want to quit immediately. The darker colors blend in with the background, and there is little space between palettes in a row.
• Because anyone can submit a color palette, the quality of the community-sourced pool is low.

Overall: Coolors is an awesome tool to create and user-proof color palettes for your design. Just don’t bother with the community explore function.

In Corner #3: Color Hunt

Created by the talented Gal Shir

The Good:

• Very clean and minimal UI. It tells you immediately that the website does color palettes, and nothing else.
• Multiple color palettes are displayed, but unlike Coolors, they each get plenty of space. The Polaroid-like box with subtle shadow makes the palettes stand out.
• No unnecessary information: HEX codes appear upon hovering and copied to clipboard upon clicking, no palette names or tags (I tend to find the names generic and useless)
• No unnecessary steps: Users can like and save a palette even without signing up, and their saved palettes show up immediately on the side of the page.
• Community input is filtered, and as a result the site’s quality is high.

At first, I thought hiding the “Create” button under the hamburger menu was a bad design, but it seems to help Color Hunt achieve the Goldilocks range of user engagement between Design Seeds, where users are 100% passive, and Coolors, where unfiltered user input lowers the quality of the collection. Hiding the button makes users work a little harder to submit their color combinations, which then have to be approved to be published.

The Bad:

• There is no search function.
• It’s not easy to create a color palette, and there is no way to adjust a premade one.

Overall: I am absolutely in love with the design of this site. The user experience is smooth, fun, and the color palettes it offers are so great I kept on browsing for a while (thanks, infinity scroll!). Can’t wait to use it for my next project.

Thanks for reading!

I hope you enjoyed this article and liked my UX analysis. I’d be happy if you clap 👏 that button and let me know in the comments below if you have any feedback or question.