How to Generate the Opposite Color of a Given Color?

Creating the Opposite Color of a Given Color

In this problem, the goal is to generate a color that is the opposite of a given color. The opposite color refers to the dark/bright aspect. For instance, if the given color is black, the opposite color would be white.

To create this opposite color, a function named create_opp_color() is required. This function should accept the current color as an argument and return the opposite color. Here's how to approach this task:

Function Implementation:

1. Convert HEX to RGB: The given color is assumed to be in HEX format. First, convert it to RGB components.
2. Invert Color Components: Invert the values of the R, G, and B components (subtract from 255).
3. Convert Inverted Components to HEX: Convert each inverted component back to HEX values.
4. Pad Inverted Components: Each HEX component should be padded with zeros to ensure it's a 2-digit HEX value.
5. Reconstruct HEX Color String: Concatenate the padded HEX components to form the opposite color string.

Implementation in JavaScript:

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const invertedRgb = {
        r: 255 - rgb.r,
        g: 255 - rgb.g,
        b: 255 - rgb.b
    };
    const invertedHex = rgbToHex(invertedRgb);
    return '#' + invertedHex;
}

function rgbToHex(rgb) {
    let hex = '';
    for (const key in rgb) {
        if (rgb.hasOwnProperty(key)) {
            const component = rgb[key].toString(16);
            hex += component.length === 1 ? '0' + component : component;
        }
    }
    return hex;
}

function hexToRgb(hex) {
    let rgb = {};
    ['r', 'g', 'b'].forEach((key, i) => {
        rgb[key] = parseInt(hex.substr(i * 2, 2), 16);
    });
    return rgb;
}

Advanced Technique:

If you need more contrast, you can utilize black or white as the opposite color based on the brightness of the original color. Here's a modified function to do that:

function create_opp_color(currentColor) {
    if (currentColor.indexOf('#') === 0) {
        currentColor = currentColor.slice(1);
    }
    if (currentColor.length === 3) {
        currentColor = currentColor.repeat(2);
    }
    const rgb = hexToRgb(currentColor);
    const brightness = Math.round((rgb.r * 0.299 + rgb.g * 0.587 + rgb.b * 0.114) / 255 * 100);

    return brightness > 50 ? '#000000' : '#FFFFFF';
}

Now, using this function, you can easily generate the opposite color of any given color, whether it is bright or dark.

The above is the detailed content of How to Generate the Opposite Color of a Given Color?. For more information, please follow other related articles on the PHP Chinese website!