Saturation is determined as the purity of the colour, and how far the colour is from grey. If the colour contains more greyness, then it has the lower level of saturation. For example, in red, the high saturation presents the deepest red while low saturation colour is closer to grey as shown in the diagram below.
Furthermore, saturation can also be interpreted as the dominance of hue in the colour. In the hue wheel, the outermost edge contains the pure hue, as we go inward in the wheel to the centre containing grey the hue gradually decreases and saturation also lowers.
It corresponds to a physical property referred to as excitation property, where the percentage of the luminance mixed with the dominant or pure colour is measured. In the other way, it can be represented as shown below:. This concept is limited to the light having the identifiable dominant wavelength because there are also some lights whose wavelength cannot be identified.
It mainly links the physical concept of the light and the perpetual classification of the colour. This diagram is called the color wheel , and any particular spot on the wheel from 0 to degrees is referred to as a hue , which specifies the specific tone of color.
Saturation is the intensity of a hue from gray tone no saturation to pure, vivid color high saturation. Brightness is the relative lightness or darkness of a particular color, from black no brightness to white full brightness.
Brightness is also called Lightness in some contexts, in particular in SQL queries. See the Raster Extensions topic. The illustration above shows the difference between saturation and brightness. Also like saturation and lightness, temperature can be relative. Place a warm color against a warmer one and the initial color will appear cooler than if it were placed against a cool color.
In working with color our goal is to choose a palette of pleasing color combinations except for those times when a displeasing combination complements the message better. Color harmony can be subjective.
What works for your eye may not work for mine. Principles of color theory aim to reduce the subjectivity by offering guidelines that help us find pairings and groupings of colors more likely to work well. Like I said above, something clicked for me in reading Color Fundamentals.
We describe color in terms of hue, saturation, and lightness HSL , yet we typically set color values on the web using hex values and to a lesser extent RGB values. Hex and RGB are really two versions of the same thing.
Each provides possible values for how much red, green, or blue is in a given color. HSL works differently. Why is that? Why is there a disconnect in how we attempt to understand color and how we attempt to use it? If anything HSL is the more intuitive system as it actually describes the colors we see and fits with color theory.
It just seems like it would be easier if both the theory and the practice spoke the same language. They need hexadecimal values. You can use hsl in SASS and have the html output be a hexadecimal value. Keep this disconnect in how we learn about and describe color and how we use it in mind. Download a free sample from my book, Design Fundamentals. I really agree with you in saying that there is a disconnect between what color theory and color in practice.
Thanks Zell. Feel free to send me a link and also a link to your color tool. Apparently, there are two very different, but similar ways. In these two scenarios, the meaning of saturation is slightly different and hence, brightness and lightness means different things.
It seems like more disconnect to me and why I wanted to focus on HSL specifically. I figure it the theory I read uses HSL I want to start there and once I understand that system I can look to connect it to the other systems. Thanks Ahsan. Hopefully you like the color tool. Color theory is responsible for complementary, temperature, split primary, color harmony and color meaning, etc.
In short, color is the visual byproduct of the spectrum of light as it is either transmitted through a transparent medium, or as it is absorbed and reflected off a surface. Color is the light wavelengths that the human eye receives and processes from a reflected source. For the physics behind color, see the Primary Color Models page. Hue is more specifically described by the dominant wavelength and is the first item we refer to i. Hue is also a term which describes a dimension of color we readily experience when we look at color, or its purest form; it essentially refers to a color having full saturation, as follows:.
Full desaturation is equivalent to a muddy dark grey, as true black is not usually possible in the CMY combination. It indicates the quantity of light reflected. Saturation defines the brilliance and intensity of a color. NOTE: In the simple scale diagrams below, the first model indicates amount of black, white, or grey pigment added to the hue.
The second model illustrates the same scale but explains the phenomenon based on light [spectral] properties. This is a fairly simple way of looking at it, but it still might not be completely clear.
Not only do graphic designers need to understand this color construct, but fine artists do as well since digital art and rendering has become such an integral part of art processes. Regardless of the two Additive and Subtractive color models, all color is a result of how our eyes physically process light waves.
0コメント