CSS Tutorial – 20 Best Tools to Generate Color Palettes


Rengga Dev – Everyone loves colors. Colors are among the most important elements of every design and artwork. As designers, we work with colors every day. However, it’s not an easy task to find the best fitting color palette for a website, application, or other product.

Color theory is such a serious thing that even Goethe wrote a book on the subject. If you want to find the perfect color scheme there are a lot of rules and guidelines to follow. However, you don’t necessarily have to be an expert colorist. There are also several online tools that can help you generate a winning color palette.

Basic color wheel
You can use either galleries or generators to quickly create a fitting color scheme for your design.

Color palette galleries are collections created by either human designers or algorithms. If you don’t have a huge knowledge on color theory this is probably the better choice.

Color palette generators allow you to manually design a palette. You usually have to handle a color wheel and calculate color-related metrics such as hue, contrast, lightness, and others.

On the web, you’ll also find color palette apps that provide both functions. For instance, you can create a palette with the generator and when it’s done, you can check out similar palettes in the gallery (usually generated by other users).

1. COLOURlovers

COLOURlovers is the biggest online community related to colors, with more than 8 million members. You can browse millions of palettes uploaded by the members. Besides the gallery, COLOURlovers also has its own color palette generator called COPASO. Apart from colors, you can also browse patterns, pattern templates, and shapes on COLOURlovers.

Colourlovers Color Palette Gallery

2. Adobe Color CC

With Adobe’s color wheel, you can create analogous, monochromatic, triadic, complementary, and compound color palettes. It also has an option to generate different shades of the same color. Its interface is straightforward and easy to use. You can either move the color wheel itself or the range sliders below it. Adobe Color CC has a color gallery as well where you can check out the creations of other designers.

Adobe Color CC Color Palette Generator

3. ColorDrop.io

ColorDrop is an excellent tool if you quickly need a palette for flat design. It’s a color palette gallery that hosts numerous combinations of flat colors. You only need to scroll through the gallery and choose the color palettes you like. You can either add the palettes to your favorites or copy the hex/RGB codes of the colors.

ColorDrop Color Palette Gallery

4. Ambiance

Ambiance pulls random color palettes from COLOURlovers and displays them in the form of huge color cards. Why use Ambiance then? Its main advantage relies in the cleanness of the interface. It’s very easy to use, you just push the “Generate” button until you find a palette you like. You can copy the color codes to the clipboard with just a single click.

Ambiance Color Palette Gallery

5. Palettable

Palettable is probably the most fun color palette generator I’ve ever seen. The app displays a random color right after you landed on the page. You can decide whether you like or dislike the color by hitting either the “L” or the “D” keys. If you liked a color Palettable displays a second color that matches the first one. If you disliked it you are provided with a new color until you hit “L”. By the end, you have a full color palette, ready to use. Seriously, try this tool even if you don’t want to use it later, it’s incredibly entertaining.

Palettable Color Palette Tool

6. Colorion

Colorion has three color galleries: one for regular color palettes, one for material design, and one for flat UI design. If you click on a color you can search for related palettes. Colorion also provides you with a search bar in which you can look up all the base colors and their related palettes. Moreover, it has a simple color palette generator that allows you to generate a material color palette, extracted from your image upload.

Colorion Color Palette Gallery

7. Material Design Palette

If you quickly need a material color palette this is the perfect tool for you. You only need to pick two colors and the app takes care of the rest. The result is a downloadable color palette with eight harmonizing colors. Apart from the palettes, it also has a material icon library that excellently complements the colors.

Material Design Color Palette

8. Coolors

Coolors generates a new color palette whenever you hit the space key. Each palette consists of five colors. Coolors has several useful features. For instance, you can check out the alternative shades of each color, adjust hue, saturation, and brightness of a color, lock a color, design palettes for different visual impairments, and more. You can also download Coolors as an iOS app, an Adobe add-on, and a Chrome extension.

Coolors Color Palette Generator

9. Colormind

Colormind is a color scheme generator that makes use of deep learning. Therefore, it has the ability to learn color styles from photos and different artworks. Colormind has a great blog that explains in detail how the technology works. You can either generate random colors or lock one or more colors at the start and create related palettes. You also have the option to upload an image and let Colormind extract its most representative colors.

Colormind Color Palette Generator

10. Canva Color Palette Generator

