Background color. Color background and saturation

Are you choosing colors for your interface that strain the user's eyes?

If you use a bright and saturated color for the background, you make life difficult for users: it immediately becomes difficult for them to view the page. Bright, saturated colors attract most attention... But if there is a lot of such a bright color, this creates an increased load on the retina, you have to strain your eyes too much.

For example, take a look at the color swatches in the image above. The left column consists of colors with maximum brightness and saturation. The right column consists of colors with 80% brightness and 80% saturation. The tolerance to the left column will be lower than to the right, because bright saturated colors are very harsh on your eyes.

Let's talk about why to use bright colours not worth it for the background of a website or application. Yes, today it is a newfangled trend - to give brightness to full. But it is not always necessary to follow the lead of fashion, especially if it borders on insanity, or interferes with the use of your product.

Let's start with theory.

Brightness Vs. Saturation

Brightness and saturation are different properties colors. The first is how much white or black is mixed in given color, while the second refers to the amount of gray.

Increasing brightness does not mean that saturation decreases either. When you decrease saturation, you turn the color to a shade of gray. When you increase the brightness, you increase the amount of color, but you do not make the color gray ().

Are you using color in your interface that strains the user's eyes?

If you use a bright and saturated color for your background, then you reduce the time the user spends on your page. The vibrant and saturated colors attract a lot of attention. But the use of such colors in a large number greatly strains the user's eyes.

Which speaker can you watch for longer?

Example... Look closely at the colors in the image above.

The left column contains the colors with maximum brightness and saturation. The right column contains colors with 80% luminance and saturation.

Your attention to the left column will be lower than to the right, as the bright colors weigh heavily on your eyes.

Brightness versus saturation

Brightness and Saturation are different color properties. The first property refers to how much white or black is mixed with the color. The second property is how much gray the color contains.

By increasing the brightness, you are not lowering the saturation. When you lower the saturation, you are mixing the color with a shade of gray. When you increase the brightness, you make the color lighter, but not gray.

Top: Increase brightness - more white. Bottom: Decrease Saturation - More Gray

Effect of color on attention and arousal

The Hue, Saturation, and Luminance Effect study found that colors with high saturation and brightness attract the most attention. The author of this study concluded that these color properties are more important than shades for attracting attention.

Two other studies, Arousal Effect of Color Saturation and Color and Emotion, found that rich colors were associated with the most arousal. Hue also affects arousal, but saturation and brightness have a dramatic effect.

Use vibrant and saturated colors in buttons

Bright and saturated colors attract the user's attention, but do not keep it on themselves for a long time. Using these colors is like screaming next to the user. You will only get their attention for a while.

Therefore, you should only use these colors in interface elements that require user action - for example, buttons. These colors will draw the user's attention to the controls and make them easier to find at the right time.

Left: The background is bright and saturated. So the focus is on the background, not the button. Right: The button uses a vivid and saturated color. She grabs the user's attention

Use a darker, less saturated color for the background

Better to do background color darker and less saturated. Darkening the color decreases the white content. While decreasing saturation increases the amount of gray.

The resulting background will not take the user's attention away from the text or content on the page. This allows the user to read the page easily and without distraction.

Left: unpleasant to the eyes. The background is bright and rich. Maximum brightness and saturation in the image on the left. Right: pleasing to the eye. The background is darker and less saturated. Brightness and saturation lower

Finding the optimal background color

There are many lightness and saturation ratios you can use for your background color. Creating a grid of color swatches will help you find the best color for your background.

First, select a base hue and set it to maximum brightness and saturation. The hue value is stored and serves as a reference point for adjusting brightness and saturation.

Duplicate the base color hue (swatch) to create four new color swatches with reduced saturation and brightness levels.

Decrease the brightness level of the two created color swatches. And lower the saturation on the other two samples. When adjusting color, use a multiple of ten.

