Color theory and designing with color are huge subjects, far bigger topics than can be dealt with using a simple web app. However, a color palette tool is still useful for those already familiar with color theory, and can introduce the topic to anyone with a passing interest.
Coolors puts color palettes at the center of everything, making it easy for casual users to keep palettes safe for later use, whilst also providing some sophisticated tools for those willing to delve a little deeper.
Getting Started With Coolors
Coolors opens on a bold home page showcasing what the service has to offer. You can sign up with the site here first, but it’s not an essential requirement for using the service.
However, registration is a quick and painless procedure, despite the need to create an account with an email address.
Having an account allows you to essentially bookmark colors and palettes, so you can refer back to them at a later date. This feature alone is worth registering for.
The site makes good use of the full space a desktop display provides, but it also works on smaller mobile screens. Most usage, however, will—and should—take place on a desktop browser.
Exploring Existing Palettes
Coolors is all about managing color palettes. On Coolors, a color palette is simply a list containing between two and 10 individual 24-bit colors.
The quickest way to get a feel for the site is to see what’s already there. The Explore menu takes you to a Trending color palettes page, showing off schemes that are currently proving popular.
The concept of trending color palettes is perhaps a little unusual, but you can also sort the stream by Latest or Popular. You can even search for almost any type of color value by using keywords such as “vibrant” or “forest."
Each palette is displayed in the form of a series of vertical stripes, each stripe using one color from the palette.
When you hover over a stripe, it expands slightly to reveal that color’s hexadecimal RGB value, which can be copied to the clipboard with a simple click. It’s an excellent method of finding an appropriate color, or a full palette if you’re in a hurry.
Generating New Palettes
By default, the Generate section provides a random color palette, with five colors for you to start working with. Pressing the Spacebar produces a new random selection. This is great if you’re looking for inspiration and have no idea where to begin!
Each palette can be saved, or modified further beforehand. You can work with individual colors, and adjust them by shade if they're not quite right. Click on the View shades icon, then select an alternative shade from those presented.
One important point to note is that palettes are easy to create initially, but are mostly set in stone. Modifying a palette will prompt it to be saved as a new copy, unless you do so by specifically editing the palette, rather than opening it in the generator.
When editing colors within a palette like this, only the RGB hex code is available. We recommend using the full generator instead, loading the palette that you want to change, then saving it as a new palette before deleting the old one.
This is perhaps the most awkward aspect of the Coolors web app, and may take some getting used to.
The Saved Palettes icon toggles a sidebar that displays all palettes you’ve saved, plus all across the entire site. It’s a useful way of quickly accessing any palette.
Palettes can have tags assigned to them for easier retrieval, and can also be grouped together into Projects or Collections (there’s really no difference between the two) for later reference.
Extracting Colors From an Image
The image picker extracts colors from an image and generates a series of possible palettes based on them. You can drag the slider to view various palettes or add extra color slots.
The location of each color is highlighted in the image, and locations can be dragged to pick a different color. When done, you can save the palette to your library or export it as a file.
Finding Basic Information With the Color Picker
The color picker focuses less on fancy widgets—although there are several on offer—and more on the intricate details of one specific color. By default, the page selects a random color, but this can be adjusted by typing in a direct hexadecimal RGB value or by selecting from a range of color pickers.
With a color selected, you’ll see all its various representations from RGB to XYZ. Variations will display similar alternative colors adjusted by shade, hue, or temperature, amongst others.
This section gets even more comprehensive, dealing with different color harmonies (e.g. complementary), a color blindness simulator, and a contrast checker to see how the color performs as text on a white or black background.
Exporting a Palette
Whether you’re viewing an existing palette or creating your own, you’ll have the option to export it in a variety of formats, including:
- CSS to copy and paste into your stylesheet
- An image file, including SVG
- A PDF to showcase the palette
If you've ever scribbled a six-character code onto a sticky note or messaged someone an RGB triplet, you'll recognize just how time-saving this could be, particularly when used across a wider team.
When you export your palette as a PDF, Coolors gives you many customization options, some of which include labels to use for each color in the palette and sets of examples to include from various color spaces.
It’s not quite as sophisticated as a full design studio might produce, but it’s perfectly suitable for inclusion in a design document.
Managing Palettes With Coolors
Coolors is a surprisingly full-featured site, with plenty to offer the casual colorist and the dedicated designer alike.
The site is a modern web app with as many options for exploring color as you could possibly imagine. Although the details can be daunting, the site is accessible enough for non-experts to benefit too.