Color circle. Cool color combination cheat sheet

Color is widely used in design - it allows you to "revive" the content - to create a semantic connection between elements, to fill the work with emotions and mood. Beginning designers pick random colors, but there are ways to use color more meaningfully. Consider 4 such methods, organized according to the principle from simple to complex.

1. Use a known gamut

More than 500 color combinations of famous brands have been collected on the brandcolors.net website. Yandex, Google, Burger King use the same palette in all their products. These brands and their colors are familiar and loved by many. Type the name in the search bar or scroll through the page, click on the desired brand and color: its code will be copied to the clipboard.

2. Choose a ready-made professional palette

The easiest way is to take a ready-made combination of colors. It is not necessary to reinvent the wheel every time, because harmonious combinations have been known for a long time. Go to colordrop.io and choose. There are hundreds of professional 4-color palettes on the site. After selecting the one you want, click and copy the color codes from the panel that opens on the right.

In addition, the service contains a ready-made selection of 24 flat design colors. Click on the left under the name "Flat Colors" and take the code of the shade you like.

3. Determine the color palette of the photo or picture you like

This method is a little more difficult. But also more effective.

On the site coolors.co in the top panel on the left, find the camera icon, click on it. An image upload window will open.
You can choose a photo or picture with the color scheme you like from your computer or copy the link to an empty column.
The service will determine the combination of colors (below, under the uploaded picture).
You can change the individual colors of this palette by marking them and selecting a point in the photo from which you want to take the color.
The "Collage" button saves the resulting palette with color codes on the computer.
The "Auto" button generates new combinations based on the same photo.
Click "OK" and go to the main page of the site for further work with the palette.

The main page of the site is no less functional. Here you can pick up shades of individual colors or assemble a new palette by replacing individual colors.

4. Create your own color scheme online

By uploading a photo to the same site coolors.co, you can not only determine the color code, but also create your own combinations. To do this, press the spacebar - the service automatically creates a combination of 5 colors.

On every color 4 button icons:

Alternative shades - Shades of color (darker and lighter),
Drag (Move color to the right or left on the palette),
Adjust (Adjust hue, saturation, brightness, etc.),
Lock (fix color).

Color is one of the most important elements in the designer's work. But as a concept, it's quite difficult to master: the many combinations of palettes often make it difficult to decide how best to style the interface of web pages and applications. Previously, we published reviews of tools of choice and. And today we want to expand on the topic by posting a translation of the Essential Color Tools for UX Designers article by Nick Babich on the blog.

This post contains a list of the best color matching services for websites and UX design that will save you a lot of time. Through these projects, you will learn:

where to draw inspiration from;
how to create your own palette;
how to make design accessible to people with color vision impairments.

1. Looking for inspiration

Colors of nature

Draw from the world around you. All you need is just to look around. Fashion clothes, book covers, interior design... there are so many amazing things around you. But the best color combinations are the colors of nature. Capture a beautiful moment and try to create your own selection based on a specific image.

The best color combinations are found in nature. You can get a color scheme from any photo

Behance

In the popular service you will find interesting works included in the best online portfolios of real professionals in their field. This site is also a great source of inspiration. To see new worthy examples of projects, just select the color you want.

Dribbble Colors

Dribbble is one of the best that will come in handy when creating a user interface. If you want to visually understand how others have used a particular color, go to dribbble.com/colors and enter the value you want.

When choosing a color for the site, here you can set its minimum percentage - experiment, for example, try to set 30% blue.

Try setting a minimum percentage of a certain color in Dribbble

design inspiration

Designspiration is a useful tool primarily for those who already have color combination ideas and want to see examples of such combinations. Choose from 1 to 5 options, and you will find pictures that match the specified parameters.

In Designspiration you will find different examples color combinations

Tineye Multicolr

With the Tineye Multicolr color matching service, you can determine the desired image gamut and even set the percentage of each of them (ratio). The site is integrated with a database of 20 million Creative Commons photos from Flickr. This is definitely one of the most quick ways find in the perfect palette.

Colorzilla

ColorZilla is an extension for installation in Chrome and Mozilla Firefox browsers. It includes tools such as eyedropper, palette browsing, creation, and more.

ColorZilla extension available in Chrome and Firefox

