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 describes how transparent or solid a color or object appears on the screen. At 0% opacity, an element becomes fully transparent, meaning it is invisible and lets everything behind it show through. At 100% opacity, the element is fully opaque and blocks whatever is behind it.

Designers often use opacity to control focus and create visual depth. For example, lowering the opacity of a background element makes the content in front of it stand out. A button might have 70% opacity in its normal state and switch to 100% when hovered over, signaling that it is active.

Opacity can also be used to create overlays. Adding a semi-transparent black layer (around 40–60% opacity) on top of a photo can make white text easier to read. Similarly, lowering the opacity of colored shapes can create new blended colors when stacked together.^[4]