"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Como encontrar a cor complementar de um determinado código hexadecimal?

Como encontrar a cor complementar de um determinado código hexadecimal?

Postado em 2025-03-23
Navegar:606

Como determinar a cor complementar para uma determinada cor

O objetivo é gerar uma cor que seja oposta a uma determinada cor. Por exemplo, se a cor atual for preta, o oposto deve ser branco. Esta tarefa é crucial ao definir uma cor de fundo contrastante para um texto com uma cor dinâmica para garantir uma visibilidade clara. Cor rgb para obter os valores complementares. if (hex.indexof ('#') === 0) { hex = hex.lice (1); } // Converter hexadecimal de 3 dígitos em 6 dígitos. if (hex.length === 3) { Hex = hexadecimal [0] hexadecimal [0] hexadecimal [1] hexadecimal [1] hexadecimal [2] hexadecimal [2]; } if (hex.length! == 6) { lançar um novo erro ('cor hexadecimal inválida'); } // Inverter componentes de cores. 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 Cada componente com os zeros principais e retorne. Retornar '#' Padzero (R) Padzero (G) Padzero (B); } Função Padzero (str, len) { Len = Len || 2; var zeros = nova matriz (len) .Join ('0'); return (zeros str) .slice (-len); }

Exemplo de saída:

  1. Uma versão avançada com uma opção "BW" permite especificar se o resultado deve estar mais próximo de preto ou branco, fornecendo melhor contraste para melhorar a legibilidade:
  2. functurcol (fúria) (e), fornecendo melhor contraste para a legibilidade:
  3. if (hex.indexof ('#') === 0) { hex = hex.lice (1); } // Converter hexadecimal de 3 dígitos em 6 dígitos. if (hex.length === 3) { Hex = hexadecimal [0] hexadecimal [0] hexadecimal [1] hexadecimal [1] hexadecimal [2] hexadecimal [2]; } if (hex.length! == 6) { lançar um novo erro ('cor hexadecimal inválida'); } var r = parseint (hex.slice (0, 2), 16), g = parseint (hex.slice (2, 4), 16), b = parseint (hex.slice (4, 6), 16); if (bw) { // fórmula para determinar se a cor está mais próxima de preto ou branco. Retorno (r * 0,299 g * 0,587 B * 0,114)> 186 ? '#000000' : '#Ffffff'; } // Inverter componentes de cores. r = (255 - r) .ToString (16); g = (255 - g) .ToString (16); b = (255 - b) .ToString (16); // PAD Cada componente com os zeros principais e retorne. Retornar '#' Padzero (R) Padzero (G) Padzero (B); }
Exemplo de saída:

[
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);
}
Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3