Comment générer la couleur opposée d'un code hexadécimal donné ?

Générer la couleur opposée à partir d'une couleur donnée

Déterminer la couleur opposée à partir d'une couleur donnée est une exigence fréquente dans la conception Web et graphique. Cela devient crucial lorsque la couleur du texte est dynamique et que la couleur d’arrière-plan doit être ajustée pour plus de lisibilité. Notre objectif est de créer une fonction qui prend la couleur actuelle et génère son opposé, ce qui donne une couleur qui offre un contraste élevé et une visibilité claire du texte.

Un algorithme pour générer la couleur opposée

Pour atteindre notre objectif, nous proposons l'algorithme suivant :

1. Convertir la couleur actuelle de HEX en Format RVB. Cela implique d'extraire les valeurs Rouge, Vert et Bleu du code HEX.
2. Inverser chacune des composantes R, V et B. Cela signifie calculer ( 255 - composant).
3. Convertissez les composants inversés en HEX format.
4. Remplissez chaque composant HEX avec des zéros pour vous assurer qu'il a une longueur de deux caractères.
5. Sortez la couleur inversée sous forme de code HEX. .

Mise en œuvre de l'algorithme dans JavaScript

Vous trouverez ci-dessous une implémentation JavaScript de l'algorithme décrit :

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }

  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join('0');
  return (zeros + str).slice(-len);
}

Cette fonction accepte un code de couleur HEX et renvoie sa couleur opposée. Par exemple, si nous fournissons la couleur "#F0F0F0", nous obtiendrons "#0F0F0F" comme couleur opposée.

Option avancée : prise en compte de la luminosité

Dans certains Dans certains cas, il peut être nécessaire de prendre en compte la luminosité de la couleur lors de la génération de son contraire. Voici une version modifiée de la fonction qui inclut un paramètre bw :

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error('Invalid HEX color.');
  }

  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);

  if (bw) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }

  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

Si le paramètre bw est défini sur true, la fonction renverra du noir si la couleur donnée est claire (#000000) et du blanc si elle est sombre (#FFFFFF). Sinon, cela générera la couleur opposée comme avant.

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!