Comment trouver la couleur complémentaire d'un code hexadécimal donné ?

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 le noir, l’opposé devrait être le 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 afin d'assurer une visibilité claire.

Pour y parvenir, nous employons l'approche suivante :

1. Convertir le courant couleur du format hexadécimal (HEX) au format rouge, vert et bleu (RVB).
2. Inversez les composantes R, V et B de la couleur RVB pour obtenir la couleur complémentaire. valeurs.
3. Convertissez les composants inversés au format HEX.
4. Assurez-vous que les valeurs HEX sont complétées par des zéros non significatifs si nécessaire.

Voici le code pour implémenter cela. approche :

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 Sortie :

Une version avancée avec une option "bw" permet de préciser si le résultat doit être plus proche du noir ou du blanc, offrant un meilleur contraste pour une meilleure lisibilité :

function invertColor(hex, bw) {
  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.');
  }
  var r = parseInt(hex.slice(0, 2), 16),
    g = parseInt(hex.slice(2, 4), 16),
    b = parseInt(hex.slice(4, 6), 16);
  if (bw) {
    // Formula to determine if the color is closer to black or white.
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }
  // Invert color components.
  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  // Pad each component with leading zeros and return.
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

Exemple Sortie :

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

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!