How to choose a color. Description and use of the Kuler palette in Photoshop Color wheel for photoshop cc

This is one of the questions that was asked by students during the course. Adobe Photoshop. A basic level of If you wish, you can ask additional questions directly in the comments to this post. In the future, links to all questions will be collected in one post and systematized.

3. Artists have their own color wheel, where colors are more logical from the point of view of their perception. There, yellow is the opposite of purple, red is the opposite of green, blue is the opposite of orange. Is there a mechanism in Photoshop that allows you to work with these colors?

Very good question! Just let's divide it into two, contained in the original formulation. The first one is about the color wheel itself. The second is about the mechanism of working with it.

So, what are the “color wheels”?

On the left is the cover of Johannes Itten’s book “The Art of Color” (in the original the orange is much richer, but monitors cannot reproduce this color). And on the right, on page 33, there is a twelve-part color wheel. Or as it is often called the “Itenna circle”. This is what the author of the question had in mind.

You can't rely on this circle when working with Photoshop tools. From the point of view of physics and physiology, it was built crookedly and incorrectly. But let's take things in order.

Color is a sensation that is born in the mind of the observer in response to stimulation of the visual receptors of the retina. What this sensation will be depends on the proportions between the stimulation of different groups of cones. Below are graphs of the spectral sensitivity of cones depending on the wavelength of radiation (the color gradient below is superimposed for illustrative purposes and may not exactly match the shades of spectrally pure colors).

For each group of cones, a stimulus is selected that will minimally excite neighboring groups. This is where Red, Green and Blue come from in an additive system. The biggest problem comes with the green incentive. Due to the strong mutual overlap of the curves in the region of 500 nm, it always excites not only medium, but also long and short wave cones. This is where the fundamental impossibility of creating three-stimulus monitors with a very large color gamut lies (hello from the orange cover from the first illustration).

In real life, stimuli are much more complex and are described by a spectral distribution of energy. If this distribution is uniform, then the stimulus looks achromatic, or, more simply, gray. When the brightness is high enough, we usually call it white. In this case, the white beam can be decomposed into a spectrum, which, out of habit, is also often called a rainbow. This is what was done using a prism. In the 17th century by Isaac Newton, and in the 20th century by the artist who designed the cover of the album The Dark Side of the Moon by Pink Floyd.

If a second prism is placed in the path of the split beam, it can be reassembled into an achromatic beam. It is this design that allows you to simply and clearly find out which colors are complementary or mutually complementary. If a part of the spectrum is blocked in a split beam between the prisms, the output beam will be colored in a color complementary to the blocked part. By closing the red part, we get cyan, the green - magenta, and the blue - yellow.

Therefore, it is better to arrange the colors as done on the left circle. This arrangement is correct: red is at the top, followed by yellow clockwise, etc. It is along this circle that the value of the color tone (Hue) in the HSB and HSL color models is plotted. I deliberately mirrored and rotated the Itten circle to match the red colors and provide an appropriate transition of shades. This clearly shows how uneven it is.

But what is especially important for practical application is that the work of curves is based on precisely this relative arrangement of colors. If you move the curve in the red channel down (decrease the brightness of the red stimulus), the central neutral section of the circle will turn cyan.

By reducing the brightness in the green channel, we will learn the magenta color.

Well, as for darkening the blue, we will predictably bring the center to a yellow tint. And all Photoshop tools work on this principle. Therefore, while you are working with them, forget about the Itenna circle. It will only confuse.

However, do not rush to throw out the twelve-part system. I said that it does not correspond to the physics and physiology of color perception. That is why the toolkit does not rely on it. But this system describes quite well the third, most complex level of perception - the psychology of color.

But the tool for working at this level is not Photoshop, but the head. Which tool to use for the correction is a secondary question. The main thing is to understand what needs to be achieved. The Itten circle allows you to simplify and speed up finding harmonious color combinations. With its help, you can determine which combinations the image gravitates towards, or, as they also say: find the color scheme of the picture.

Sasha Chaldryan talks about this in great detail during the first lesson of the course. "Adobe Photoshop. Creative retouching" . I will limit myself to only three small illustrations from the notes for this lesson.

Related combinations are monochromatic combinations of two or three adjacent sectors of the circle.

