### How to calculate the hex color in the middle of a gradient with JavaScript?

Sometimes, we want to calculate the hex color in the middle of a gradient with JavaScript.

In this article, we’ll look at how to calculate the hex color in the middle of a gradient with JavaScript.

### How to calculate the hex color in the middle of a gradient with JavaScript?

To calculate the hex color in the middle of a gradient with JavaScript, we can convert the color numbers to decimal, find the halves, and then convert the result back to hex and concatenate them.

For instance, we write:

``````const color1 = 'FF0000';
const color2 = '00FF00';
const ratio = 0.5;
const hex = (x) => {
};

const r = Math.ceil(parseInt(color1.substring(0, 2), 16) * ratio + parseInt(color2.substring(0, 2), 16) * (1 - ratio));
const g = Math.ceil(parseInt(color1.substring(2, 4), 16) * ratio + parseInt(color2.substring(2, 4), 16) * (1 - ratio));
const b = Math.ceil(parseInt(color1.substring(4, 6), 16) * ratio + parseInt(color2.substring(4, 6), 16) * (1 - ratio));
const middle = hex(r) + hex(g) + hex(b);
console.log(middle)
``````

We define the `hex` function that converts the decimal number `x` to a hex string with `toString` and the prepend 0’s to it until it reaches the length of 2 with `padStart`.

Next, we call `Math.ceil` with the hex color multiplied by the `ratio`.

Then we add the 2nd color string converted to a decimal number multiplied by `1 - ratio`.

Finally, we convert the decimal numbers back to hex strings with `hex` and concatenate them together.

Therefore, `middle` is `'808000'`.

### Conclusion

To calculate the hex color in the middle of a gradient with JavaScript, we can convert the color numbers to decimal, find the halves, and then convert the result back to hex and concatenate them.