Shutterstock Spectrum

One of the best ways to get an idea of what the color scheme will look like is to look at the corresponding images. Most solutions that offer website design color choices include this feature, but Shutterstock Spectrum has an incredibly user-friendly interface and preview that can really come in handy.

Moreover, you do not need a subscription, since a preliminary assessment of the picture will be quite enough (even despite the fact that it has a “watermark”).

W3Schools

Recently, a blog reviewed a selection from W3Schools. There is a lot of information on the topic, ranging from their names / shades codes, the theory of palette combinations and ending with a description of different formats: HEX, RGB, CMYK, HWB, etc. You will also find simple generators, converters and similar "mini-services". All in all, interesting to see.

2. Create a color palette

Material Design Color Tool

The Material Design Color Tool site color picker service lets you create, share, and preview color schemes for your selections. One of its useful functions is to measure the level of accessibility of any combination of colors.

coolors

Coolors is a site for creating a multi-color palette. Just fix a certain color and press the space bar. The tool is also good in that you will get more than one result, but you can generate several options by changing only the initial data.

Color scheme in Coolors based on photo

Adobe Color CC

Color matching service Adobe Color CC (formerly Kuler) is now quite popular. It is freely available on the Internet, but there is also a descriptor version. With this web application, you will make your palette using the color wheel:

Or you can get a specific result from the finished image:

Selection of color for the site according to the picture

There are hundreds of ready-made combinations here, look for them in the "Watch" section:

If you use the desktop version, you can export the color system you created to InDesign, Photoshop and Illustrator in one click.

palette

It is often compared to the previous Adobe Color CC as these designs are very similar. The only difference is that in Paletton you are not limited to five options, but you can experiment with additional interface tones.

Additionally, you can look at . Together with others, the application allows you to work anywhere, just using your smartphone. In addition to directly creating / exporting color palettes, here you can select certain colors from pictures or use basic options.

3. Making the palette accessible

Currently, color perception disorders are much more common than we think. About 285 million people in the world experience vision problems. You should always check whether the one you choose is available to such users.

WebAIM Color Contrast Checker

Some tones are perfectly combined with each other, while others are quite the opposite. A huge number of projects do not pass the A / A test, and this is a fact. It is very important to check the visual design of the interface and the contrast of tones, especially if there is a lot of text on the page. For these purposes, use when choosing the colors of the site.

WebAIM Color Contrast Checker is a web-based tool that checks color codes in hexadecimal values.

coolors

We have already mentioned this service above. Among other things, Coolors will also help you check your invented palette for color blindness.

Type of color blindness in a scheme

Instead of the "Normal" mode, select the type of vision problem you wish to simulate. As a result, you will understand exactly how a person who is unable to distinguish between certain colors will see your design.

This is how a person with protanomaly sees a palette

NoCoffee Vision Simulator for Chrome

With the help of the NoCoffee Vision Simulator website, you can see how people with color blindness or low vision will perceive certain web pages. For example, by specifying the "Achromatopsia" option in the "Color Deficiency" section, you will see the web page in gray.

This is what a CNN project looks like for a person with deuteranopia

Conclusion

All the color matching services for websites and UX design mentioned in the article will definitely help you in your search for an interesting and effective range. But remember: The best way learn how to create amazing palettes - practice and experiment a lot.

Introducing a useful tool for selecting colors - Itten's color wheel.

What it is?

In short, these are three disks placed on the same axis, on the surfaces of which all the primary colors of the light spectrum are displayed, as well as the maximum possible number of shades and a contrast scale.

The mutual arrangement of colors, shades, slots and pointers on the circle is implemented on the basis of the laws "coloristics" (color theory), so with its help it is very convenient to select harmonious combinations of shades where necessary.

That is, in fact, it is a "live", material cheat sheet, which displays all the main color schemes. "Live", because it can be picked up, unlike the image on the screen.

color wheel device

Designer side

Artist side

Buy

Naturally, you need to be able to use such a seemingly complex device, so on our website you can not only buy a color wheel, but also familiarize yourself with its device in detail, read instructions on how to use it, watch various videos on this topic.

We also recommend that you familiarize yourself with the online service for the selection of colors in clothes.

Circle for selecting color combinations

