A bit of color theory applied to screens

sunset tree

In this article I will tell you a little about color theory applied to screens. In this way you will be able to know a little better how the color choice works in programs such as Photoshop.

We have a wide variety of colors available, and for the most part, we describe color in a way that makes it difficult to see the relationships between different colors. Names like red, green, blue, yellow, purple, and brown are broad names for conversations about colors but provide little insight into the structure of that color. From the moment we can speak, color is processed by the linguistic part of our brain and its meaning is tied to the names we give to colors.

Dimension, on the other hand, is processed differently by our brains. We measure the dimension of a shape that is proportional to a constant increment and well known as inches or centimeters. These measurement ideas come naturally to us and, while color can be measured and described similarly, it is often very difficult for us to understand and manipulate color as a measure of its parts.

It wasn't until Isaac Newton did a series of experiments with prisms in 1600, before we really began to understand that light was made up of different colors that can be measured independently of each other. From that moment, color wheels were adopted by artists in order to better understand and mix colors.

While most artists use red, yellow, and blue as primary colors, and most classes in color theory refer to these as the primary colors, science has evolved since the days of Isaac Newton. The eyes contain several light receptors. The receivers called «Canes»Detect shadows and lights, and the«cones»Detect three primary colors: red, green and blue.

These three primary colors will surely be familiar to those of us who work with programs such as Photoshop, because it is the way we determine the color mode (RGB). Monitors have red, green, and blue parts in each pixel. Each color has 256 variations in brightness that give rise to a total of 16.777.216 different color possibilities. We can describe the color on the web or in Photoshop with the RGB color function rgb (255,115,0) or hexadecimal values ​​# FF7300, both of which describe the same color in a slightly different way.

Relative color

adobe kuler

To start thinking about color and its relationships we can start with the color function CSS hsl (). This function breaks the color in hue, saturation and brightness. Hue is expressed as a degree without the degree symbol (out of 360) while saturation and brightness are expressed as percentages without the percent symbol (out of 100).

Therefore, "hue" is expressed as a value of 360. This value is assigned to a color wheel. Imagine, think or visualize a color wheel. If you have red (0) and you want to make yellow, you would just move the hue to 60. In color theory there is the concept of complementary colors, which are two colors on opposite sides of the color wheel. To find a complement of red you would only have to find the value that is 180 ° around the wheel from red. In this case 0 for red plus 180 and the resulting color is green.

Saturation and brightness is a bit easier to understand. Fully saturated color (100) has no gray at allWhile a saturation of 0 we already talked about, for example, a grayscale image. With gloss, 0 is black and 100 is white. Adjusting these values ​​up and down will make the chosen color lighter or darker. Because our conception of color is often tied to the hue of a color, it is much easier to think of saturation and brightness in terms of scale.


Leave a Comment

Your email address will not be published. Required fields are marked with *

*

*

  1. Responsible for the data: Miguel Ángel Gatón
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.