> 웹 프론트엔드 > JS 튜토리얼 > JavaScript에서 프로그래밍 방식으로 16진수 색상을 밝게 하거나 어둡게 하려면 어떻게 해야 합니까?

JavaScript에서 프로그래밍 방식으로 16진수 색상을 밝게 하거나 어둡게 하려면 어떻게 해야 합니까?

Susan Sarandon
풀어 주다: 2024-11-05 14:05:02
원래의
516명이 탐색했습니다.

How can I programmatically lighten or darken a hex color in JavaScript?

16진수 색상을 프로그래밍 방식으로 밝게 또는 어둡게 하기(또는 RGB 및 혼합 색상)

이 기능을 사용하면 프로그래밍 방식으로 16진수 색상을 특정 양만큼 밝거나 어둡게 할 수 있습니다. 색상에 대해 "3F6D2A"와 같은 문자열을 전달하고 밝거나 어둡게 하는 양에 대한 정수 amt를 전달하기만 하면 됩니다. 어둡게 하려면 음수(예: -20)를 전달합니다.

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

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

다른 버전

더 빠르고 작은 버전:

<code class="js">function LightenDarkenColor(col, amt) {
  var num = parseInt(col, 16);
  var r = (num >> 16) + amt;
  var b = ((num >> 8) & 0x00FF) + amt;
  var g = (num & 0x0000FF) + amt;
  var newColor = g | (b << 8) | (r << 16);
  return newColor.toString(16);
}

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

# 접두사가 있거나 없는 색상 처리:

<code class="js">function LightenDarkenColor(col, amt) {
    var usePound = false;
    if ( col[0] == "#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col, 16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}</code>
로그인 후 복사

사용

이 기능을 사용하려면 밝게하려는 16진수 색상 문자열을 전달하거나 어둡게 하고 조정하려는 양을 선택합니다. 예를 들어, 다음 코드는 "3F6D2A" 색상을 40만큼 밝게 합니다.

<code class="js">const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE</code>
로그인 후 복사

성능

이 함수의 성능은 속도와 크기에 최적화되어 있습니다. 비트 단위 연산을 사용하여 색상 값을 조작하므로 속도가 매우 빠릅니다. 기능도 매우 작기 때문에 소규모 애플리케이션에 사용하기에 적합합니다.

특징

  • 헥스 색상을 지정된 양만큼 밝게 또는 어둡게 합니다
  • 색상을 처리합니다. # 접두어 유무에 관계없이
  • 부적절한 색상 값에 맞게 조정
  • 새 색상의 16진수 문자열 표현을 반환합니다

제한 사항

  • 이 기능은 색상을 적절하게 밝게 또는 어둡게 하기 위해 색상을 HSL로 변환하지 않습니다. 따라서 HSL을 사용한 함수와 결과가 다를 수 있습니다.

위 내용은 JavaScript에서 프로그래밍 방식으로 16진수 색상을 밝게 하거나 어둡게 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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