Comment générer la couleur opposée d'une couleur donnée ?

Créer la couleur opposée d'une couleur donnée

Dans ce problème, le but est de générer une couleur qui est à l'opposé d'une couleur donnée couleur. La couleur opposée fait référence à l’aspect sombre/lumineux. Par exemple, si la couleur donnée est le noir, la couleur opposée sera le blanc.

Pour créer cette couleur opposée, une fonction nommée create_opp_color() est requise. Cette fonction doit accepter la couleur actuelle comme argument et renvoyer la couleur opposée. Voici comment aborder cette tâche :

Implémentation de la fonction :

1. Convertir HEX en RVB : La couleur donnée est supposée être en Format hexadécimal. Tout d'abord, convertissez-le en composants RVB.
2. Inverser les composants de couleur : Inversez les valeurs des composants R, V et B (soustrayez de 255).
3. Convertir les composants inversés en HEX : Convertissez chaque composant inversé en HEX valeurs.
4. Remplir les composants inversés : Chaque composant HEX doit être complété par des zéros pour garantir qu'il s'agit d'une valeur HEX à 2 chiffres.
5. Reconstruire la chaîne de couleur HEX : Concaténez les composants HEX rembourrés pour former la couleur opposée chaîne.

Implémentation en 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;
}

Technique avancée :

Si vous avez besoin de plus de contraste , vous pouvez utiliser le noir ou le blanc comme couleur opposée en fonction de la luminosité de la couleur d'origine. Voici une fonction modifiée pour ce faire :

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';
}

Maintenant, en utilisant cette fonction, vous pouvez facilement générer la couleur opposée d'une couleur donnée, qu'elle soit claire ou foncée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!