Blend Colors

Blend two hex colors together with a customizable ratio.

Code

General

const c1 = parseInt(color1.slice(1), 16), c2 = parseInt(color2.slice(1), 16);
const r = Math.round(((c1 >> 16) & 255) * (1 - ratio) + ((c2 >> 16) & 255) * ratio);
const g = Math.round(((c1 >> 8) & 255) * (1 - ratio) + ((c2 >> 8) & 255) * ratio);
const b = Math.round((c1 & 255) * (1 - ratio) + (c2 & 255) * ratio);
return '#' + [r, g, b].map(x => x.toString(16).padStart(2, '0')).join('');

Parameters

color1(string)

First hex color

color2(string)

Second hex color

ratio(number)

Blend ratio (0-1)

Browser·fetch() may be limited by CORS

More JavaScript Snippets

Darken Color

Darken a hex color by a percentage.

Hex to RGB

Convert a hex color code to RGB values.

Invert Color

Invert a hex color (get complementary color).

Is Light Color

Check if a hex color is light (good for determining text color).

Lighten Color

Lighten a hex color by a percentage.

Random Hex Color

Generate a random hexadecimal color code for use in CSS or graphics applications.