浅色/深色 | CSS-Tricks

CSS 预处理器 Sass 和 Less 可以接受任何颜色并使用 darken() 或 lighten() 以特定值对其进行深化或浅化。但是 JavaScript 中没有此功能。此函数接受十六进制格式的颜色（即 #F06D06，带或不带哈希）并使用值对其进行浅化或深化。

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);
  
}

用法

// Lighten
var NewColor = LightenDarkenColor("#F06D06", 20); 

// Darken
var NewColor = LightenDarkenColor("#F06D06", -20);

演示

查看笔
JavaScript 中的颜色修改由 Chris Coyier (@chriscoyier)
在 CodePen 上。

Rodney Rehm

# 2013年1月1日

如果您有兴趣以编程方式处理颜色（超越浅化和深化），请查看 chromath。

Chris Asher

评论永久链接# 2014年6月6日

或 http://chrisasher.com/sassycolours/ 用于 sass 颜色方案

Sprint

# 2013年1月2日

谢谢！
我认为在单元格中添加颜色十六进制将非常有用，例如

在第 54 行后 $(this).css(“background”, randColor);
添加此行：$(this).html(randColor);

和

在第 63 行后 $(el).css(“background-color”, adjustedColor);
添加行 $(el).html(adjustedColor);

Nathan Jessen

# 2013年7月16日

这适用于任何十六进制代码吗？我正在使用以下代码

var NewColor = LightenDarkenColor("#006633", 10);

我收到以下输出
“#a703d”

如果我在开头重新添加 0，它似乎是正确的，虽然“#0a703d”

Ryan

# 2013年8月20日

这并不适用于任何十六进制颜色。

我使用的是 #00baf1，深化 -20 后返回的值是 #baeb。

有人有解决方案吗？

Jass

评论永久链接# 2020年1月25日

实际上是 #00beab。

Frank

# 2013年10月16日

我遇到了相同的问题，函数返回了无法使用的颜色值，我通过用零填充输出字符串解决了这个问题

return (usePound?"#":"") + String("000000" + (g | (b << 8) | (r << 16)).toString(16)).slice(-6);

Yasin

# 2014年6月23日

谢谢 Frank

# 2014年11月14日

太棒了！使用基本颜色非常有效：#2D5C90 和 #53acb2，并使用 120 的值进行浅化。易于使用。

Blah

# 2015年12月14日

这不是 css。这是一种改变 CSS 的 JavaScript 技巧。

Rachel shika

# 2016年6月10日

您好，我应该使用什么来浅化中性深色，我不想使用白色……请帮忙

Ryan

# 2016年6月27日

如果您组合以下内容，可以浅化/深化元素的颜色
– :after，和
– rgba(val,val,val,transp)

这是我在我的网站上所做的
.button{… position:relative;}
.button:hover:after{content:””;display:block;position:absolute;top:0;left:0;background:rgba(255,255,255,.5);}

Ryan

评论永久链接# 2016年6月27日

抱歉，不知道它会被截断。这是剩下的内容
background:rgba(255,255,255,.5);

niko

# 2017年1月4日

谢谢。看看 colorglower.com，它输出十六进制颜色代码的浅色和深色版本

Arihant

# 2017年5月1日

您好！我正在尝试理解转换，但失败了。您/任何人都可以解释一下位运算符如何帮助实现使用给定量浅化颜色的目的吗？

Kyle Holmberg

# 2017年9月17日

嘿 Chris,

喜欢您的网站。我正在制作一个脚本来创建颜色阴影和系列名称，并且我严重依赖这篇文章。

我只是想说，我发现了一个非常重要的错别字！

在您的代码中，b（蓝色）实际上应该是 g（绿色）。

在第 31 行（在 num 被分配后）执行此操作：console.log(col, [(num >> 16), (num & 0x0000FF), ((num >> 8) & 0x00FF)]); 将清楚地说明所宣称的 rgb 与十六进制不匹配，但所宣称的“rbg”匹配。

在 imgur.com 上查看帖子

Anil

# 2018年1月24日

使用 FRANK 的更改，它对我有用……谢谢您

Igor

# 2018年3月28日

您的代码有一些错误（一些结果返回，例如 #004a 但需要 #00004a）。我纠正了一些内容。我使用的代码

function LightenDarkenColor(col, amt) {
var usePound = false;

if (col[0] == "r" && col[1] == "g" && col[2] == "b") {
    col = colorToHex(col);
}

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 g = ((num >> 8) & 0x00FF) + amt;

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

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

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

return (usePound ? "#" : "")
    + (r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16))
    + (g.toString(16).length == 1 ? "0" + g.toString(16) : g.toString(16))
    + (b.toString(16).length == 1 ? "0" + b.toString(16) : b.toString(16));

}

