」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 如何在 JavaScript 中以程式設計方式使十六進位顏色變亮或變暗?

如何在 JavaScript 中以程式設計方式使十六進位顏色變亮或變暗?

發佈於2025-01-10
瀏覽:135

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

以編程方式使十六進制顏色(或RGB 和混合顏色)變亮或變暗

此函數允許您以編程方式使十六進制顏色變亮或變暗特定量。只需傳入一個字串(如“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 

function LightenDarken&Color(colenDarken&or( ,金額){ var usePound = false; if ( col[0] == "#" ) { col = col.slice(1); usePound = true; } var num = parseInt(col, 16); var r = (num >> 16) amt; 如果 ( r > 255 ) r = 255; 否則如果 (r > 8) & 0x00FF) amt; 如果 ( b > 255 ) b = 255; 否則如果 (b 255 ) g = 255; 否則如果 ( g 用法
const lightenedColor = LightenDarkenColor("3F6D2A", 40);
console.log(`Lightened Color: ${lightenedColor}`); // Output: 7FADEE

const lightenedColor = LightenDarkenColor("3F6D2A", 40); console.log(`顏色變亮:${lightenedColor}`); // 輸出:7FADEE

效能

此函數的效能針對速度和大小進行了最佳化。它使用位元運算來操縱顏色值,這使得速度非常快。該函數也非常小,非常適合小型應用程式。
  • 功能
  • 將十六進位顏色變亮或變暗指定量
  • 處理顏色帶或不帶 #前綴
  • 調整不正確的顏色值

傳回新顏色值的十六進位字串表示形式顏色

  • 限制

此函數不會將顏色轉換為HSL以正確地使顏色變亮或變暗。因此,結果可能與使用 HSL 的函數不同。 How can I programmatically lighten or darken a hex color in JavaScript?

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3