Generate tints and shades of a HEX color in JavaScript

To create variations in tints and shades for an HEX color using JavaScript, we'll decode the HEX code to obtain the RGB color and then we will adjust the values of the red, green and blue colors.

Let's start by converting the HEX color into an RGB color array with a use of a simple function:

function hexToRGB (hexColor) {
    let r = parseInt(hexColor.slice(1, 3), 16);
    let g = parseInt(hexColor.slice(3, 5), 16);
    let b = parseInt(hexColor.slice(5, 7), 16);

        return [r, g, b];
}

const baseColor = "#FF0000"; // red
const rgbColor = hexToRGB(baseColor);

console.log(rgbColor); // [255, 0, 0]

Next, using our RGB color array, we will create color variations (tints or shades) using another function:

function generateColorVariations(rgbColor, type, number) {
    let r = rgbColor[0];
    let g = rgbColor[1];
    let b = rgbColor[2];

    const variations = [];

    if (type === "tint") {
        for (let i = 0; i < number; i++) {
            r = Math.min(r + 10, 255);
            g = Math.min(g + 10, 255);
            b = Math.min(b + 10, 255);
            variations.push([r, g, b]);
        }
    } else if (type === "shade") {
        for (let i = 0; i < number; i++) {
            r = Math.max(r - 10, 0);
            g = Math.max(g - 10, 0);
            b = Math.max(b - 10, 0);
            variations.push([r, g, b]);
        }
    }

    return variations;
}

const rgbColor = [255, 0, 0];
const rgbColorShades = generateColorVariations(rgbColor, "shade", 3);

console.log(rgbColorShades); // [230, 0, 0], [205, 0, 0], [180, 0, 0]

After the color variations are generated, we need to convert them back to the hexadecimal representation. Let's also combine the two functions above to a single one for simplicity.

function generateColorVariations(hexColor, type, number) {
    // Convert hex to RGB
    let r = parseInt(hexColor.slice(1, 3), 16);
    let g = parseInt(hexColor.slice(3, 5), 16);
    let b = parseInt(hexColor.slice(5, 7), 16);

    const variations = [];

    if (type === "tint") {
        for (let i = 0; i < number; i++) {
            r = Math.min(r + 10, 255);
            g = Math.min(g + 10, 255);
            b = Math.min(b + 10, 255);
            variations.push(rgbToHex(r, g, b));
        }
    }

    if (type === "shade") {
        for (let i = 0; i < number; i++) {
            r = Math.max(r - 10, 0);
            g = Math.max(g - 10, 0);
            b = Math.max(b - 10, 0);
            variations.push(rgbToHex(r, g, b));
        }
    }

    return variations;
}

function rgbToHex(r, g, b) {
    const componentToHex = (c) => {
        const hex = c.toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    };
    return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}

Let's use the generateColorVariations function to generate tints and shades of a HEX color, for example: #FF2C5E.

const hexColor = "#FF2C5E";
const hexColorTints = generateColorVariations(hexColor, "tint", 5);

console.log(hexColorTints); // ['#ff3668', '#ff4072', '#ff4a7c', '#ff5486', '#ff5e90']

const hexColor = "#FF2C5E";
const hexColorShades = generateColorVariations(hexColor, "shade", 5);

console.log(hexColorShades); // ['#f52254', '#eb184a', '#e10e40', '#d70436', '#cd002c']