>웹 프론트엔드 >JS 튜토리얼 >프로그래밍 방식으로 HEX 색상을 밝게 또는 어둡게 하고, RGB 색상을 처리하고, 색상을 혼합하려면 어떻게 해야 합니까?

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

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-05 07:15:02392검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.