Related-contrasting combinations are combinations of colors, each of which contains a “related” color. Yellow-green, yellow, yellow-orange, yellow-red - for all of them there is a unifying yellow, but the scheme is quite contrasting. In this case, the picture does not quite correspond to the given diagram, but you yourself can easily guess how to correct the diagram for a more accurate match.

Triadic schemes are colors located at the vertices of an equilateral triangle inscribed in a circle.

I immediately remembered this picture:

There are a lot of unknown variables in your question: website or logo, background or button, what colors have already been used, what is nearby, what is the coverage area, etc.

Let's take green and red colors using the example of Valeera from Blizz's Kharstone and strawberries (nature itself chose the combination):

Cool, yeah? This means that green goes well with red. Now look at the hell that will happen if you make a green button on a red background or a red button on a green background:

I want to close it quickly: it’s too aggressive in both cases, it puts pressure on the brain. It turns out that green and red don’t go so well together? But if the background is, for example, white, then the green button will look great next to the red one:

Therefore, the answer to the question “what color goes with green” is only for those who see the whole picture.

Color circle

First of all, I advise you to read about the color wheel in order to have an idea and be able to use it.

There are many online services on this topic. Convenient - colorscheme.ru.

It’s easy to use - you choose a color (enter a code, or just click on the appropriate one) and get matching colors. One of the features is an example of a page with selected colors. Tabs below: light page or dark.

Color Guide

Illustrator has a cool functionality that works on the principle of a color wheel and shows the combination of colors. The panel is called Color Guide.

You take a color with a pipette and the illustrator shows you all the combinations: adjacent, contrasting, triads, and so on.

Adobe Color Themes

Photoshop itself has the same functionality. Previously, these were just themes (a set of colors), and then the color wheel itself was added to them, and now the panel is called Adobe Color Themes

Over the rainbow

I myself select colors according to the “rainbow”: I drag the slider and select the color.

In the example, I selected red, purple and orange. The scale (“rainbow”) only helps to choose a color with a different shade (H = Hue) and sometimes the result is not satisfactory. So I didn’t like the dirty and dull orange and I made it clean and cool. If you need to select by saturation (S = Saturation) or brightness (B = Brightness), then simply change the scale.

In Photoshop CC 2014, we can resize this panel to suit our needs. To make the panel wider, move the mouse cursor over its left edge, and the cursor will take the form of a double-edged black arrow. Press the left mouse button and drag the cursor to resize. Note that this changes the entire column, not just the panel itself, so all other panels in the column will become wider:

In addition, in the same way we can change the height of the panel if we move the cursor to its bottom edge.

If you want to resize the Color panel without changing the size of other panels in a column, simply drag it out of the column:

Now that the panel is undocked, we can resize only that panel. Just drag any of the bottom corners:

Note. On Windows computers, the Color panel appears in Hue Cube mode by default. On computers running Mac OS, the panel is displayed in RGB Sliders mode.

As I wrote above, the “Color” panel has two main color selection modes - the “Hue Cube” and the “Brightness Cube”, in addition to this there are others. It is the presence of many modes that makes the updated panel is so meaningful and useful, and the Color panel has become much more convenient to use than the traditional Color Picker.

Switch modes by clicking on the icon in the upper right corner and selecting from the list:

These modes work exactly the same as in the Color Picker.

Palette Cooler(Kuler) is an incredibly useful, community-driven color scheme generator that first appeared in Photoshop CS4, and launched as a web application several years before.

If you don't like working with , don't have it on hand, or need some fresh ideas for creating color schemes, you can choose from a large number of themes (as color schemes are called in the app) created by the user community.

To open Kuler palette, select menu command Window - Extensions - Kuler(Windows - Extensions - Kuler)

Note

In order for the palette to download the latest and most popular themes created by the online community of users, you must be connected to the Internet.

Attention!

The Kuler palette does not work on pirated, unlicensed versions of Photoshop. Therefore, if you have an empty palette window open, then nothing can be fixed. Works only in the licensed version of the product.

Kuler palette interface

Explanation of footnotes:

Item 1 - Search query input field.

Item 2 - Drop-down filter lists.

Point 3 - Topics.

Item 4 - Button View previous set of topics (Previous).

Item 5 - Button View the next set of topics (Next).