The predecessor of this device in its modern form is Itten's color ring (see figure below).

It was Johannes Itten who was the first to single out exactly twelve colors from the entire spectrum and arranged them around a circle in such a way that the pairs that contrasted with each other as much as possible were opposite each other. In the center, he placed a triangle with three primary colors - red, blue and yellow (it is from them that all the others can be obtained by mixing in different proportions). Itten enclosed this triangle in a hexagon, inside which he indicated what shades would be obtained by mixing the primary colors in equal proportions.

That is, the first informational message that such a layout carries is addressed to novice artists - they can clearly see the results of mixing different colors.

Let's take a closer look at this point.

Why are there twelve primary colors?

As you can see in the figure, there is three primary colors (which are also called primary).
By mixing them in pairs in equal proportion, you can get three secondary, total - six.
Mixture primary with neighboring circle secondary gives tertiary color. It turns out six more combinations, total - twelve.(Also, tertiary colors can be obtained by mixing primary colors in unequal proportions)

Of course, twelve colors are not enough to navigate the surrounding variety of colors and find the desired shade, or see what happens when mixing not adjacent, but completely arbitrary colors. Therefore, those circles that you can find on sale or order on this site are more complicated and carry much more useful information than a simple "twelve-part Itten ring".

Color mixing guide

With it, you can determine the result of mixing arbitrary colors and shades - the number of combinations is sufficient for the artist to understand which colors need to be mixed to obtain a given shade. This is a wonderful drawing aid, especially for beginning artists.

Even if the shade is slightly different from the desired one, the desired result can be achieved by changing the proportions of the mixed paints.

But how to determine these same proportions? Is it at random? No, the color wheel can help with that too.

saturation scale

This scale is on the same side as the mixing guide as the two functions work in tandem.

The saturation scale is a gradation of gray tones from black to white. From the gray cells of different brightness presented on the scale, you can always find a gray shade as close as possible in saturation to the required shade, after which it will become clear how much you need to darken or lighten the paint.

To see how this is done in practice, watch this video:

Color combination schemes

The reverse side of the disk contains no less useful information, and maybe even more - it helps to select color combinations based on the selected scheme.

Scheme color combinations- this is a figure, in the simplest case, a line connecting "suitable" colors to each other. The wording is very vague, since the selection of a chromatic scale is both a science and an art.

Firstly, the harmony or disharmony of colors is a very subjective concept. As the saying goes, "there is no friend for the taste and color."

Secondly, whether they are "suitable" or "inappropriate" - it all depends on the specific situation, mood, what exactly the artist or designer wants to say, on the style in which this work is done, whether it is necessary to highlight any element, or vice versa - make it invisible.

