Color Midpoint Calculator

Calculate the color between two hex colors. Use ratio 0.5 for exact midpoint.

Back to all tools on ToolForge

More in Images & Colors







Result

HEX:

RGB:

About Color Midpoint Calculator

This tool calculates the interpolated color between two hex colors at a given ratio. Ratio 0.5 gives the exact midpoint.

Color Interpolation Formula

// RGB Color interpolation
function interpolateColor(color1, color2, ratio) {
  // Parse hex to RGB
  const c1 = parseHex(color1);  // {r, g, b}
  const c2 = parseHex(color2);

  // Interpolate each channel
  const r = Math.round(c1.r + (c2.r - c1.r) * ratio);
  const g = Math.round(c1.g + (c2.g - c1.g) * ratio);
  const b = Math.round(c1.b + (c2.b - c1.b) * ratio);

  // Clamp values to 0-255
  return {
    r: Math.max(0, Math.min(255, r)),
    g: Math.max(0, Math.min(255, g)),
    b: Math.max(0, Math.min(255, b))
  };
}

// Example: #FF0000 to #0000FF at ratio 0.5
// R: 255 + (0 - 255) * 0.5 = 128
// G: 0 + (0 - 0) * 0.5 = 0
// B: 0 + (255 - 0) * 0.5 = 128
// Result: #800080 (purple)

Color Interpolation Examples

Color 1 Color 2 Midpoint
#FF0000 (Red) #0000FF (Blue) #800080 (Purple)
#FFFF00 (Yellow) #0000FF (Blue) #808000 (Olive)
#00FF00 (Green) #FF0000 (Red) #808000 (Olive)
#FFFFFF (White) #000000 (Black) #808080 (Gray)
#FFA500 (Orange) #FFFF00 (Yellow) #FFD400 (Gold)

Common Use Cases

Frequently Asked Questions

How is color interpolation calculated?
Color interpolation calculates the midpoint by averaging each RGB channel separately. For each channel: result = color1 + (color2 - color1) × ratio. At ratio 0.5, this gives the exact midpoint. For example, interpolating #FF0000 (red) and #0000FF (blue) at 0.5 gives #800080 (purple).
What is color interpolation used for?
Color interpolation is used for creating gradients, color ramps, smooth transitions in animations, generating color palettes, designing design systems with consistent color scales, and creating intermediate states for UI hover/focus effects.
What is the difference between RGB and HSL interpolation?
RGB interpolation can produce grayish midpoints when mixing saturated colors. HSL interpolation (hue, saturation, lightness) often creates more visually pleasing gradients by following the color wheel. This tool uses RGB interpolation for simplicity and predictability.
How do I create a gradient with multiple steps?
Use multiple ratio values between 0 and 1. For a 5-step gradient: calculate colors at ratios 0, 0.25, 0.5, 0.75, and 1. Each step gives you the intermediate color. You can automate this with a loop that increments the ratio by 1/(steps-1).