Color Terminologies
Understand the basic terminologies used in color theory in simple words.
What is Color?
Color, one of the seven elements of Design, is an essential aspect of UI. It can communicate meanings without text and affect user behaviors.
Color Terminologies:
Hue
- In simple words, Hue is the actual color (red, green, blue, etc.).
- Hue is just another word for color.
- It is the most basic of color terms and denotes an object’s color. When we say blue, green, or red, we are talking about hue.
The attribute that differentiates colors as red, yellow, blue, is called Hue. It defines pure colors in terms of red, green, or blue.
Saturation
- Saturation refers to intensity. (how dull/Subtle or bright/Vibrant)
- Saturated color looks bright and lively whereas unsaturated color looks dull.
- Saturation points to how a hue arises under particular lighting conditions.
- Consider saturation based on pale vs pure or weak vs strong hues.
- Something that is fully saturated is the most intense form of a hue.
- Mute or dull a hue to make it less saturated.
The attribute that defines the intensity of the color is called Saturation. The color will be bright if the saturation is high and vice versa.
Value
- Value or lightness refers to how dark or light a color is.
- Lighter colors have higher values, For example, orange exhibits a higher value than dark purple or navy blue. Black shows the least value of any hue, and white the greatest.
- Thus, White #ffffff and Black #000000
The value measures the variation among grays and refers to the darkness or lightness of a color. A hue can vary in value to form different colors. A red can change in value and become light pink or dark brown.
Chroma
- Chroma refers to the purity of a color.
- A hue with high chroma has no black, white, or gray in it.
- Adding white, black, or gray reduces the chroma.
Chroma defines the purity of a color. It is the quality that embraces hue and saturation together. A pure color has high chroma and a muted color has low chroma.
Tint
- A tint is created when white is included to a hue, lightening it.
- Sometimes, very light tints are known as pastels. However, when any pure hue is mixed with white is a tint. For example, Pink is a color as well as, a tint of red.
If you add white to the original real color, you get a tint, and thereby it is lighter than the original color.
Shade
- A shade is created when black is added to a hue, making it darker.
- The shade is usually wrongly used to represent tone or tint. However, shade only pertains to hues that are made darker by the inclusion of black.
If you add black to the original color, you get shade, and thereby it is darker than the original color.
Tones
- Tones are formed when gray is combined to a hue.
- Tones look softer or duller than pure hues.
- Tones with more gray offer a particular vintage feel to websites. They also provide an elegant or sophisticated look based on the hues.
Tones are created by adding gray to a pure hue. The addition of gray slightly darkens the original color.
Color gradient
Color gradient or color progression denotes a range of position-dependent colors used to fill an area. The colors generated by a gradient vary rapidly with position thereby producing smooth transitions.
Types Of Color Gradient:
Linear: Colors are arranged in a straight line.
Radial: Colors are arranged in a circular pattern.
Angular: Colors that sweep around the starting point in a counterclockwise direction.
Reflected: The same linear gradient gets mirrored on either side of the starting point.
Diamond: Colors from the middle to outer corners like that of a diamond pattern.
Color contrast
Color contrast is the variance between the two colors. In a color wheel, the colors directly opposite each other have the maximum contrast.
Combining Colors
Colors can be blended by subtractive or additive processes.
Additive Process: The color is created adding light to a black background. Adding colors(light) ends up making white.
Subtractive Process: The color is created by blocking white light using pigments of dye. Adding colors(pigments) ends up in black. That’s why most monitors use RGB, and printers use CMYK.
The colors should be combined in such a way that it creates harmony. This creates an inner sense of order in the visual experience for the user.
The human brain is more comfortable with harmony, and it rejects anything that is over-stimulating or under-simulating.
There should be a dynamic equilibrium that lies between extreme unity and complexity.
Types of Color Schemes:
These are the different color schemes that allow us to achieve harmony in your designs.
- Monochromatic
- Analogous
- Complementary
- Split-Complementary (Compound)
- Triadic
- Tetradic (Rectangle)
- Square
- Achromatic
Monochromatic
A monochromatic color scheme is made by choosing different tints, tones, and shades of one hue. It is simple and mostly used in minimalistic designs.
Analogous
An analogous color scheme is made by choosing colors that are adjacent to each other on the color wheel. These colors connect well and have visual unity.
Complementary
A complementary color scheme is made by choosing colors that are directly opposite each other on the color wheel. These colors oppose each other and are used in designs that need a good contrast.
Split complementary
If you like the complementary color scheme, but you feel it is too bold for your design project, you may opt for a split-complementary color scheme. It is made by choosing a color and two shades on either side of the opposite color.
Triadic color scheme
A triadic color scheme is made by choosing colors that are spaced evenly on the color wheel. These colors create a sense of equality because of the use of equally spaced varying hues. It is always better to use one hue as the dominant color while the other two as accents.
Tetradic (rectangle) color scheme
A tetradic (rectangle) color scheme is made from two sets of complementary colors that are not evenly spaced on the color wheel as shown. This will give you an equal number of warm and cool colors.
Square color scheme
A square color scheme is similar to the rectangle color scheme and is made from two sets of complementary colors that are evenly spaced on the color wheel.
Achromatic color scheme
An achromatic color scheme only involves white black and gray colors. Designers mostly prefer a black on the white color scheme but a white on black requires less energy and improves battery life.
Color Systems:
RGB
The RGB color system is mostly used in monitors and mobile phones. In this color system, code text here Red, Green, and Blue combine to form all the other colors. Each color is represented as an integer between 0 and 255.
- Red = RGB (255,0,0)
- Green = RGB (0,255,0)
- Blue = RGB (0,0,255)
- Black = RGB (0,0,0)
- White = RGB (255,255,255)
CMYK
CMYK color system is mostly used in the print industry. In this system cyan, magenta, yellow, and black are the primary colors. The value of each varies from 0% to 100%.
- Cyan = CMYK (100,0,0,0)
- Magenta = CMYK (0,100,0,0)
- Yellow = CMYK (0,0,100,0)
- Key Black = CMYK (0,0,0,100)
HEX
In this color system, the colors are represented in hexadecimal values. It is mostly used in web design.
The colors are represented as #RRGGBB where R=Red, G=Green, and B=Blue. The value of each is hexadecimal values that vary from 00 to FF.
- Red = #ff0000
- Green = #00ff00
- Blue = #0000ff
- Black = #000000
- White = #ffffff
HSL
HSL color system deals with Hue, Saturation, and Lightness. It is represented as HSL (Hue, Saturation, Lightness).
Hue varies from 0 to 360. 0 = Red, 120 = Green, 240 = Blue.
Saturation varies from 0 to 100 where the shade of gray decreases in intensity.
0 = Shade of Gray, 100 = Pure Color.
Lightness also varies from 0 to 100. 0 = Black, 100 = White.
PANTONE
PANTONE is a standardized color system. It has a well-defined set of colors and allows designers to match the colors irrespective of the equipment used for color production.
By using the PANTONE chart, people across the globe can use the same color irrespective of geographical location.
To read about more Color fundamentals refer to this Link
