프로그래밍 방식으로 HEX 색상을 밝게 또는 어둡게 하고, RGB 색상을 처리하고, 색상을 혼합하려면 어떻게 해야 합니까?

Mary-Kate Olsen
풀어 주다: 2024-11-05 07:15:02
원래의
374명이 탐색했습니다.

How can I programmatically lighten or darken a HEX color, handle RGB colors, and blend colors together?

프로그래밍 방식으로 HEX 색상(또는 RGB 및 혼합 색상)을 밝게 하거나 어둡게 합니다

문제

목표는 다음과 같은 기능을 만드는 것입니다. 특정 양만큼 16진수 색상을 밝게 또는 어둡게 합니다. 또한 RGB 색상을 처리하고 색상을 혼합하고 싶습니다.

해결책

<code class="javascript">function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col &amp; 0x0000FF) + amt) | ((((col >> 8) &amp; 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

// TEST
console.log(LightenDarkenColor("3F6D2A", 40));
로그인 후 복사

설명

이 함수는 16진수 색상을 정수로 변환하고, 또는 각 RGB 채널에서 지정된 양을 뺀 다음 결과를 다시 16진수 색상으로 변환합니다.

향상

기능을 향상하려면 오류 처리 및 다양한 지원을 추가할 수 있습니다. 색상 형식(RGB, HSL). 두 번째 색상 매개변수를 전달하여 색상을 혼합하는 기능을 추가할 수도 있습니다.

향상된 버전:

<code class="javascript">function pSBC(p, c0, c1, l) {
  let r, g, b, P, f, t, h, i = parseInt;
  if (typeof(p) != "number" || p <-1 || p > 1 || typeof(c0) != "string" || (c0[0] != 'r' &amp;&amp; c0[0] != '#') || (c1 &amp;&amp; !a)) return null;
  if (!this.pSBCr) this.pSBCr = (d) => {
    let n = d.length, x = {};
    if (n > 9) {
      [r, g, b, a] = d = d.split(",");
      n = d.length;
      if (n < 3 || n > 4) return null;
      x.r = i(r[3] == "a" ? r.slice(5): r.slice(4), 16);
      x.g = i(g);
      x.b = i(b);
      x.a = a ? parseFloat(a) : -1;
    } else {
      if (n == 8 || n == 6 || n < 4) return null;
      if (n < 6) d = "#" + d[1] + d[1] + d[2] + d[2] + d[3] + d[3] + (n > 4 ? d[4] + d[4] : "");
      d = i(d.slice(1), 16);
      if (n == 9 || n == 5) x.r = d >> 24 &amp; 255, x.g = d >> 16 &amp; 255, x.b = d >> 8 &amp; 255, x.a = m((d &amp; 255) / 0.255) /1000;
      else x.r = d >> 16, x.g = d >> 8 &amp; 255, x.b = d &amp; 255, x.a = -1;
    }
    return x;
  };

  h = c0.length > 9;
  h = a ? c1.length > 9 ? true : c1 == "c"?!h : false : h;
  f = this.pSBCr(c0);
  P = p < 0;
  t = c1 &amp;&amp; c1 != "c" ? this.pSBCr(c1) : P ? {r:0,g:0,b:0,a:-1} : {r:255,g:255,b:255,a:-1};
  p = P ? p*-1 : p;
  P = 1-p;
  if (!f || !t) return null;
  if (l) r = m(P*f.r + p*t.r), g = m(P*f.g + p*t.g), b = m(P*f.b + p*t.b);
  else r = m((P*f.r**2 + p*t.r**2)**0.5), g = m((P*f.g**2 + p*t.g**2)**0.5), b = m((P*f.b**2 + p*t.b**2)**0.5);
  a = f.a, t = t.a, f= a >= 0 || t >= 0, a = f ? a < 0 ? t : t < 0 ? a : a*P + t*p : 0;
  if (h) return "rgb" + (f ? "a(" : "(") +r + "," +g + "," +b + (f ? "," + m(a*1000)/1000 : "") + ")";
  else return "#" + (4294967296+r*16777216+g*65536+b*256+(f ? m(a*255):0)).toString(16).slice(1, (f? undefined : -2));
}</code>
로그인 후 복사

이 개선된 버전에는 다음 기능이 포함되어 있습니다.

  • 오류 처리: 이 함수는 잘못된 입력을 확인하고 입력이 잘못된 경우 null을 반환합니다.
  • 다양한 색상 형식 지원: 이 함수는 다음을 지원합니다. 16진수, RGB 및 RGBA 색상 형식.
  • 색상 혼합: 두 번째 색상 매개변수를 전달하여 두 가지 색상을 함께 혼합할 수 있습니다.
  • 선형 또는 로그 블렌딩: 네 번째 매개변수를 전달하여 선형 또는 로그 블렌딩을 사용할지 여부를 지정할 수 있습니다.
  • 알파 채널 지원: 이 함수는 알파 채널을 지원하며 알파 채널을 블렌딩할 수 있습니다. 색을 섞을 때 함께.

위 내용은 프로그래밍 방식으로 HEX 색상을 밝게 또는 어둡게 하고, RGB 색상을 처리하고, 색상을 혼합하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