How can I get the color halfway between two colors?

html

color-blending

hsl

css-preprocessors

byAnton Shumikhin·Aug 12, 2024

To get a midpoint color, average the RGB values of two given colors. You can use the following JavaScript function:

function midpointColor(hex1, hex2) {
  let lerp = (a, b) => Math.round((a + b) / 2); // because who doesn't love a lerp'l?
  let hexToRgb = hex => parseInt(hex.slice(1), 16); // "No hex, no vex," am I right?
  let rgbToHex = rgb => '#' + rgb.toString(16).padStart(6, '0'); 
  let color1 = hexToRgb(hex1), color2 = hexToRgb(hex2);
  let blendedColor = lerp(color1 >> 16, color2 >> 16) << 16 | lerp(color1 >> 8 & 0xFF, color2 >> 8 & 0xFF) << 8 | lerp(color1 & 0xFF, color2 & 0xFF);
  return rgbToHex(blendedColor);
}

console.log(midpointColor('#ff0000', '#0000ff')); // #800080, because who wouldn't want a nice, juicy purple?

Using this method performs a linear interpolation (lerp) between two hexadecimal colors, outputting the hexadecimal value of the blended color.

Addressing the unexpected: RGB and Human Perception

The Non-Uniformity of RGB Color Space

While you might instinctively think of using RGB, averaging color values in this space can lead to results that are not visually consistent due to the RGB color space's non-perceptual uniformity.

Why Consider HSL?

Achieving a more natural blend may require you to convert your colors from RGB to HSL (Hue, Saturation, Lightness), perform your interpolation there and then convert back to RGB. It's somewhat counter-intuitive, but it takes into account human color perception.

Coding in Multiple Languages

A myriad of programming languages are used in the coding world. Therefore, throwing in some explanations or code snippets in languages such as Python, C#, or Java might increase this answer's relevance for a larger audience.

Using Pre-existing Tools

For those who work with CSS preprocessors, using LESS's mix() function might come in handy. Meanwhile, interactive online tools such as ColorBlender can give quick insights on how the midpoint color between two given colors will look like.

Diving Deeper: Coding Considerations and Techniques

Taking Padding Seriously

When youre **converting to hexadecimal**, making sure all RGB components are two digits long is critical. To ensure these values are correctly formatted, you can use a padToTwo()` function.

Average All the Hexes!

You can create a hexAverage() function using Array.reduce() (because reducing is eco-friendly too, right?) to calculate the average hex color, giving you a more precise result.

Human Perception Matters

To ensure the blended color is pleasing to the human eye, it`s essential to consider how color perception works. Switching to the HSL/HSV color spaces may save you from having to apologize to your design team later!

Connecting the Dots

Don't forget to refer to Programming-Idioms for code samples in various languages that will do your midpoint color calculations, supporting developers from diverse backgrounds.

explain-codes / Html / How can I get the color halfway between two colors?

Linked

Random color generator



How to change text transparency in HTML/CSS?



How to get an element's padding value using JavaScript?



How to check if a number is between two values?



How to practically and humorously perform an integer division, and separately get the remainder, in JavaScript?

