The Need for a Custom Color Interpolator

While experimenting with generated color palettes for a data visualization project, we encountered a need for greater control over the color transitions. The standard methods provided either too much automation or required extensive manual input. Thus, the color interpolator was born out of necessity, providing a solution that bridges this gap.

Core Concepts of the Color Interpolator

The color interpolator generates intermediate colors from two input colors. This process involves:

• Defining a starting and an ending color in RGB format.
• Specifying the number of steps or intermediate colors required.
• Utilizing an interpolation function to blend the colors.

/**
 * Interpolate two colors
 *
 * @param color1 - The starting color
 * @param color2 - The end color
 * @param factor - The interpolation factor (default: 0.5)
 * @returns The interpolated color
 */
function interpolateColor(
  color1: number[],
  color2: number[],
  factor: number = 0.5
): number[] {
  if (color1.length !== color2.length) {
    throw new Error('Color arrays must have the same length');
  }
 
  return color1.map((value, index) => {
    const diff = color2[index] - value;
    return Math.round(value + factor * diff);
  });
}
 
/**
 * Create an array of color values between two colors
 *
 * @param color1 - The starting color in the format 'rgb(0, 0, 0)'
 * @param color2 - The end color in the format 'rgb(255, 255, 255)'
 * @param steps - The number of desired colors
 * @returns The array of interpolated color values
 */
function interpolateColors(color1, color2, steps) {
  const [r1, g1, b1] = color1.match(/\d+/g).map(Number);
  const [r2, g2, b2] = color2.match(/\d+/g).map(Number);
 
  const interpolatedColorArray = [];
 
  for (let i = 0; i < steps; i++) {
    const factor = i / (steps - 1);
    const [r, g, b] = interpolateColor([r1, g1, b1], [r2, g2, b2], factor);
    interpolatedColorArray.push(`rgb(${r}, ${g}, ${b})`);
  }
 
  return interpolatedColorArray;
}

Usage

The usage involves:

• Defining the start and end colors (COLOR_ONE and COLOR_TWO).
• Setting the number of desired color steps (STEPS).
• Applying the generated colors to HTML elements, in this case, divs within a wrapper.

See the Pen{' '} Interpolate colors {' '} by Benjamin Charity ( @benjamincharity) on{' '} CodePen.

This color interpolator exemplifies how a simple yet powerful tool can significantly enhance the aesthetic and functional aspects of data visualization. Bridging the gap between automated color generation and manual control empowers developers to craft visually appealing and informative visualizations easily. This adaptable and straightforward tool is not just a solution to a specific problem but a valuable addition to the broader toolkit of any developer engaged in the art and science of data visualization.