Color Terminologies
By: Arpit Batri
Tags: Ui Ux Design, UI Design, Color Theory, Visual Design, Colors

Color Terminologies

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.

Gradient Example

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.

Different types of Color gradients

Types of Color Gradients

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.