{"id":2535,"date":"2023-08-09T15:20:59","date_gmt":"2023-08-09T19:20:59","guid":{"rendered":"https:\/\/criativa.art\/en\/?p=2535"},"modified":"2023-08-09T15:25:13","modified_gmt":"2023-08-09T19:25:13","slug":"how-to-use-color-brightness-contrast","status":"publish","type":"post","link":"https:\/\/criativa.art\/en\/how-to-use-color-brightness-contrast\/","title":{"rendered":"How to use Color Brightness Contrast to create more attractive designs?"},"content":{"rendered":"\n
\"Article<\/figure>\n\n\n\n

Color contrast is a fundamental element of visual language and can influence how we perceive images. It is a powerful tool to make your designs and illustrations more attractive and impactful. In this article, we’ll explore how the contrast of luminosity between colors affects the dynamics of the design or illustration.<\/p>\n\n\n\n

What is Brightness Contrast Between Colors?<\/h2>\n\n\n\n


Color brightness contrast is the difference between the brightness of one or more colors. In other words, it’s the distinction between the lightness and darkness of color about others. The greater the brightness contrast, the easier it is to distinguish various colors present.<\/p>\n\n\n\n

Brightness-contrast is crucial in graphic design, impacting readability and overall appearance. High contrast makes the text easier to read, whereas low contrast makes it more difficult.<\/p>\n\n\n\n

In illustrations, this also happens. A high-brightness contrast provides a vibrant dynamic, while a low contrast brings softness and subtlety. Whether to use high contrast or not is an artistic choice, depending on the message and feeling the illustrator wants to convey.<\/p>\n\n\n\n

Mastering brightness contrast between colors allows us to make conscious and better choices when selecting a color palette. With this mastery, we can create superior illustrations and designs.<\/p>\n\n\n\n

The Role of Brightness Contrast in Color Harmony<\/h2>\n\n\n\n

Think about the following situation. You’ve chosen a beautiful color palette. You researched, tested, and experimented. Then, you came up with a final set of colors<\/strong> that seemingly fit perfectly with the design or illustration you drew.<\/p>\n\n\n\n

However, upon utilizing these palette colors in your project, the palette doesn’t appear favorable. Regardless of the style of the illustration, the design, the stroke, or the theme, the use of this palette seems to need a little more dynamics and life.<\/p>\n\n\n\n

Have you experienced this situation before?<\/p>\n\n\n\n

If you relate to this scenario, you might be overlooking a detail that will make all the difference: the brightness contrast between colors.<\/strong><\/p>\n\n\n\n

Simultaneous Contrast: How Do We Perceive Colors?<\/h2>\n\n\n\n

Colors are a sensation produced in the brain when light falls on an object and reflects at a specific wavelength.<\/p>\n\n\n\n

The wavelength of the light reflected by the object reaches our eyes and forms a color within the visible spectrum of human vision.<\/p>\n\n\n\n

The wavelength is the same. The color is the same. However, our brain doesn’t always interpret it that way. This fact is what we call Simultaneous Contrast.<\/p>\n\n\n\n

Simultaneous Contrast is a visual phenomenon that occurs when we perceive two adjacent colors as being more or less bright than they are. This event happens because the surrounding colors influence our perception of the brightness of a color.<\/p>\n\n\n\n

Color can appear different from what it is, depending on the context.<\/p>\n\n\n\n

This feature of color theory<\/strong> is beneficial for illustrators, designers, and visual artists.<\/p>\n\n\n\n

Thus, the perception of a color changes depending on the other colors that interact with it.<\/p>\n\n\n\n

Look at the picture below. There are two circles in squares of different colors. Which circle has the lighter color? Is the circle in the pink square or the violet square?<\/p>\n\n\n\n

\"Comparison<\/figure>\n\n\n\n

They are the same color.<\/p>\n\n\n\n

\"Same<\/figure>\n\n\n\n

The background color gives us the feeling that one circle color is lighter than the other.<\/p>\n\n\n\n

Our perception of a color changes according to the colors that are around it.<\/p>\n\n\n\n

Now look at this other example:<\/p>\n\n\n\n

\"Two<\/figure>\n\n\n\n

Yes, the colors of the circles are the same. But which stands out more? Which one is more visible?<\/p>\n\n\n\n

I believe, for most people, the circle on the left is more prominent. It’s easier to perceive amidst the background color than the circle on the right, isn’t it?<\/p>\n\n\n\n

The set on the left is more pleasing to the eye. It does not require as much effort from our brain to differentiate the colors. Because the brightness of the background color is very different from the brightness of the circle color.<\/p>\n\n\n\n

The contrast between \u201clight\u201d and \u201cdark\u201d in the left set is better than on the right.<\/p>\n\n\n\n

Imagine in an illustration or design.<\/strong> If there are parts of the artwork where these two colors interact, which one would stand out more? Which colored circle would emphasize more within the graphic project?<\/p>\n\n\n\n

Simultaneous contrast alters our perception of color based on the surrounding others, and the difference in brightness between them is one way we experience this sensation.<\/strong><\/p>\n\n\n\n

Brightness and Value of Colors<\/h2>\n\n\n\n

If you’ve used software such as Adobe Illustrator, Photoshop, or any other that includes the \u201cBrightness\u201d function in its color settings, you probably already understand how this function can alter the color.<\/p>\n\n\n\n

Note:\u00a0When we talk about brightness in this specific case, we are talking about the light emitted by the monitor.<\/strong><\/p>\n\n\n\n

Monitor colors typically utilize the RGB model<\/strong>. This model employs red, green, and blue to create all other colors, and the intensity of emitted brightness<\/strong> defines lightness and darkness.<\/p>\n\n\n\n

The value of a color<\/strong> in image editing software refers to the scale of black and white that color possesses.<\/p>\n\n\n\n

In the value scale below, 0 (zero) is the value for pure black, and 100 represents white. Intermediate values produce varying shades of gray. The higher the value, the lighter the color will appear.<\/p>\n\n\n\n

\"Value<\/figure>\n\n\n\n

The value scale adjusts the brightness of the color. A color will be \u201cbrighter\u201d or have more \u201cluminosity\u201d the higher the value.<\/p>\n\n\n\n

\"Light-dark<\/figure>\n\n\n\n

The value of color changes its brightness contrast.<\/h3>\n\n\n\n

Let’s go back to the example of green circles and squares. Using Illustrator’s HSB<\/strong> panel, let’s observe the difference in brightness (value) between the two sets:<\/p>\n\n\n\n

\"There<\/figure>\n\n\n\n

In the example above, the square’s brightness (value) is 100%, while the circle’s is 67.84%.<\/p>\n\n\n\n

\"There<\/figure>\n\n\n\n

In this second example, the square’s brightness is 78.82%, and the circles remain at 67.84%.<\/p>\n\n\n\n

The contrast between the brightness<\/strong> of the square and the circle is more pronounced in the first example compared to the second. This fact leads to a higher contrast<\/strong> effect. Apparently, the circle contains more \u201cblack color\u201d than the square.<\/p>\n\n\n\n

How can I adjust the color value in Illustrator and Photoshop?<\/h2>\n\n\n\n

If you want to change the brightness of colors in Illustrator and Photoshop software, follow this short and quick tutorial:<\/p>\n\n\n\n

Changing the color value in Illustrator<\/h3>\n\n\n\n

To access the HSB panel in Illustrator, go to Window > Color<\/strong> or use the shortcut F6<\/strong>. The Color<\/strong> window will open. Click on the icon with three dashes at the top left of the panel and choose the HSB <\/strong>option.<\/p>\n\n\n\n

\"Illustrator<\/figure>\n\n\n\n

Changing the color value in Photoshop<\/h3>\n\n\n\n

Go to the Window > Color<\/strong> menu or use the F6 shortcut<\/strong>. The Color<\/strong> window will open. Click on the three dashes at the top left of the panel and select the HSB slider<\/strong> option.<\/p>\n\n\n\n

\"Path,<\/figure>\n\n\n\n

How do I know if the brightness contrast between colors is good?<\/h2>\n\n\n\n

Take a look at the two illustrations below. Which one has the better color choice?<\/p>\n\n\n\n

\"Illustration<\/figure>\n\n\n\n

If you choose the image on the right, it’s precisely due to the brightness contrast between the colors<\/strong>.<\/p>\n\n\n\n

The brightness of the colors contrasts more in the second image, so the perception of a color is more prominent in the set.<\/p>\n\n\n\n

On the other hand, the second image appears more subdued, less vibrant, and less dynamic.<\/p>\n\n\n\n

This event is because the brightness levels of the colors are very close.<\/p>\n\n\n\n

It’s important to note that there are no rules in art. There are no rules in creation. The decision to create more brightness contrast between colors depends on the feeling you want to evoke in people. The difference is that now, these choices will be conscious, right?<\/strong><\/p>\n\n\n\n

Testing color contrast<\/h3>\n\n\n\n

We’ve already seen that one aspect of brightness contrast between colors lies in the difference between \u201clight\u201d<\/strong> and \u201cdark\u201d<\/strong> among them.<\/p>\n\n\n\n

So, observing the image in black and white<\/strong> will give a better sense<\/strong> of the differences in color values.<\/p>\n\n\n\n

See the difference between the two illustrations when we switch them to black and white.<\/p>\n\n\n\n

\"Black<\/figure>\n\n\n\n

The range of grayscale<\/strong> in the image on the right is broader.<\/p>\n\n\n\n

The image on the left has shades of gray very close. The colors are more monotonous, dull, and less vibrant.<\/p>\n\n\n\n

Learn how to convert the image to black and white in Illustrator and Photoshop.<\/p>\n\n\n\n

Change the image into black and white in Illustrator.<\/h3>\n\n\n\n

Click on the \u201cRectangle Tool\u201d<\/strong> or use the shortcut key M<\/strong>. Create a black (#000000) square over the illustration.<\/p>\n\n\n\n

Go to the Window > Transparency<\/strong> menu to open the transparency window.<\/p>\n\n\n\n

With the black square selected, choose the \u201cSaturation\u201d<\/strong> blending mode in the newly opened transparency window.<\/p>\n\n\n\n

The illustration will turn black and white. The black square with the applied blending mode<\/strong> acts as a filter over the image.<\/p>\n\n\n\n

The advantage of this method is that you can remove the square from the illustration and still have the option to see the colored image beneath it.<\/p>\n\n\n\n

This way, you can make any adjustments and place the square back over the drawing to restore the black-and-white image.<\/p>\n\n\n\n

\n