Item 6 - Update topics in the Kuler community (Refresh) button.

Step 7 - Edit theme button in the creation panel (Edit themes).

Step 8 - Button Add selected theme to Swatches.

Step 9 - Select the base color by dragging the circle with the mouse up/down or towards/from the center of the circle.

Item 10 - Slider brightness control.

Item 11 - From left to right:

• Add foreground color as base button.
• Button Add current background color as base (Add background color as base).
• Button Change other theme colors according to the laws of harmony (Apply harmony).
• Button Add a new color to the theme (Add color).
• Button Delete this color from the theme (Delete color).

Step 12 – Upload Color Theme to Kuler Website Button (Upload)

How to use the palette

There are three buttons at the top of the palette:

Intelligence(About). If you want to learn about the online community or become a member, this tab will take you to the app's website. After registering for free, you will be able to upload themes you create to the website, rate other users' themes, write on forums, and so on.

Review(Browse). If you want to view themes created by other users, you can search for them by entering keywords (cool, sunny, romantic, pastel, etc.), creator's name, theme name, or hexadecimal value in the search query input field. Or, alternatively, browse the list of topics using the scroll bar. Drop-down lists at the top of the palette allow you to sort topics by rating, time on the website, and so on.

To use a specific theme, that is, import its colors into Photoshop, select it, then click on the button Add the selected scheme to the samples(Add selected theme to Swatches) - point 8.

You can also click on the small triangle that appears to the right of the scheme when you select it, and select Add to Swatches Panel from the context menu.

Create(Create). Click this button to open a tab that allows you to create your own themes.

First select from the drop down list Rule(Color Ruler) color scheme: you can create other schemes. Then drag the white ringed circle on the color wheel with your mouse until it becomes the color you want to base your theme on (in other words, your main color). You will see lines that go from the main color to other colors according to the rule you chose. Other colors will also move when you move the main one.

You can drag the white ringed circle of the main color with your mouse toward or away from the center of the circle, left or right, up or down, until you find the color you want.

The middle swatch in the row of square swatches below the color wheel will show the main color. When you find the one you want, you can change its brightness value - step 10, higher to lighten it, or lower to darken it.

To change a different theme color, select it by clicking on its swatch below the color wheel. You will see that the corresponding circle on the color wheel will be highlighted with a white ring. Once a circle is selected, you can change its color by dragging it to another point on the circle, or change its brightness by moving the slider.

Once you have chosen the theme colors that suit you, click the button Save topic(Save Theme) in the lower left corner of the palette to save the theme, and then click on the button to the right to add the colors of this theme to palette Swatches.

If you notice an error in the text, select it and press Ctrl + Enter. Thank you!

Many artists use the color model H.S.B.. This mathematical model is very convenient for selecting shades and colors. Model H.S.B. based on the model RGB, but has a different coordinate system. Any color in the HSB model is determined by its color tone(shade), saturation(that is, the percentage of white paint added to the color) and brightness(percentage of black paint added). Of the three components listed, the least understood saturation. Saturation can be defined as the “liveness” of a color. The more saturated a color is, the further away from gray it is. White, black colors, all shades of gray have minimal saturation.

Look at the image. The upper sample of the spectrum has high saturation, the lower one has low saturation. In this case, the hue and brightness of the two samples are the same.

Three-channel The HSB model was named after the first letters of English words Hue, Saturation And Brightness. The HSB model is universally used for color correction - in this it is indispensable. In all graphic applications this model is present in one form or another. The advantage of this model is that it was not created for monitors or printers, but for people. After all, a person intuitively perceives color, dividing it into hue, saturation and brightness.

It is convenient to represent the HSB model in the form color wheel. The color value is selected as a point on the circle (or vector, emerging from the center of the circle and pointing to a given point). The different shades are arranged in a 360 degree circle. Red corresponds to 0, yellow to 60, green to 120, turquoise to 180, blue to 240 and magenta to 300 degrees. The points on the circle itself correspond to pure (maximum saturated) colors. The point in the center corresponds to a neutral color of minimal saturation (white, gray, black - it depends on the brightness). That is, we can say that the angle of the vector determines the hue, the length of the vector determines the color saturation. Color brightness is set on a separate axis, the lower point of which has the minimum brightness, and the top point has the maximum.