This post is an exhaustive guide to the Coolors.co tool, which everyday users and professional designers alike use to create powerful color schemes. We're going to discuss potential use cases for this application, the features behind it, and tips and tricks we have learned to make our workflow more efficient using this tool. Feel free to use the table contents feature at the top of this page to skip to individual sections of this exhaustive article.

This tool was recently redesigned, and this guide has to do with the 2021 (current) version of the Coolors Color Pallet generator.

What is Coolors.co

Coolors.co is a really simple web app that you can quickly use to generate color schemes for you and your company. All you need to do is press the spacebar, and you'll get a good selection of color schemes. If you don't like the current one, you can simply hit the spacebar again and will give you a new one. You'll be able to repeat this process until the universe implodes, and you won't get the same color scheme twice.

With the new redesign, you get a lot more functionality, like creating color schemes from images, generating collages, and building gradients. There's also a lot more functionality for web designers, as you can now export palettes and gradients in CSS and Adobe palette file formats.

As an agency, we use this to generate color scheme ideas for branding & website projects. This is a great starting point to create a five or six color pallet to work from.

General Features

There recently was a new update to this tool, where if you hover over a border between two colors, a button will pop up that will allow you to add in another color. That means you can have 8, 9 or 10 different colors on your screen at once.

If you like one color, but want to refresh the other ones, you can lock the color that you like and the generator will create colors that work with the locked one food so for example, if you like a light blue, but all the other colors are not for you, you can lock the light blue and it will remain standard as colors change around it.

Clicking the grid icon will load a bunch of shades of the base color. If you're creating user interfaces with the material framework (or simple need shades based off one color), then you'll definitely like this feature as you can easily create darker and lighter colors.

Clicking on a shade of the color will replace the original color with the new color on the general pallet.

If you really like the color, you can favorite it and save it for later. We do this a lot, and have a base set of maybe 20 individual colors that will generate schemes from by locking that one color and refreshing other colors around it. Keep in mind, to use this functionality, and to use some other functionalities, you need to have a free account with this platform.

Many people don't know, but this application has a plug in for Adobe Photoshop. This can seriously increase your workflow, by incorporating the tool directly into a super powerful digital design platform. They also created an iOS application that does the same thing.

The newest version of Coolors which was released very recently, comes with a lot more advanced features in a cleaner package. The rest of this blog post is going to run through every single feature that this redesigned tool has, and let you know what you can do with it, tips and tricks for your workflow, and how to practically implement it into everyday situations.

The first button toggles a dropdown menu that offers you a bunch of individual settings to change. The first up is the method used to generate your color schemes. By default, the method is automatic, but you can set it to generate colors based off of certain mathematical equations, strategies, and more.

with this Google is your friend and you can learn a lot about the generation methods behind colors. This application takes tried and true methods that have been used since before computers, and simply digitizes it. So for example, if you were selecting complementary colors for your generation method, you would get colors that are complementary to each other on a color wheel. Here's an example, blue and orange:

The next option on the dropdown menu which is under your generation mode is the luminescence map. Basically it will generate a black and white version of your palette and display the luminescence of each individual color.

Luminance is a photometric measure of the luminous intensity per unit area of light travelling in a given direction. It describes the amount of light that is emitted from the individual color.

View Palette As Gradient

Your next option is to view your color palette as a gradient. In this use case, where we have six individual colors in our palette, this isn't super useful. But if you're looking to generate gradients from two colors and you want to preview them before incorporating them into your website project or design, you can do that with this tool.

Here's a good example. We want to make a gradient from a purple and a pink, and preview it before using it in any design concepts. Of course, we could go into photo shop and spend up to 30 seconds setting up the gradient, or we could just use this little tool that is included in the Coolors app.

We generate two colors using the triadic generation method. A triadic color scheme is any color palette made of three colors that are equally apart on the color wheel. For example, red, yellow and blue. Typically, one color will act as the dominant color, while the other two work as accents.

For this example, I ran through a bunch of colors until I found the blue violet shown on the right. Once I found that, I locked it and ran the generator until it generated the paradise pink.

Now, I think that this would look good as a gradient, but I can't be sure until I actually see it blending into each other.

This is the gradient that colors generated via one click, and it looks pretty good to me.

Next up on our dropdown menu is the additional settings user interface.

Zen Mode

