Choosing a Color Palette
Choosing a color palette for a project is not always as simple as it may seem. It's not generally the first decision to make when approaching a project, but it will certainly be one of your most important. Color helps to set the mood and establish a brands identity. To save yourself some headaches, I wanted to share a few key tips, as well as some resources that I use for color selection an inspiration.
The easiest way to pick a harmonious palette I think is to start with one color. Having a single color to start with will give you a jumping off point, and you can use a number of online tools to help you determine the best direction for the rest of your palette, which I go into a little later.
Understanding how different color harmonies work will make your color exploration easier too. Below is an example of the main color harmonies generated from a single base color.
Colors that are next to each other on the color wheel.
Colors that are opposite each other on the color wheel.
Colors that are adjacent to opposite of the base on the color wheel.
Double Split Complimentary
Two sets of colors and their opposites on the color wheel.
Three colors that are evenly separated on the color wheel.
Four colors that are evenly separated on the color wheel.
It's important to include neutral colors to compliment your brighter primary colors, as if you have too many saturated colors it can have a negative effect on the visual harmony. Think of neutrals as a bit like negative space; it may look like nothing on its own, but its integral the the overallA common method for using color is the 60-30-10 method. This means using your primary color in about 60% of the design, 30% neutral colors and 10% color used for highlights. I recently learned about an easy way to check your contrast by simply viewing your design in greyscale. This helps you ensure you have strong visual hierarchy and contrast. Tools like Photoshop even have settings to view your work in colorblind modes so you can make sure your work can be as accessible as possible.
Tools & Inspiration
Picking a color palette doesn't have to be a headache. Here are some of my favorite resources for creating a palette, as well as some accounts and websites with tips and a wealth of inspiration.
This is generally my go-to tool for color. It's easy to get values for whatever color space you're working in, easy to use and you can even save your palettes. The biggest draw for me is the accessibility tools, which can help you fine tune your palette to meet accessibility requirements.
Similar to Adobe Color, you can select colors and collect values. Colormind has a useful tool for generating compatible colors, but my favorite feature is that it lets you view the palette in real time on various mockups on UI elements, saving you a bit of time wondering what colors may look like in a real world context.
This site is basically a search engine for colors! Picular users search for color by using a keyword such as "excited" or "professional" and it will provide colors that are commonly associated with that term.
This is one of my favorite sites to use for inspiration. Designspiration allows searching using multiple colors and supports hex codes. You can also search by keywords.
Contrast - Plugin for Mac OS by Nothing Magical Inc.
Contrast is a tool I use frequently for Mac. Its primary function is to select two colors from your screen to verify if they meet accessibility and contrast settings, by giving you the hex values.
What tools do you like to use? Feel free to share in the comments!