JavaScript で 16 進カラーをプログラムで明るくしたり暗くしたりするにはどうすればよいですか?

16 進カラー (または RGB およびブレンドカラー) をプログラムで明るくまたは暗くします

この関数を使用すると、プログラムで 16 進カラーを特定の量だけ明るくしたり暗くしたりできます。色には「3F6D2A」のような文字列を、明るくまたは暗くする量には整数を渡すだけです。暗くするには、負の数 (例: -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 進カラーを明るくまたは暗くします
• カラーを処理します# プレフィックスの有無にかかわらず
• 不適切な色の値を調整します
• 新しい色の 16 進文字列表現を返します

制限事項

• この関数は、色を適切に明るくしたり暗くしたりするために色を HSL に変換しません。したがって、HSL を使用する関数とは結果が異なる場合があります。

以上がJavaScript で 16 進カラーをプログラムで明るくしたり暗くしたりするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。