Katie Wasserman Design Theory

Gradients


The Secret Formula of Gradients

Sometimes a design needs a gradient, but all of the components are separate solid-colored shapes. Applying gradients to the separate shapes would make them look 3D-shaded, and not in a good way. Most designers just guess at the color values, the gradient doesn't look right, and the art director doesn't know how to fix it.

Time for a better way. A simple formula that gets the gradient right every single time. A little bit of math that saves designers the endless cycle of revisions and approvals.

Examples

Here are some examples of these gradients made of solid-colored separate shapes. The headline of this article is an example. The wave graphic below is another example. This article will cover both of these examples in depth, calculating the gradients step-by-step.

gradient waves by Katie Wasserman
wave gradient example

Wave Gradient Step-by-Step

Here are the steps to calculate the color values for each shape.

  1. Find the darkest value in the series.
  2. Find the lightest value in the series.
  3. Solve the formula for x.
  4. Calculate the values of the colors.

This gradient is based on shades of cyan. The darkest value in the series is 100% cyan. The lightest value needs to be light enough for a noticeable gradient and dark enough for contrast on a white background, 20% cyan. Let's call the lightest color L, the darkest color D, and the other colors C1 and C2, with C1 being lighter than C2.

  • L = 20
  • C1 = 20 + x
  • C2 = 20 + y
  • D = 20 + z

What are x, y, and z? How can find their values? By experimentation, I found that x, y, and z are the Triangular numbers.

Triangular numbers
  • L = 20
  • C1 = 20 + T1x = 20 + x
  • C2 = 20 + T2x = 20 + 3x
  • D = 20 + T3x = 20 + 6x
  • D = 100
  • 100 = 20 + 6x
  • 100 = 20 + 6x
  • 80/6 = x
  • x = 13.33333

Now that we've solved for x, we can calculate the values of the other colors.

  • C1 = 20 + 13.33333 = 33.33333
  • C2 = 20 + 3 x 13.3333 = 60

The values of the other colors in this example are 33.33% cyan and 60% cyan.


type gradient by Katie Wasserman
type gradient example

type gradient step-by-step

The steps to calculate the color values for each letter in this type-based gradient are the same as the wave example.

  1. Find the darkest value in the series.
  2. Find the lightest value in the series.
  3. Solve the formula for x.
  4. Calculate the values of the colors.

Like the first example, this gradient is also based on shades of cyan. The darkest value in the series is 100% cyan. The lightest value is just a bit darker at 30% cyan. The lightest color is L, the darkest color is D, and the other colors C1, C2, C3, C4, C5, C6, and C7.

  • L = 30
  • D = 30 + (T7)x

T7 is the number of units in a triangle when the row at the base of the triangle is 7 units.

  • T7 = 7+6+5+4+3+2+1
  • T7 = 28
  • D = 30 + (T7)x
  • D = 30 + 28x
  • D = 100
  • 100 - 30 = 28x
  • 70 = 28x
  • 70/28 = x
  • x = 2.5

Now we can solve for the other color values with x.

  • C1 = 30 + 2.5 = 32.5
  • C2 = 30 + 3 x 2.5 = 37.5
  • C3 = 30 + 6 x 2.5 = 45
  • C4 = 30 + 10 x 2.5 = 55
  • C5 = 30 + 15 x 2.5 = 67.5
  • C6 = 30 + 21 x 2.5 = 82.5

The values for the colors in the type gradient are: 30% 32.5% cyan, 37.5% cyan, 45% cyan, 55% cyan, 67.5% cyan, 82.5% cyan, and 100% cyan.