주어진 16진수 코드의 반대 색상을 생성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

주어진 16진수 코드의 반대 색상을 생성하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-11-13 16:24:03

원래의

359명이 탐색했습니다.

How to Generate the Opposite Color of a Given Hex Code?

주어진 색상에서 반대 색상 생성

주어진 색상에서 반대 색상을 결정하는 것은 웹 및 그래픽 디자인에서 자주 요구되는 사항입니다. 이는 텍스트 색상이 동적이고 가독성을 위해 배경 색상을 조정해야 하는 경우 매우 중요합니다. 우리의 목표는 현재 색상을 가져와 그 반대 색상을 생성하여 고대비와 선명한 텍스트 가시성을 제공하는 색상을 만드는 것입니다.

반대 색상 생성을 위한 알고리즘

목표를 달성하기 위해 다음 알고리즘을 제안합니다.

현재 색상을 HEX에서 RGB 형식으로 변환합니다. 여기에는 빨간색, 녹색 및 색상을 추출하는 작업이 포함됩니다. HEX 코드의 파란색 값.
R, G, B 구성 요소를 각각 반전합니다. 이는 (255 - 구성 요소)를 계산한다는 의미입니다.
변환 반전된 구성요소를 다시 HEX 형식으로 변경합니다.
각 HEX 구성요소를 0으로 채워 길이가 2자인지 확인합니다.
반전된 색상을 HEX 코드로 표시합니다.

JavaScript에서 알고리즘 구현

아래는 개략적인 알고리즘의 JavaScript 구현입니다.

function invertColor(hex) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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 = (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);
  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);
}

로그인 후 복사

이 함수는 HEX 색상 코드를 허용하고 반대 색상을 반환합니다. 예를 들어 "#F0F0F0" 색상을 제공하면 반대 색상으로 "#0F0F0F"를 얻게 됩니다.

고급 옵션: 밝기 고려

일부에서는 경우에 따라 반대 색상을 생성할 때 색상의 밝기를 고려해야 할 수도 있습니다. 다음은 bw 매개변수를 포함하는 함수의 수정된 버전입니다.

function invertColor(hex, bw) {
  if (hex.indexOf('#') === 0) {
    hex = hex.slice(1);
  }
  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) {
    return (r * 0.299 + g * 0.587 + b * 0.114) > 186
      ? '#000000'
      : '#FFFFFF';
  }

  r = (255 - r).toString(16);
  g = (255 - g).toString(16);
  b = (255 - b).toString(16);
  return '#' + padZero(r) + padZero(g) + padZero(b);
}

로그인 후 복사

bw 매개변수가 true로 설정된 경우 함수는 주어진 색상이 밝은 경우(#000000) 검은색을 반환하고 밝은 경우 흰색을 반환합니다. 어둡습니다(#FFFFFF). 그렇지 않으면 이전과 반대되는 색상이 생성됩니다.

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