Place saturated color swatches to the left of the original hue with 100% luminance and saturation. Place color swatches with minimum and maximum brightness on the right.

Now create a second row of color swatches. Decrease the brightness and saturation relative to the first row of colors. When decreasing the values, use the same value for each set of color swatches.

As a result, none of the colors in the second row has 100% saturation and brightness. This means that these colors are the most suitable for use in work.

You can try creating another row of color swatches if you are not satisfied with the result. To do this, create a third level of color swatches and decrease the brightness and saturation values ​​for each of them.

You now have a total of eight optimal colors with varying brightness and saturation ratios.

Examples of good and bad colors to use in the background of a website

Below are examples of pages that are pleasing and unpleasant to the eye. Notice how long you can look at each of the pages in the examples.

On the left is bad green (Panic or Prismic). On the right is a nice green (

Specificity of the contour sharpening correction of a full-color image

1. Color tone and Saturation

2. Unsharp contour

3. Auto correction

Color background and saturation

After color correction, distortions in the image should be eliminated or at least significantly reduced. However, the color saturation may be insufficient. In this case, you should use the saturation correction method.

This method is implemented in graphic editors as image correction in the HSL color model.

Such a computer color model is inherently similar to HSB (HSV). But its main parameters are: hue, lightness and saturation. If you imagine the HSL color model as a shape, then it will be a double (reflected) hexagonal cone. Its basis, like that of HSB, is base colors, and the vertices: White color saturation-controlled and black, characterized by lightness. Thus, the HSL color model is one of the most striking examples intuitive concepts of hue, saturation and brightness.

The saturation of the color in the image or in its selection is increased by increasing the value of the S parameter of the pixel color formula.

The interface for correcting an image in the HSL color model by example

Saturation adjustment using the example program Adobe photoshop CS6

When increasing color saturation, be careful not to go beyond the gamut of the device you intend to display.

Normal color saturation

Going out of gamut

You do not need to convert the image to HSL to correct lightness and saturation, but it may be useful for peaking.

Unsharp Mask menu location

As a result of the filter action, unsharp masking occurs, the program makes a copy of the image, finds in the copy an area with significant changes in color and tone ( abrupt transition, strong contrast) and sharpens their edges, which leads to increased sharpness of the contours (contrast "at the borders") and does not affect the rest ("flat") areas. An unsharp mask is created from this crisp image and superimposed on the slightly blurry original image.

Unsharp Mask interface

When simulating an increase in peaking, areas of pixels with reduced and increased lightness are built along the contours. Doing this with pixels in a full-color image can produce color artifacts, resulting in irregular colored bands along the edges. V computer graphics such artifacts are called color halo or color halo .

The background color is sufficient important element any web page. Firstly, it sets the desired mood and general mood of the site, and secondly, it facilitates the perception of the text.

The background color of the web page is set using the bgcolor attribute of the tag .

Example 1. Changing the background color

The color can be specified in hexadecimal value or by its name.

Despite the fact that you can specify any color for the background, on most sites they predominantly use White background and black letters as the most established option.

Background picture

Any suitable image can be used as a background. The background should not distract attention from the text, while it should go well with colors web pages and be small to load quickly. If after the above you still want to add a background image to the page, you should use the background attribute of the tag .

Example 2. Adding a background image

If the image smaller screen of the monitor, it will be multiplied horizontally and vertically.

Since the background image loads more slowly than the background color, it may happen that the text will not be read for some time until the images are loaded. The same can happen when images are disabled in the browser. Therefore, it is recommended to always set the background color along with the background image (example 3).

Example 3. Using a wallpaper and background color

Fixed background

By default, when you use the scroll bar, the background image moves with the content of the web page. Internet Explorer allows the background to be fixed using the bgproperties = "fixed" tag .

Example 4. Setting a fixed background

By specifying the bgproperties attribute, as shown in Example 4, the background image on the web page will remain stationary, but text, graphics, and other elements will move with the scroll bar.