"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > JavaScript에서 프로그래밍 방식으로 16진수 색상을 밝게 하거나 어둡게 하려면 어떻게 해야 합니까?

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

2025-01-10에 게시됨
검색:188

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

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

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

function LightenDarkenColor(col, amt) {
  col = parseInt(col, 16);
  return (((col & 0x0000FF)   amt) | ((((col >> 8) & 0x00FF)   amt) > 16)   amt) 

기타 버전

더 빠르고 작은 버전:

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 

# 접두어가 있거나 없는 색상을 처리합니다:

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 > 8) & 0x00FF)   amt;

    if ( b > 255 ) b = 255;
    else if  (b  255 ) g = 255;
    else if  ( g 

사용법

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

const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE

Performance

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

기능

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

제한 사항

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

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3