Как определить дополнительный цвет для данного цвета

] Цель состоит в том, чтобы сгенерировать цвет, который противоположна данному цвету. Например, если текущий цвет черный, противоположность должна быть белой. Эта задача имеет решающее значение при настройке контрастного цвета фона для текста с динамическим цветом, чтобы обеспечить четкую видимость.

для достижения этого мы используем следующий подход:

]

конвертировать инвертированные компоненты обратно в формат гекса. if (hex.indexof ('#') === 0) { hex = hex.slice (1); } // преобразовать 3-значный шестнадцатеричный в 6 цифр. if (hex.length === 3) { hex = hex [0] hex [0] hex [1] hex [1] hex [2] hex [2]; } if (hex.length! == 6) { выбросить новую ошибку ('неверный шестигранный цвет.'); } // инвертировать цветные компоненты. 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); // Подушка каждого компонента ведущими нулями и возврат. вернуть '#' padzero (r) padzero (g) padzero (b); } Функция padzero (str, len) { Лен = Лен || 2; var Zeros = new Array (len) .join ('0'); return (Zeros str) .slice (-len); }
пример output:

расширенная версия с опцией "bw" позволяет указать, должен ли результат быть ближе к черным или белым, обеспечивая лучше if (hex.indexof ('#') === 0) { hex = hex.slice (1); } // преобразовать 3-значный шестнадцатеричный в 6 цифр. if (hex.length === 3) { hex = hex [0] hex [0] hex [1] hex [1] hex [2] hex [2]; } if (hex.length! == 6) { выбросить новую ошибку ('неверный шестигранный цвет.'); } var r = parseint (hex.slice (0, 2), 16), g = parseint (hex.slice (2, 4), 16), b = parseint (hex.slice (4, 6), 16); if (bw) { // формула, чтобы определить, ближе ли цвет к черному или белую. Возврат (r * 0,299 г * 0,587 б * 0,114)> 186 ? '#000000' : '#Ffffff'; } // инвертировать цветные компоненты. r = (255 - r) .toString (16); G = (255 - г) .toString (16); b = (255 - b) .toString (16); // Подушка каждого компонента ведущими нулями и возврат. вернуть '#' padzero (r) padzero (g) padzero (b); }

пример вывода:

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

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