The color wheel is a tool on which you can visually display all the main color schemes, but you need to be able to use this tool. You must know for yourself, or at least feel which of the schemes is most suitable for your task. For our part, we will try to put on this site a maximum of useful information on how to use the color wheel (see section

Colors play a huge role in web design. To correctly choose the color scheme for the site, there are special services. I'm sure every web designer has at least one in their bookmarks.

Sometimes you sit and think about which shade of blue to choose as the main one for the site, a little lighter or a little brighter, or maybe darker ... And you still need to pick up additional ones for it. Of course, you can do it by eye, but it is better to use one of the special services.

I will not talk about color theory (this is too voluminous information), but will simply publish here the services that I have in my bookmarks and that I use.

I have been friends with this instrument for many years. The most convenient tool for picking colors (in my opinion). It has many additional features. For example, you can see an example of a light and dark page with selected colors.

It is possible to evaluate how they will see your color scheme people with color blindness and other visual impairments. You can choose web-safe colors.

Adobe Kuler is the second web tool that I use quite often. The selection of the color scheme is almost the same as on the previous site, but I love it not for that. In addition to being able to create color schemes yourself, you can view and use schemes created by other people.

To do this, click the button in the upper left menu "Watch". And you will see a gallery of all kinds of color combinations.

This tool is a bit similar to Colorscheme, but has fewer features, but it is possible to see how the color blocks will look.

I hardly use this site, but since I already have it in my bookmarks, I decided to add it.

The following two sites generate a palette from an image of your choice. It's magic :)

You choose any picture whose colors you like, the service analyzes it and gives you a color palette. These two sites differ only in how to provide them with a picture.

This site needs download picture from your computer.

A very handy color picker. Based on the principle of "Like - Dislike".

flatcolors.net

As the name implies, here you can choose colors for the trendy now, flat design. The site is interesting in that by choosing a palette, you can download it for Corel and Photoshop programs.

materialpalette.com

Another fashion trend- material design. This site helps to choose color combinations for UI (user interface). Additionally, the site has a large set of icons.

And finally, the user interface again. This is just a set of colors for UI design. By clicking on any color, you can see how white text will be read against a certain background.

These are the tools I have in my bookmarks.

Write in the comments what color matching sites for web design do you use?

Need a website with the right colors? let's do it :)

Found an error? Highlight a piece of text and click CTRL+ENTER

Guys, we put our soul into the site. Thanks for that
for discovering this beauty. Thanks for the inspiration and goosebumps.
Join us at Facebook And In contact with

Scheme No. 1. Complementary combination

Complementary, or additional, contrasting, are colors that are located on opposite sides of the Itten color wheel. Their combination looks very lively and energetic, especially with maximum color saturation.

Scheme number 2. Triad - a combination of 3 colors

The combination of 3 colors lying at the same distance from each other. Provides high contrast while maintaining harmony. Such a composition looks quite lively even when using pale and desaturated colors.

Scheme No. 3. A similar combination

A combination of 2 to 5 colors located next to each other on the color wheel (ideally 2-3 colors). Impression: calm, relaxing. An example of a combination of similar muted colors: yellow-orange, yellow, yellow-green, green, blue-green.

Scheme No. 4. Separate-complementary combination

A variant of a complementary combination of colors, only instead of the opposite color, the colors adjacent to it are used. The combination of the main color and two additional. This scheme looks almost as contrasting, but not so tense. If you are not sure that you can use complementary combinations correctly, use separate-complementary ones.

Scheme number 5. Tetrad - a combination of 4 colors

A color scheme where one color is the main one, two are complementary, and another highlights the accents. Example: blue-green, blue-violet, red-orange, yellow-orange.

Scheme number 6. Square

Combinations of individual colors

White: goes with everything. The best combination with blue, red and black.
Beige: with blue, brown, emerald, black, red, white.
Gray: with fuchsia, red, purple, pink, blue.
Pink: with brown, white, mint green, olive, gray, turquoise, baby blue.
Fuchsia (dark pink): with gray, tan, lime, mint green, brown.
Red: with yellow, white, brown, green, blue and black.
Tomato red: blue, mint green, sandy, creamy white, gray.
Cherry red: azure, gray, light orange, sandy, pale yellow, beige.
Raspberry red: white, black, damask rose.
Brown: bright blue, cream, pink, fawn, green, beige.
Light brown: pale yellow, creamy white, blue, green, purple, red.
Dark brown: lemon yellow, sky blue, mint green, purplish pink, lime.
Reddish brown: pink, dark brown, blue, green, purple.
Orange: blue, blue, purple, purple, white, black.
Light orange: gray, brown, olive.
Dark orange: pale yellow, olive, brown, cherry.
Yellow: blue, mauve, light blue, purple, grey, black.
Lemon yellow: cherry red, brown, blue, grey.
Pale yellow: fuchsia, gray, brown, shades of red, tan, blue, purple.
Golden yellow: gray, brown, azure, red, black.
Olive: orange, light brown, brown.
Green: golden brown, orange, lettuce, yellow, brown, grey, cream, black, creamy white.
Salad color: brown, tan, fawn, gray, dark blue, red, gray.
Turquoise: fuchsia, cherry red, yellow, brown, cream, dark purple.
Electrician is beautiful in combination with golden yellow, brown, light brown, gray or silver.
Blue: red, grey, brown, orange, pink, white, yellow.
Dark blue: light purple, sky blue, yellowish green, brown, gray, pale yellow, orange, green, red, white.
Lilac: orange, pink, dark purple, olive, grey, yellow, white.
Dark purple: golden brown, pale yellow, gray, turquoise, mint green, light orange.
Black is versatile, elegant, looks in all combinations, best with orange, pink, salad, white, red, lilac or yellow.