Color Properties

When we talk about red, green, or blue, we're talking about hue. Hue describes a color in its purest form without any modifications such as adding white, black, or gray. When you look at the color wheel, hue is what you're seeing. It ranges from 0º to 359º, although there are infinite points on the wheel (and, therefore, infinite hues).

Shades occur when you add black to a pure hue.^[1] Shades create contrast in vibrant palettes, but be careful using them in combination with tints and light neutrals, as they can stifle the color palette and make it look dull.

Many shades — such as forest green, navy blue, or maroon — are used to create a traditional mood in design. They can give a solid, formal impression to your creative work.

Tints are the opposite of shades — they're combinations of a pure hue with white. A tint lightens the color, but it doesn't make it brighter — it remains exactly the same color, only a paler version.

Tints can range from being slightly lighter than the original hue, all the way to off-white with barely any of the original hue present. Tinted colors appear softer and easier on the eyes, and the lightest of them are called pastels. Tints often create a youthful softer mood in a design.

Tones are combinations of a pure hue with gray. Basically, toning a color decreases its intensity. Toned colors are generally considered more pleasing to the eye as well as complex, subtle, and sophisticated.

Subtle tones can make your designs look more mature since pure hues are sometimes considered childlike. Be wary of using too many tones, though, as they can dull your design and contribute to a boring color palette.

In the HSL color model (which refers to Hue, Saturation, and Lightness), lightness refers to the amount of black or white that’s mixed with the base color.^[2] A lightness of 0% will always be black, regardless of the starting color. A lightness of 100% will always be white, regardless of the base color or saturation.

In the HSV color model (referring to Hue, Saturation, and Value), value refers to how bright a color is.^[3] When the value is 0%, the color is black. When the value is 100%, the color is as bright as possible, except if the saturation is 0%. Then, the color is white. Note that while value and brightness are synonyms, lightness is a different thing.

When talking about the intensity of a color, you’re talking about saturation. Saturation defines a range from pure color (100%) to gray (0%) and indicates how vibrant or dull a color looks. Colors that are fully saturated appear vivid and bright, while those with low saturation look faded.

When a color is fully desaturated, we end up with gray. Less saturated colors can create a calming effect in your design, but be careful that your palette doesn't end up boring.

Opacity measures how opaque a color is. When opacity is 0%, the color is completely transparent; when it’s 100%, it’s completely opaque.

Opacity can be used to stack layers of colors, creating interesting new colors. It can also be used as an overlay for images to add a particular tint to the image.^[4]