Title: Make a list of colors ranging from one color to another in Python

[10 colors blending from fuchsia to blue]

My post Make a list of color shades in Python shows how you can make a list holding different shades of a color. This example extends that one to create a list of colors that blend from one color to another. One special case would be to make the colors provide different shades of a single color as in the earlier post.

Making Colors

The key to this example is the following hsl_make_color_range function.

def hsl_make_color_range(from_hsl, to_hsl, num_colors): '''Make the indicated number of colors.''' delta = [(to_hsl[i] - from_hsl[i]) / (num_colors - 1) for i in range(3)] return ((from_hsl[i] + c * delta[i] for i in range(3)) for c in range(num_colors))

[20 colors ranging from dark red to pale yellow]

The code first calculates the changes in the color's HSL components for the steps in the color list. Next, the code uses two nested tuple comprehensions to calculate the colors. For each color number c, the code makes i range over the three HSL color components and calculates the value of each.

Examining an Example

For example, suppose:

from_hsl = (300, 1.0, 0.5)
to_hsl = (100, 1.0, 1.0)
num_colors = 3

To get from from_hsl to to_hsl in 3 colors (including the start and stop colors), the HSL values must change by these amounts between each color:

delta[0] = (100 - 300) / 2 = -100
delta[1] = (1.0 - 1.0) / 2 = 0
delta[2] = (1.0 - 0.5) / 2 = 0.25

Now applying those values for the three colors:

Color 0 =
- H = 300 + 0 * delta[0] = 300 + 0 * (-100) = 300
- S = 1.0 + 0 * delta[1] = 1.0 + 0 * 0 = 1.0
- L = 0.5 + 0 * delta[2] = 0.5 + 0 * 0.25 = 0.5
Color 1 =
- H = 300 + 1 * delta[0] = 300 + 1 * (-100) = 200
- S = 1.0 + 1 * delta[1] = 1.0 + 1 * 0 = 1.0
- L = 0.5 + 1 * delta[2] = 0.5 + 1 * 0.25 = 0.75
Color 2 =
- H = 300 + 2 * delta[0] = 300 + 2 * (-100) = 100
- S = 1.0 + 2 * delta[1] = 1.0 + 2 * 0 = 1.0
- L = 0.5 + 2 * delta[2] = 0.5 + 2 * 0.25 = 1.0

If you look at the three resulting colors, you'll see that the first is from_hsl, the third is to_hsl, and the second is halfway between those two.

Notes

The rest of the program is reasonably straightforward, but I should make a few notes.

First, note that hue values are in degrees on a circle. That means a particular value h is equivalent to h + 360 * i for any integer i. For example, if h ranges from 0 to 60, the color goes from red to yellow. If h ranges from 360 to 60, the color goes from red to yellow but it takes a very different path going down through all of the values between 360 and 40 instead of climbing up through the values from 0 to 40. The following picture shows the first set of colors on the top and the second on the bottom.

[The path from 0 to 40 (top) is different from the path from 360 to 40 (bottom) even though they both go from red to yellow]

You can use even larger hues to make the colors repeat. For example, try from_hsl = (720, 1.0, 0.5) and to_hsl = (0, 1.0, 0.5).

Second, you can use similar interpolation in the RGB color model but you won't get the wrapping effect described above. It's also not as obvious how to blend across colors that differ significantly. For example, if you just interpolate red (255, 0, 0) to blue (0, 0, 255), you'll miss orange (255, 128, 0), yellow (255, 255, 0), and green (0, 255, 0). Instead you'll work through various shades of red/blue/violet.

[100 colors ranging from light green to pale fuchsia] Third, if you want a very smooth blend of colors, make one color for each pixel along the dimension that you're varying the color. For example, if you want to fill a 100×100 pixel image with a smooth horizontal color gradient, use 100 colors.

Finally, note that I changed some of the helper functions in this example to make their code a bit more consistent. That may cause some confusion if you mix functions from this example and earlier HSL color examples.

Conclusion

The hsl_make_color_range function makes it easy to create a range of colors. It works particularly well for stepping across shade of a hue or between two hues while keeping the saturation and lightness unchanged.

Download the example to experiment with it and to see additional details.