这是一个我正在工作的函数，以编程方式使十六进制颜色变亮或变暗。只需要传入一个像“3F6D2A”这样的字符串来表示颜色(col)，并传入一个base10整数(amt)来表示要变亮或变暗的量。为了变暗，传入一个负数(即-20)。
我这么做的原因是，到目前为止，我找到的所有解决方案似乎都把问题复杂化了。我有一种感觉，只需几行代码就可以完成。请让我知道，如果你发现任何问题，或有任何调整，以加快它。
有趣的灯光
上校(16号);
return键(col . & 0x0000FF) + amt) | ((((col > > 8) & 0x00FF) + amt) < < 8) | (16 (col > >) + amt) < < 16) . toString (16);
的
/ /测试
控制台(照明颜色(“3F6D2A”，40);
对于开发人员来说，这里有一个更容易阅读的版本:
函数 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 新颜色 = g |（b << 8） |（第16<<条）;
返回 newColor.toString（16）;
}
测试
console.log（LightenDarkenColor（“3F6D2A”， -40））;
最后一个版本可以处理开头可能有(也可能没有)“#”的颜色。加上调整不适当的颜色值:
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);
}
好了，现在它不只是几行，但它看起来更简单，如果你不使用“#”，不需要检查颜色超出范围，它只是几行。
如果不使用“#”，你可以像这样在代码中添加它:
var myColor = "3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);
我想我的主要问题是，我说的对吗?这不是包括大多数(正常)情况吗?如果是的话，最快最小的方法是什么?我想在动画和小环境中使用，所以速度是这里的第一个最重要的因素，尺寸第二，准确性第三，可读性?嗯?不在要求清单上(对不起，我知道你们中有一半人正在泪眼汪汪!)
我在这里加上我的2美分，一个令人满意的不同答案的小组合:
const colorShade = (col, amt) => {
col = col.replace(/^#/, '')
if (col.length === 3) col = col[0] + col[0] + col[1] + col[1] + col[2] + col[2]
let [r, g, b] = col.match(/.{2}/g);
([r, g, b] = [parseInt(r, 16) + amt, parseInt(g, 16) + amt, parseInt(b, 16) + amt])
r = Math.max(Math.min(255, r), 0).toString(16)
g = Math.max(Math.min(255, g), 0).toString(16)
b = Math.max(Math.min(255, b), 0).toString(16)
const rr = (r.length < 2 ? '0' : '') + r
const gg = (g.length < 2 ? '0' : '') + g
const bb = (b.length < 2 ? '0' : '') + b
return `#${rr}${gg}${bb}`
}
接受以#开头或不以#开头的颜色，6个字符或3个字符。
使用示例:colorShade('#54b946'， -40)
这里是4种颜色的输出，每个颜色都有3个浅度和3个深度(这里的数量是40的倍数)。
你的方法是可以的:)我简化了你的最短版本一点点(饱和度控制看这里)
(col,amt)=> (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0)
// Similar to OP shortest version, we not have here # and colors range checking
var LightenDarkenColor =
(col,amt) => (+('0x'+col)+amt*0x010101).toString(16).padStart(6,0);
// ------
// TEST
// ------
function update() {
let c= col.value.padEnd(6,'0').slice(0,6);
let color = '#'+LightenDarkenColor(c, +amt.value);
oldColor.innerHTML = 'Old: #'+c;
oldColor.style = `background: #${c}`;
newColor.innerHTML = 'New: '+color
newColor.style = `background: ${color}`;
}
update();
.box{ width: 100px; height: 100px; margin: 10px; display: inline-block}
<input id="col" value="3F6D2A" oninput="update()">
<input id="amt" value="30" oninput="update()"><br>
<div id="oldColor" class="box"></div>
<div id="newColor" class="box"></div>
和版本#和颜色范围检查
// # and colors range checking
var LightenDarkenColor =
(col,amt) => '#'+col.slice(1).match(/../g)
.map(x=>(x=+`0x${x}`+amt,x<0?0:(x>255?255:x))
.toString(16).padStart(2,0)).join``;
// ------
// TEST
// ------
function update() {
let c= col.value.padEnd(6,'0').slice(0,7);
let color = LightenDarkenColor(c, +amt.value);
oldColor.innerHTML = 'Old: '+c;
oldColor.style = `background: ${c}`;
newColor.innerHTML = 'New: '+color
newColor.style = `background: ${color}`;
}
update();
.box{ width: 100px; height: 100px; margin: 10px; display: inline-block}
<input id="col" value="#3F6D2A" oninput="update()">
<input id="amt" value="40" oninput="update()"><br>
<div id="oldColor" class="box"></div>
<div id="newColor" class="box"></div>
我做了一个优秀的xcolor库的移植，以消除它的jQuery依赖。里面有很多功能，包括调亮和调暗颜色。
实际上，将十六进制转换为RGB是一个完全独立于颜色变亮或变暗的功能。请保持衣物干燥。在任何情况下，一旦你有了RGB颜色，你可以把你想要的光级别和你必须的光级别之间的差值加到每个RGB值上:
var lightness = function(level) {
if(level === undefined) {
return Math.max(this.g,this.r,this.b)
} else {
var roundedLevel = Math.round(level) // fractions won't work here
var levelChange = roundedLevel - this.lightness()
var r = Math.max(0,this.r+levelChange)
var g = Math.max(0,this.g+levelChange)
var b = Math.max(0,this.b+levelChange)
if(r > 0xff) r = 0xff
if(g > 0xff) g = 0xff
if(b > 0xff) b = 0xff
return xolor({r: r, g: g, b: b})
}
}
var lighter = function(amount) {
return this.lightness(this.lightness()+amount)
}
更多信息请参见https://github.com/fresheneesz/xolor。
我的版本写在typescript:
function changeColorLightness(color: number, lightness: number): number {
return (Math.max(0, Math.min(((color & 0xFF0000) / 0x10000) + lightness, 0xFF)) * 0x10000) +
(Math.max(0, Math.min(((color & 0x00FF00) / 0x100) + lightness, 0xFF)) * 0x100) +
(Math.max(0, Math.min(((color & 0x0000FF)) + lightness, 0xFF)));
}
解释:
export function changeColorLightness(color: number, lightness: number): number {
const r = (color & 0xFF0000) / 0x10**4;
const g = (color & 0x00FF00) / 0x10**2;
const b = (color & 0x0000FF);
const changedR = Math.max(0, Math.min(r + lightness, 0xFF));
const changedG = Math.max(0, Math.min(g + lightness, 0xFF));
const changedB = Math.max(0, Math.min(b + lightness, 0xFF));
return (changedR * 0x10**4) + (changedG * 0x10**2) + changedB;
}
用法:
changeColorLightness(0x00FF00, 0x50);
changeColorLightness(parseInt("#00FF00".replace('#',''), 16), 0x50);
changeColorLightness(0x00FF00, 127.5);
