Color is important.
Color conveys emotions (urgency, calm, fun). It provides your readers with additional information (warnings vs disabled buttons). Color sets the tone of your website and guides your readers to where you want or need them to go.
If you're designing your brand or website, choosing a color palette is one of the first things you'll do.
But with so many colors to choose from, how do you decide which ones to use?
Here are some of my favorite color palette generators and color tools to help you design your brand and website.
Color Inspiration
These tools are so helpful for generating color palettes and seeing them in use. I often use these tools first to get an idea of what colors would work best and then hone from there.
Coolors is a super fast and simple color palette generator. Press spacebar to generate a new palette, lock in colors that you like, adjust and refine colors, and then export your palette when you're ready.
Color Safe is a tool to create accessible color palettes from the very beginning. Simply choose a background color to get started and this tool will generate colors that are guaranteed to contrast well with your chosen color.
Want to see beautiful artwork and illustrations that incorporate a particular color? Turn to Dribbble's color tool. Search for the color you want to see and Dribbble will provide you with a number of illustrations and projects that use that color. This is great for seeing if the color looks good in the wild or for finding more colors to add to your color palette.
Pinterest is so useful for collecting and organizing colors, images, and textures that you love. Here, you can find plenty of curated color palettes. Here's my Color Palettes board to get you started.
A free browser extension for Chrome that generates color palettes based on any website. This tool auto generates color palettes using several different generators. You can choose which colors you like, create shareable links and fine-tune your color palette until it's just right.
Want to use one of the 147 colors that have names? Use this tool to find a color you like and then find out what the name of the color is!
This is a tool that uses your top 50 color preferences to generate a color palette just for you. "By choosing a set of 50 colors, you'll train a neural network powered algorithm to generate colors you like and block ones you don’t, right in your browser."
If you're a fan of modern gradients, check out Gradient Hunt. There are plenty of gradients here to start your project off right!
Want to see how different colors look on your logo, illustrations, wireframes, or other graphics? Design them in grayscale and then use this tool to try on different colors.
Accessibility and Color Contrast
While creating your color palette, keep in mind that not everyone sees color the same way. People have different vision limitations and these can affect the way your favorite colors look to them. Use these tools to help you create a color palette that doesn't leave anyone out.
A color contrast checker that will show you if your text passes Web Content Accessibility Guidelines (WCAG) at different standards. This tool is especially useful if you're new to WCAG because it tells you what it's testing for.
Contrast Ratio by Lea Verou
I personally love using this handy little tool put together by Lea Verou. Simply add your background color and your text color to see if your contrast ratio passes standards. If not, you can use the up and down keyboard arrows to change the colors and try to get closer to passing standards.
Another useful way to test color contrast. Use sliders to change the Hue, Saturation, and Lightness of the different colors until your colors pass color contrast standards.
Color Games
If you're having fun, it doesn't feel like learning right? These games may not be helpful for everyday color palette design, but they can help you level up your color skills!
Complete a quick hue sorting challenge to see if you have a color vision deficiency. This challenge doesn't replace a full exam, but it's fun to sort the colors and it may just turn up an issue you weren't aware of.
Want a fun way to practice your hexadecimal color knowledge? Play this game and shoot the hex invader whose color matches the hex code provided to you. Useful? Maybe not. Fun? YES!
The RGB Challenge is similar to Hex Invaders but without the Invaders. Here, you choose the color that matches the RGB Color Code given to you. Could be a fun way to test your RGB knowledge!
Match the color in the center and get as close as you can! This can help you get more familiar with the color wheel and help you choose the correct color faster.
Okay, I can't pretend that I have any use for this game. You simply click on the lighter color of 2 colors as quickly as you can. The game ends when you click on a darker color. The more light colors you click on, the higher your score. Waste time with color!