Photo HSL Data Visualization

Colors vary in hue, saturation, and lightness, but it's not always easy to fully perceive the range of colors in a photo. While linear or two-dimensional representations can show changes in one or two color values, they fall short in displaying the full color spectrum. A three-dimensional representation is ideal for mapping all colors in an image. The HSL cylinder graph effectively maps every color used in the photo across three dimensions.

To illustrate the relationship between the photo and its plotted colors on the HSL cylinder, I created an animation that transitions each pixel from its original location in the image to its corresponding position on the HSL cylinder. The result is a clear, dynamic visualization of the photo’s color range.

These animations were rendered in Blender. Each pixel’s RGB values are converted to HSL, and then translated into XYZ coordinates. The pixels are incorporated into a particle system, smoothly transitioning from their original positions in the image to their respective spots on the cylinder, and back again, forming a continuous loop.