cómo determinar el color complementario para un color dado

el objetivo es generar un color que sea opuesto a un color dado. Por ejemplo, si el color actual es negro, lo contrario debe ser blanco. This task is crucial when setting a contrasting background color for a text with a dynamic color to ensure clear visibility.

To achieve this, we employ the following approach:

1. Convert the current color from hexadecimal (HEX) to Red, Green, and Blue (RGB) format.
2. Invert the R, G, and B components of the RGB color to obtain the complementary values.
3. Convert the inverted components back into HEX format.
4. Ensure the HEX values ​​are padded with leading zeros if necessary.

Here's the code to implement this approach:

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

Ejemplo de salida:

una versión avanzada con una opción "BW" le permite especificar si el resultado debe estar más cerca de Black o White, proporcionando un mejor contraste para una lectura mejorada:

Función Invertcolor (Hex, BW) { if (hex.Indexof ('#') === 0) { hex = hex.lice (1); } // Convierta hexadecimal de 3 dígitos a 6 dígitos. if (hex.length === 3) { hex = hex [0] hex [0] hex [1] hex [1] hex [2] hex [2]; } if (hex.length! == 6) { arrojar un nuevo error ('color hexadecimal inválido'); } var r = parseint (hex.slice (0, 2), 16), g = parseint (hex.slice (2, 4), 16), b = parseint (hex.lice (4, 6), 16); if (bw) { // Fórmula para determinar si el color está más cerca del blanco o negro. retorno (r * 0.299 g * 0.587 b * 0.114)> 186 ? '#000000' : '#Ffffff'; } // Invertir componentes de color. r = (255 - r) .tostring (16); g = (255 - g) .tostring (16); b = (255 - b) .tostring (16); // Enlace cada componente con ceros y retorno líderes. regresar '#' Padzero (R) Padzero (G) Padzero (B); }

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

Ejemplo de salida:

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