You can use it to toggle Zen mode, which eliminates all of the headers and footers and only displays the color palette that you're generating. As suggested, this mode is very Zen, and you can even toggle full screen mode with your browser by hitting the F-11 key for even more focus.

In this mode, this is what you would see:

That covers all of the elements in the first dropdown menu that can be toggled from the main menu on the right of the screen, above the color palette.

Generate Color Scheme From Image

Next up you have a very useful tool that allows you to generate color schemes from individual photos. This is really helpful if you are theming your website around a collection of photos, and need to generate font colors, accent colors, and more.

The user interface will allow you to upload an image comma select an image from a URL comma use your camera to take an image comma or even search for one. The search feature uses the Unsplash API to gather images.

For this example, that's what we're going to use.

Let's say that you were building a website for a vacation rental house that has ocean views. You want to use an ocean image as your homepage hero, and build a color scheme around the ocean. You can search for an ocean photo using the functionality in the select image popup.

Even better, all Unsplash photos are royalty free and free to use in commercial applications. You can choose to use the exact image you generate your color scheme with, as an image in your website (You don't need to worry about the resolution or the size of the image, as most of the original images on Unsplash are at least 6000 pixels wide. ).

Once you have your image, you can use this tool to act as an eyedropper for individual colors in the photo. You can go through each of your six colors, and generate a pallet this way. Once you have your base palette, hitting the next button will bring up a menu of options.

You can open it in the generator, view the pallet, export the pallet as an image, save it, or create a collage. Each of these are an option in the main menu, and will be discussed later in this article, but selecting opening the generator is a good idea if you're trying to generate a color scheme from an individual image.

Now that we have it open in the generator, we can go ahead and select the colors that we want, and lock them. In this example I want to keep both of the Blues, and the Brown. The other Bages and Yellow need to be replaced with something that looks more appealing to the eye.

After toggling through the colors for a bit, we generate this color scheme, which can then be used in our ocean themed website. That's just one example of many of how you can use this tool to generate a color scheme from an image.

Create Color Collage From Image

Next up in the main menu options is create a collage. Clicking on this will load the image user interface again , which you can upload an image to or use to search through Unsplash. The collage maker acts similarly to the pallet generator from an image, except the original image can be exported in the collage. If you're trying to generate colors for a website designer, this may be a good idea to use, as it will show the colors that you want, and the image that you selected them from.

You can change the style and size of the actual palette, but the most functional feature with the collage generator that colors has to offer is the palette feature. The plus and minus buttons on the right side of the user interface allows you to add and remove individual colors. You can have as many as 10 and as few as two colors in your palette. The slider toggles through individual color combinations, and while you don't have the option to choose from the image, this will automatically generate color schemes from your chosen image.

Hitting export will save your image as a PNG on your computer.

This may also be a neat thing to utilize when generating Instagram photos. For example if you are an architecture studio and you're trying to differentiate your social media branding, you can generate a color palette from your individual work.

Here's an example of a kitchen color palette that could be posted on Instagram, which would differentiate you from your competition, and make your social media more memorable to perspective clients. There's an utterly massive amount of styles that Coolors has to offer which are shown in the gallery below.

Some of these are impractical for actual use. I think the creators of this application intend for you to generate collages to be shared on social media. If you’re a creative, this could be a very interesting strategy to differentiate your photos from other social media posts.

Undo/Redo

The next two options that you have are the ability to undo and redo your color generation. If you're toggling really quickly through a bunch of color schemes, and you see one that you like, you may hit the spacebar instinctively and lose the scheme. Using the undo button will bring back the prior scheme. You can toggle backwards and forwards through all schemes that you have generated during the session with this functionality. You can also use your arrow keys to do the same thing.

Color Blindness

Your next option is the color blindness tool which allows you to generate 8 color blindness specific pallets from your primary pallet. This may be helpful if you want to make your website accessible to those who are colorblind. I'm not sure, but it may also be a great tool to use for ADA regulations.

This is a super powerful tool, and one that can really help you if you're attempting to make a color scheme easy to understand for everybody. You can also use this to check your existing color scheme on your website and see if you need to make any major changes.

Keep in mind, that you can keep the color blindness setting open, which will always automatically update the color-blind sub palette when you update or make any changes to your main palette.

Pallet Adjustment Tool

Your next tool is the pallet adjustment tool. This allows you to change the Hue, saturation, brightness and temperature of your scheme.

Like the color blindness tool, this Coolors tool will open a secondary pallet, that's directly based on your primary pallet. Whenever you make any changes, it will display these on the secondary pallet, making it easy for you to compare to the first one.

You can see that we have our primary color scheme, and then our secondary color scheme showing what would happen if we increase the saturation by 100.

That comes to the end of the tools that allow you to actually change and tweak your color palette. The next set of three tools is dedicated to viewing and sharing your palette with others.

View Palette

The first option, view palette, will make a pop up show which lists all possible identifiers for the color that you have generated. It displays the basic options like hex and RGB a comma but also displays less known options that could be very helpful to interior designers and architects who are trying to purchase actual paint based off the color that they have generated.

You'll get Copic, Prismacolor, Pantone, Ral, and a bunch of other identifiers that you can then use in any application that requires color identification.

Export Palette

Your next option is the export option, which allows you to save the color scheme in multiple formats and make it easy to share with others.

You can copy the URL to send to somebody digitally, generate a PDF which may be good for printing, create an image which will save a PNG to your computer (that's the method we used when exporting color pallets generated by this tool for use in this blog post). The SCSS option will generate a stylesheet for use in CSS styling of web applications.

This is really helpful to us (Isotropic) as we can simply copy and paste, instead of having to generate this from scratch.

The ASC option allows you to download a pallet for use in Adobe illustrator and Photoshop. You can import this palette , and then it would be displayed in the color palette section of the two applications. If you're a graphic designer, this might be very helpful for you.

You also have the option to export this as an SVG.

Save To Coolors Account

Finally, the option that says save will allow you to save this individual color scheme to an account that you create with the Coolors application. We use this to save color schemes that we have generated but have no use for, and whenever requiring a fresh color scheme for a branding project or something like that, we’ll go through our account and select a scheme that we have generated in the past.

The final hamburger menu icon on the right of the main menu for the Coolors color generator Toggles a sidebar that you can use to explore other users color schemes or review your own if you have an account with the service.

There is a social aspect to this Coolors, where users can generate and share their color schemes to the community. This may be very helpful if you want to find a well-designed scheme, but don't have the time to toggle through a bunch of them yourself.

And, just when you thought we were done, let's talk about the more menu on the top bar menu of this application.

Create Gradients With Coolors.co

This allows you to do three things that we have discussed before, but also allows you to access more advanced gradient creation tools. If you select create a gradient, the colors application will load a specific tool that you can use to generate and preview gradients in real time. This is immensely powerful and very helpful to web designers. In the past, we would use Adobe Photoshop to generate our gradients, but a big flaw with it is that you can create a CSS gradient output from it very easily.

With this tool, your main export option is a CSS export.

You can also choose to export the gradient from the Coolors.co platform as an image, view it in full screen, or even copy and share the URL with somebody else on your team.

Like the pallet generator, which is the flagship feature of this application, you can also explore gradients created by the community. In my opinion, this is easier than trying to generate a gradient yourself.

Hovering over an individual gradient will allow you to view the specific colors that create it.

Contrast Checker

The final tool that the Coolors has to offer you is called the contrast checker. This tool allows you to check the contrast between a background color and a font color. This is especially important due to Accessibility rules and regulations, as well as Google ranking Accessibility and using this rank in their search engine placements.

If your website doesn't have enough contrast between its background and its fonts, not only will it be difficult for your visitors to read, but Google may actually penalize your website for this by placing it lower on their search engine.

It will allow you to input the text color in the background color, show you a preview of both colors with real words, and give you a contrast score. The highest score would be around 10, and that would come from black and white.

Here's an example of a poor contrast between the background color and the font color:

As you can see, this is painful to read and ruins the Accessibility of any website. You can use this tool to automatically give you suggestions on how to fix this poor contrast color combination. You can have a go in and change both colors or only change an individual color.

In this example, we chose to have a change both the background color and the font color. This is what the output was:

Conclusion

It's pretty amazing to think that this extremely powerful tool is free for public consumption. There's absolutely no aspect of this that is paid, no advertisements other than a partnership with Skillshare, no popups, know anything. This is an amazingly powerful tool for somebody who just wants to mess around with colors, and professional designers alike. It has multiple applications, from web design to architecture color picking, to social media generation.

We hope this blog post gave you a good overview of the features and functionality behind this tool, and how we, a web design studio, use it in our everyday workflow when creating new brands, re branding, or building websites.