주어진 16진수 코드의 보색을 찾는 방법은 무엇입니까?

주어진 색상의 보색을 결정하는 방법

주어진 색상과 반대되는 색상을 생성하는 것이 목표입니다. 예를 들어 현재 색상이 검은색이라면 그 반대 색상은 흰색이어야 합니다. 이 작업은 선명한 가시성을 보장하기 위해 동적 색상이 있는 텍스트에 대비되는 배경색을 설정할 때 매우 중요합니다.

이를 달성하기 위해 다음 접근 방식을 사용합니다.

1. 현재 16진수(HEX)에서 빨간색, 녹색, 파란색(RGB) 형식으로 색상을 변환합니다.
2. RGB 색상의 R, G, B 구성 요소를 반전합니다. 보완 값을 얻으려면.
3. 역전된 구성요소를 다시 HEX 형식으로 변환하세요.
4. 필요한 경우 HEX 값에 앞에 0이 채워져 있는지 확인하세요.

다음은 다음과 같습니다. 이 접근 방식을 구현하는 코드:

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

예 출력:

"bw" 옵션이 있는 고급 버전을 사용하면 결과가 검은색 또는 흰색에 더 가까워야 하는지 지정할 수 있으며 향상된 가독성을 위해 더 나은 대비를 제공합니다.

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

예시 출력:

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

위 내용은 주어진 16진수 코드의 보색을 찾는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!