주어진 색상의 보색을 결정하는 방법
주어진 색상과 반대되는 색상을 생성하는 것이 목표입니다. 예를 들어 현재 색상이 검은색이라면 그 반대 색상은 흰색이어야 합니다. 이 작업은 선명한 가시성을 보장하기 위해 동적 색상이 있는 텍스트에 대비되는 배경색을 설정할 때 매우 중요합니다.
이를 달성하기 위해 다음 접근 방식을 사용합니다.
다음은 다음과 같습니다. 이 접근 방식을 구현하는 코드:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!