JS 反转颜色 - Javascript

介绍

在开发 Web 应用程序中，经常需要对元素的样式进行操作。其中一项任务就是在需要时将颜色反转，即将白色转换为黑色，黑色转换为白色。

在 JavaScript 中，可以使用以下两种方法来反转颜色。

方法 1：使用 RGB 值

RGB 值在负责显示颜色的计算机和其他设备中广泛使用。它由红色、绿色和蓝色组合而成，每种颜色的值从 0 到 255。

以下是反转颜色的 JavaScript 函数，它将使用 RGB 颜色值的表示方法：

function invertColorRGB(color) {
   color = color.slice(1);
   return "#" + (Number(`0x${color}`) ^ 0xFFFFFF).toString(16).toUpperCase().padStart(6, '0');
}

使用方法：

const originalColor = "#FFFFFF";
const invertedColor = invertColorRGB(originalColor);

返回的 invertedColor 将为 "#000000"。

方法 2：使用 HSL 值

HSL 值是另一种表示颜色的方法。HSL 分别代表色调、饱和度和亮度。色调值从 0 到 360，饱和度和亮度之间的值从 0% 到 100%。

以下是使用 HSL 值反转颜色的 JavaScript 函数：

function invertColorHSL(color) {
    const hsl = RGBtoHSL(color);
    hsl[2] = 1 - hsl[2];
    return HSLtoRGB(hsl);
}

使用方法：

const originalColor = "#FFFFFF";
const invertedColor = invertColorHSL(originalColor);

返回的 invertedColor 将为 "#000000"。

分别计算的RGB和HSL函数

这里还是贴出HSL和RGB分别计算的函数

function RGBtoHSL(color) {
    color = color.substr(1);
    const R = parseInt(color.substr(0, 2), 16) / 255;
    const G = parseInt(color.substr(2, 2), 16) / 255;
    const B = parseInt(color.substr(4, 2), 16) / 255;

    const Cmax = Math.max(R, G, B);
    const Cmin = Math.min(R, G, B);
    const D = Cmax - Cmin;
    let H;

    if (D == 0) {
        H = 0;
    } else if (Cmax == R) {
        H = ((G - B) / D) % 6;
    } else if (Cmax == G) {
        H = (B - R) / D + 2;
    } else {
        H = (R - G) / D + 4;
    }

    H = Math.round(H * 60);
    if (H < 0) {
        H += 360;
    }

    const L = (Cmax + Cmin) / 2;
    const S = D == 0 ? 0 : D / (1 - Math.abs(2 * L - 1));

    return [H, S, L];
}

function HSLtoRGB(hsl) {
    const h = hsl[0];
    const s = hsl[1];
    const l = hsl[2];

    const C = (1 - Math.abs(2 * l - 1)) * s;
    const X = C * (1 - Math.abs(((h / 60) % 2) - 1));
    const m = l - C / 2;

    let [r, g, b] = [0, 0, 0];

    if (h < 60) {
        [r, g, b] = [C, X, 0];
    } else if (h < 120) {
        [r, g, b] = [X, C, 0];
    } else if (h < 180) {
        [r, g, b] = [0, C, X];
    } else if (h < 240) {
        [r, g, b] = [0, X, C];
    } else if (h < 300) {
        [r, g, b] = [X, 0, C];
    } else {
        [r, g, b] = [C, 0, X];
    }

    return (
        "#" + 
        Math.round((r + m) * 255)
            .toString(16)
            .padStart(2, "0") +
        Math.round((g + m) * 255)
            .toString(16)
            .padStart(2, "0") +
        Math.round((b + m) * 255)
            .toString(16)
            .padStart(2, "0")
    );
}

结论

无论是使用 RGB 值还是 HSL 值，反转颜色的过程都非常简单。

当然，这只是反转颜色所能做的简单事情之一。JavaScript 有许多其他方法来操作颜色和调色板，可以用于创建更复杂的用户界面。