How to Create a Color Palette
So, how do you choose colors for your site? If you or your client has a logo, that’s where you should start.
No logo, then pick a color that appeals to your target audience. You do this by writing down the words that best describe your or your clients business and who the product or service is used by and then pick colors that appeal to that group. Here’s a list of colors and who they appeal to.
Ahh, but then how do you build a cohesive palette around your base color? There’s several free online tools available to help with this, and we’re going to take a look at a few of them.
Color Space
This is the simplest of the color generators we’re going to look at. Basically, enter your base colors hex number and click generate. Or use the color picker to select a color. The site will generate several color palettes. Copy the color hex numbers from the palette or combination of the palettes you want to use. If you’re not happy with the colors, just enter a new colors hex number and generate a new set of color palettes.
You can also generate two or three color gradients. Simply enter the hex numbers, then use the arrows to select the direction of the gradient and click generate. To change the direction select a different arrow and generate again. When you’re happy with the gradient, copy the css for use on your site.
Coolors
With Coolors you can explore color palettes that were created by others or you can generate your own.
You can explore existing palettes by trending, latest or most popular. You can also search by color, style, keyword or hex value.
You have several options for the color palette. You can edit, copy the color URL, view, save or export the palette.
The generator automatically creates a color palette when opening. Each time you press your keyboards spacebar a new set of random colors is generated.
To generate a specific palette for your base color click the color’s hex number and enter your base color. When the color changes lock the color to prevent the generator from changing it . Now when you press the spacebar the colors generated will be within the palette that work with the locked color.
You can change how the site selects the colors by changing the Generate Method. This will allow you to select a color harmony. So if, for example, you were to select Monochromatic, all the colors generated will be shades, tones or tints of the locked color. You can add a total of 10 colors to your palette.
If you see a color you feel would work but feel a shade of that color would be better for the palette, you can easily view shades of a color and change the color to the shade in the palette.
You can also re-arrange the colors or delete a color from the palette.
You have options to adjust the hue, saturation, brightness and temperature of all the colors in the palette.
Finally you can generate a color palette from a logo, photo or artwork. You can either upload a photo, provide a URL to the photo or search among stock photos.
Finally, you can also create a collage to share the image and color palette.
Adobe Color
Adobe Color lets you create a color palette of up five colors. Simply select the first color and enter the hex number of our base color, then click the triangle at the bottom to set the color. Once you do this a palette of colors will be generated from the base color and the color harmony selected. The color wheel shows you how the selection is being made.
Selecting a different color harmony adjusts the colors in the palette. Drag any one of the circles on the color wheel to further adjust the color palette or you can use the RGB and brightness sliders below any of the colors to make additional adjustments.
You can create a color palette from a logo, photo or artwork. Click Extract Theme and then drag in an image to add. This will automatically generate a color palette. You can adjust the colors by changing the mood selection or all the selected colors by simply dragging the color circle to a new location. You can save the color palette if you have an account, or copy each color to use on your site.
You can Extract Gradient from an image and can adjust which points are used in the gradient and where along the path the colors display. You can also adjust the number of points, up to a maximum of 15. You’ll need to have an account to save and have access to download the gradient as either a png or svg file.
Adobe Color Accessibility Tool
The last thing we want to talk about is color blindness.
Around 320 million people are colorblind, 95% being men. 98% of those with color blindness have red-green color blindness.
The accessible color wheel reveals issues with three types of color blindness and below the wheel a simulated view shows how your color palette will appear to those affected by each type of color deficiency. Problematic colors display a line in the color swatch and highlights which colors may be indistinguishable to someone with color blindness.
To fix the colors simply drag the circle creating the color conflict until the bars disappear. Now the colors will create enough separation for those with color blindness.
We want to look at one more free tool. This is very handy when you want to find tints and shades of a specific color. Just enter the hex number and click to generate the tints and shades.
Tint & Shade Generator
The top row are shades, where the color is mixed with black, and the bottom row are tints, where the color is mixed with white.
To copy one of the colors just mouseover and click.
We’ve found this tool very helpful when wanting to create background tints of a color or when a color does not have enough contrast to be used as a title or text.
These are just a few of the many tools to help generate color variations that we find very useful and help simplify creating a color palette for your site..