Canva is a very simple color palette generator with which you can extract the colors of any photo. It has a nice drag-and-drop interface, so you can simply drop the photos from your computer and let it go. Then, you can copy the hex codes with just a single click.

Canva Color Palette Generator

11. Color Hunt

Color Hunt provides you with a collection of hand-picked color palettes. It started as a side project of the designer Gal Shir but now it contains thousands of palettes. New palettes are added every day and you can get the new findings in the weekly newsletter. It’s a simple tool but it allows you to quickly skim through hundreds of different palettes.

Colorhunt Color Palette Gallery

12. MudCube Color Sphere

The MudCube Color Sphere is an amazing tool, however is not for the faint of heart. It takes the color wheel to 3D. You can rotate a sphere around to get the perfect colors. It has several options you can choose from. You can create a palette according to different color rules, test the palettes for different visual impairments to improve accessibility, and create websmart and websafe palettes as well.

MudCube Color Palette Generator

13. ColorHexa

ColorHexa is the biggest online color encyclopedia that provides many great color-related tools for designers. You can also excellently use it to create color palettes. Just enter a color value into the search bar and ColorHexa displays all the related information, including color schemes, tints, tones, alternatives, and others. Use ColorHexa if you don’t want the hassle with color wheels, image uploads, and range sliders. It simply returns all the matching colors for any color you run a query for.

ColorHexa Color Palette Library

14. ColourCode

ColourCode is a sophisticated color palette generator with a beautiful UI. You can create several kinds of palettes, such as monochrome, analogic, complement, triadic, and other color schemes. ColourCode has many great features, for instance you can download the colors as Sass and LESS files, and also in PNG format. It also allows you to create a permalink to any color.

ColourCode Color Palette Generator

15. Color Blender

Color Blender is not an ordinary color palette generator, as it generates midpoints between two colors. The result can be used as a color palette for any design. You can set 1 to 10 midpoints and get the colors in either hex or RGB format. Color Blender was built by Eric Meyer who is one of the founding fathers of responsive web design.

Color Blender Color Palette Generator

16. Palettr

Palettr is an incredibly interesting color palette creator. First, you need to enter a theme or a place into the search bar. Then, Palettr finds related photos on the web and generates different palettes from those photos. It returns a handful of photos and palettes so that you can choose the best one. Below, you can see one of the palettes I got after running the “New York” search query.

Palettr Color Palette Generator

17. Colllor

Colllor focuses on consistency and harmony; no colors are standing out here. All the generated colors are close to each other, without a contrasting color. Colllor derives a color palette from the same color, however it also allows color mixing. For instance, when you use green as primary color, you can add a bluish tone to it. The app searches for common denominators such as hue, lightness, and saturation values. You can either pick colors manually or generate random colors.

Colllor Color Palette Generator

18. Pictaculous

Pictaculous is MailChimp’s color palette generator. You can create a palette based on an uploaded image. The app is linked with COLOURlovers, so it also suggests a handful similar color palettes from the site. You can download the generated colors as an Adobe Swatch file or simply copy the hex codes.

Pictaculous Color Palette Generator

19. Colr

Colr also extracts color palettes from images, however it has the extra option of pulling random images from Flickr. It has a small color palette gallery as well where you have access to color schemes created by others. Moreover, under the “Other Stuff” tab, you can fetch colors from any website, it’s pretty cool.

Colr Color Palette Generator

20. Colorfavs

Colorfavs is a complex tool. It pulls color palettes from images, however not just from image uploads but also from image URLs. Besides, it has a random palette generator that doesn’t pick colors from images but based on three variables: number of colors, hue, and luminosity. You have to set these variables manually. Colorfavs also has a small gallery where you can check out palettes and colors generated by other users.

Colorfavs Color Palette Generator

Next Steps

Choosing the best color palette is not simply a technical question. You need a good eye for design and different color tools can greatly help for sure, but you also need to think about marketing aspects before you get started.

Most importantly, you need to find the primary color that delivers your message to your audience in the most efficient way. Then, you can quickly produce the matching colors using the color palette generators mentioned in this article.

Our “Anatomy of Colors in Web Design” series can help you find the best primary color for your design. We covered green, yellow, blue, red, white, and black; check out one or all of these articles if you want to know more on the subject. Also, don’t forget to follow us on Facebook and Twitter for more articles on cutting edge web design techniques.

Nandemo Webtools

Leave a Reply