Comment déterminer la couleur complémentaire pour une couleur donnée

Le but est de générer une couleur opposée à une couleur donnée. Par exemple, si la couleur actuelle est noire, l'inverse doit être blanc. Cette tâche est cruciale lors de la définition d'une couleur d'arrière-plan contrastée pour un texte avec une couleur dynamique pour assurer une visibilité claire.

pour y parvenir, nous utilisons l'approche suivante:

1. Convertissons la couleur actuelle de HexaDecimal (hex) en rouge, vert et bleu (RGB). Couleur RGB pour obtenir les valeurs complémentaires.
2. Convertir les composants inversés en format hex if (hex.indexof ('#') === 0) { hex = hex.slice (1); } // Convertir à 3 chiffres hexadéciques en 6 chiffres. if (hex.length === 3) { hex = hex [0] hex [0] hex [1] hex [1] hex [2] hex [2]; } if (hex.length! == 6) { lancer une nouvelle erreur («couleur hexadécimal non valide»); } // Inverser les composants de couleur. 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); // remplissez chaque composant avec des zéros et un retour principaux. return '#' Padzero (R) Padzero (G) Padzero (B); } fonction Padzero (str, len) { len = len || 2; var zeros = nouveau tableau (len) .join ('0'); return (zeros str) .slice (-Len); }
3. Exemple de sortie:

Une version avancée avec une option "bw" vous permet de spécifier si le résultat doit être plus proche de la fonction noire ou blanche, offrant un meilleur contraste pour une lisibilité améliorée:

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  // Convert 3-digit HEX to 6-digits.
  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.');
  }
  // Invert color components.
  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);
  // Pad each component with leading zeros and return.
  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);
}

Exemple de sortie:

] (https://stackshare.io/resources/color-contrast-checker)