You’ve probably already learned throughout the course of your UX/UI bootcamps, or even earlier through your art classes, about the importance of color in design – its uncanny ability to evoke all sorts of emotional responses from people is precisely what makes it a vital component of UI. There is so much to discuss about color, but I’m certain that some topics under color theory have been touched on in your UX/UI studies so I won’t go in depth with these here. What I’d like to share with you are resources that can help you create harmonious color palettes for your designs.
Selecting harmonious color palettes for your projects is critical for the following reasons: 1) it establishes branding, and more importantly, 2) it can make or break the success of a user’s interaction with your product (i.e. if a site has too many contrasting colors, it can be harsh on the eyes and make your user uncomfortable).
When creating your color palette, you must first consider what emotions you want to evoke with your UI. These can be determined by looking into your product research, branding guidelines, or even a mood board if your project has one. From there, you can choose a color that complements the message and emotions you would like to convey, and make that your primary color (for a refresher by Adobe on color psychology and the meaning of colors, click here).
Once you have a primary color, you can start to build your palette. A full UI palette would normally have 2-3 main colors, plus one or two shades of these colors which are used to to establish visual hierarchy in a UI project, a white/gray/black color which is mostly used for text, and one red for error states, like so:
It might seem intimidating to build such a palette out of the millions of colors, hues, shades and combinations out there, but thankfully we have the following free tools to make the selection process much easier:
1. Canva color wheel and color palette generator
Canva’s RGB color wheel is a fantastic tool for creating color combinations (i.e. complementary, monochromatic, analogous, etc.), and is therefore incredibly useful for picking out secondary colors that complement your chosen primary color. The site also offers succinct explanations on color theory topics.
The palette generator, on the other hand, allows you to create a color scheme based on an image you upload into the system. This is useful for when you might have an image in your mood board which you would like to draw out the colors from to create your UI palette. Alternatively, you can browse through the site’s color combinations resource for inspiration.
2. ColorSpace
This page has been my go-to for color combinations ever since I learned about it in my UX/UI course (thank you Pia!). It’s so mind-blowingly simple to use: just type in your primary color, and the system automatically generates a series of beautifully harmonious color palettes. I swear by ColorSpace, as it has saved me a lot of time picking out the right grays and blacks, and even reds for error states for my color palettes. And no, I am not paid for my devotion to this tool, I just really love it.
3. Adobe Color
Adobe Color is a one-stop shop for everything color-related: you can create color palettes based on the color wheel (much like Canva’s color wheel tool, except you can toggle with more hues and shades), you can also extract a palette from an image, create a gradient, and even check color contrast for accessibility. It also has its own color palette library, and even a color trend page which features current color trends for different creative industries (think fashion, architecture, and yes, even UX/UI trends) – an enormous resource to draw tons of color inspiration from.
4. Material Design Color Tool
The Material Design Color Tool is an awesome page that allows you to create color palettes which you can view on UI elements on a mobile mockup in real time (talk about time-saving!). It also automatically generates lighter and darker shades of your chosen color which spares you even more minutes with color-mixing and experimentation. On top of that, you can also check if your color choices pass WCAG accessibility standards with this tool.
5. Coolors
Coolors is a random color palette generator. This tool is perhaps more useful for the primary color exploratory phase, since you can’t really type in a specific color to generate palettes from. You can, however, pick out palettes from an uploaded photo, or browse through the page’s color scheme library. Coolors also has a contrast checker tool which is very easy to use.
6. 0to255
0to255 is a color tool that automatically creates lighter and darker shades of a chosen color. This is perfect for generating lighter or darker shades of your primary colors for hover states or borders, as well as gradients.
Creating harmonious color palettes does require, at the end of the day, a lot of exploration and trial and error on your UI work, so pack a bit of patience and enjoy the color search. But the tools mentioned above definitely allow you to speed up the decision-making process. If you feel like there are other helpful color tools I might have missed, feel free to share them in the comments below!
No Comments