function colorToHex(color) {
if (color.substr(0, 1) === ‘#’) {
return color;
}
var digits = /(.*?)rgb((\d+),\s?(\d+),\s?(\d+))/.exec(color);

if (digits) {
    var r = parseInt(digits[2]);
    var g = parseInt(digits[3]);
    var b = parseInt(digits[4]);

    return '#' + (r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16))
        + (g.toString(16).length == 1 ? "0" + g.toString(16) : g.toString(16))
        + (b.toString(16).length == 1 ? "0" + b.toString(16) : b.toString(16));
}
else
{
    digits = /(.*?)rgba?\((\d+),\s?(\d+),\s?(\d+),\s?(\d+(\.\d)?)\)/.exec(color);

    if (digits) {
        var r = parseInt(digits[2]);
        var g = parseInt(digits[3]);
        var b = parseInt(digits[4]);
        var a = parseFloat(digits[5]);

        return '#' + (r.toString(16).length == 1 ? "0" + r.toString(16) : r.toString(16))
            + (g.toString(16).length == 1 ? "0" + g.toString(16) : g.toString(16))
            + (b.toString(16).length == 1 ? "0" + b.toString(16) : b.toString(16)) + (a * 255).toString(16).substring(0, 2);
    }
}
return color;

}

Shachar Har-Shuv

# 2018年12月16日

在末尾添加 .padStart(6, ‘0’)！我被一个错误困住了半个小时，然后才意识到颜色字符串中的数字太少了……

thaxy

# 2019年5月21日

lightenDarkenColor(“#137713”, -20) 不起作用，并返回 #6300

Alejandro Rango

# 2019年5月31日

非常感谢您！对我来说非常有用。

James

# 2020年1月20日

这是最初由 PimpTrizkit 在 stackoverflow 主题中编写的代码的副本。 PimpTrizkit 此后开发的更新代码可以在此处找到：https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)#stackoverflow-archive-begin

Chris Coyier

# 2020年2月28日

读者 Robert Joosen 说这对他是有效的

shiftColor(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;

[r, g, b] = [r,g,b].map(color => color <= 15 ? `0${color.toString(16)}` : color.toString(16));


return (usePound?"#":"") + r + b + g;

}

Jeremy Hutchcraft

评论永久链接# 2020年10月5日

这对我也产生了更好的结果。谢谢！

Marek

# 2020年4月23日

今天您可以使用 filter: brightness
https://mdn.org.cn/en-US/docs/Web/CSS/filter-function/brightness

PimpTrizkit

# 2020年5月3日

哇！嘿！我在这篇文章中看到了我的代码。我记得写过它，真酷！实际上，它有点令人尴尬，因为那是最糟糕的版本。无论如何，是的，这个版本的函数充满了问题。正如你们许多人所注意到的那样。此外，正如 James 在上面的评论中指出的那样，这是原始帖子/问题。而不是答案/解决方案。原始问题很久以前在 stackoverflow 上发布，这里：-> StackOverflow

向下滚动到已接受的答案，您就可以看到这个项目变成了什么。当前版本非常通用且快速。具有几个不错的功能。工作非常出色。虽然很难阅读。

但是是的，当前版本是我制作的其他一些 JavaScript 函数的小型库的一部分。在这里提供：-> GitHub

这篇文章是在什么时候写的？因为我很惊讶 Coyier 先生使用了旧/不好的版本，当前版本已经发布……在同一页面……多年了。

ps. 再想想，也许是因为它很难读，哈哈

Keul

# 2020 年 6 月 30 日

对功能没有任何影响，但它是 RGB，而不是 RBG，请反转变量名称 :)

Martin Ždila

# 2022 年 3 月 28 日

简化版本

function adjustBrightness(col, amt) {
    const num = parseInt(col.charAt(0) === "#" ? col.slice(1) : col, 16);

    const clamp = (val: number) => (val < 0 ? 0 : val > 255 ? 255 : val);

    return (
        (col.charAt(0) === "#" ? "#" : "") +
        [0, 8, 16]
            .map((shift) => clamp(((num >> shift) & 0xff) + amt) << shift)
            .reduce((a, c) => a + c, 0)
            .toString(16)
            .padStart(6, "0")
    );
}

用法

演示

评论

发表评论 取消回复

发表评论取消回复