Light and Dark

Value is the term used to describe lightness and darkness of color in design and art. Our ability to see anything is due to value contrast — differences — in light and dark.  After value, chroma (color) comes into play.

When there is less contrast between light and dark, edges and objects become difficult to perceive. In reduced light situations, such as after sunset, we are mostly reliant on our light-dark perception than our chroma perception.

Value is expressed in a grayscale: a stepped chart that includes white, black, and everything in between.

Value Is A Color Property

Value and color are related. First, value is a property of color, along with hue and intensity. Whenever we look at color, all three properties are working separately and concurrently. Designers need to be able to “separate” their perception of value, hue and intensity in order to work will color .

Second, every color has value. A pure green sits in the middle of the value scale (grayscale). A pure yellow sits on the lighter end, and pure violet sit on the darker end. Yellow is not as light as white (which is 0% value) and violet is not as dark as black (100% value).

As designers and artists, we need to know the value — the degree of lightness or darkness of a color — in order to make good color choices and bring our work to life.

Using Value Contrast

Designers use value to:

Create space. Since light and dark are opposites, playing up those contrasts can bring objects forward or send them into the background, suggesting volumetric space in a two-dimensional design, photo or illustration.

Separate figure and ground. The lighter a shape against a dark background, the more separation is perceived. The opposite is also true. The darker a shape, the more it separates from a lighter background. This is why you should want to design websites with black type rather than gray if the background is white. The increased contrast between the color of the type and the background makes the type more legible for site visitors.

Create focal points. By emphasizing value contrast in certain areas of a design, you can create visual entry points and areas of focus. This is explained in the video tutorial above.

Create mood. Darker values can be used to create a somber or serious mood, while lighter values can be used to create a light-hearted feel. This is true no matter what chromatic colors are used.