以编程方式使十六进制颜色变暗[关闭]

Posted 2023-02-23

【中文标题】以编程方式使十六进制颜色变暗[关闭]

【英文标题】：Programmatically darken a Hex colour [closed]

【发布时间】：2010-12-19 17:12:20

【问题描述】：

以编程方式使十六进制颜色变暗的最简单方法是什么？

【问题讨论】：

我发现这个 github gist 对于某种工作解决方案以编程方式改变颜色很有用 - 请注意 fraction 参数有一个百分比。所以我使用输入 0.05 变暗 5% - gist.github.com/martintreurnicht/f6bbb20a43211bc2060e

这对我有用 - ***.com/questions/33072365/…

【参考方案1】：

如果您不介意过多的控制，而只是想要一个通常较暗的颜色版本，那么：

col = (col & 0xfefefe) >> 1;

是一种将颜色值减半的好方法（显然，假设它被打包为每个通道一个字节）。

以同样的方式更亮：

col = (col & 0x7f7f7f) << 1;

【讨论】：

有没有办法让它变暗四分之一而不是一半？

更亮的是(col & 0x7f7f7f) << 1，尽管对于更复杂的东西，你最好分解RGB组件并单独操作它们

要获得稍微暗一点的东西，试试这个：((col & 0x7E7E7E) >> 1) | (col & 0x808080)

你能解释一下这里发生了什么吗？

@Sisir: 0xFE 是二进制的11111110。使用 & 运算符将每个颜色字节的最小位（十进制值 1）设置为零。 >> 运算符将所有内容向下移动一个位置，因此零点现在位于价值 255 点的位置，而每种颜色的其余部分位于价值仅为之前一半的位置。

【参考方案2】：

将十六进制颜色转换为整数 RBG 分量：

#FF6600 = rbg(255, 102, 0)

如果你想让它变暗 5%，那么只需将所有整数值减少 5%：

255 - 5% = 242
102 - 5% = 96
0 - 5% = 0

= rbg(242, 96, 0)

转换回十六进制颜色

= #F26000

【讨论】：

由于relative luminance，这实际上不会很好地工作 - HSV 规模考虑了这一点。只需将所有 RGB 值减少相同的量，结果颜色就会看起来更偏绿和偏蓝（因为这些成分看起来比红色更亮）。

Windows 10 创意者版通过将 rgb 数字减少约 45% 使登录屏幕图像变暗。

【参考方案3】：

一个用javascript实现的函数：

// credits: richard maloney 2006
function getTintedColor(color, v) 
    if (color.length >6)  color= color.substring(1,color.length)
    var rgb = parseInt(color, 16); 
    var r = Math.abs(((rgb >> 16) & 0xFF)+v); if (r>255) r=r-(r-255);
    var g = Math.abs(((rgb >> 8) & 0xFF)+v); if (g>255) g=g-(g-255);
    var b = Math.abs((rgb & 0xFF)+v); if (b>255) b=b-(b-255);
    r = Number(r < 0 || isNaN(r)) ? 0 : ((r > 255) ? 255 : r).toString(16); 
    if (r.length == 1) r = '0' + r;
    g = Number(g < 0 || isNaN(g)) ? 0 : ((g > 255) ? 255 : g).toString(16); 
    if (g.length == 1) g = '0' + g;
    b = Number(b < 0 || isNaN(b)) ? 0 : ((b > 255) ? 255 : b).toString(16); 
    if (b.length == 1) b = '0' + b;
    return "#" + r + g + b;
 

例子：

> getTintedColor("ABCEDEF", 10)
> #c6f7f9

【讨论】：

如果其他人想将其用于 Three.js 的 THREE.Color - 只需从第一个分配直接转到 r、g 和 b（当您有数字时）并将每个除以 255，因为 RGB 值应该在 0 和 1 之间。

【参考方案4】：

好吧，我没有任何伪代码给你，只是一个提示。如果要使颜色变暗并保持其色调，则应将该十六进制转换为 HSB（色调、饱和度、亮度）而不是 RGB。这样，您可以调整亮度，它仍然看起来像相同的颜色，而不会发生色相偏移。然后，您可以将该 HSB 转换回十六进制。

【讨论】：

有效，但对于简单的任务来说过于复杂

我实际上更喜欢这种方法，因为我有更多的控制权。请注意，在 android 中它是 HSV。 Color.colorToHSV(col, hsv);

这是执行此操作的 javascript 代码：gist.github.com/xaphod/ae965011d4864abc4052ebd08c3b795c

【参考方案5】：

given arg darken_factor # a number from 0 to 1, 0=no change, 1=black
for each byte in rgb_value
    byte = byte * (1 - darken_factor)

【参考方案6】：

我为此拼凑了一个不错的两行函数：

Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

shadeColor2(hexcolor,-0.05) 暗 5%

shadeColor2(hexcolor,-0.25) 暗 25%

使用正片来提亮。

【参考方案7】：

将十六进制颜色拆分为其 RGB 分量。 将这些组件中的每一个转换为整数值。 将该整数乘以一个分数，例如0.5，确保结果也是整数。 或者，从该整数中减去一定数量，确保不低于 0。 将结果转换回十六进制。 以 RGB 顺序连接这些值，然后使用。

【参考方案8】：

RGB 颜色（以十六进制 RGB 表示法）通过调整明暗度、色调、明度或亮度来变暗或变亮。看操场：colorizer.org

---

选项 1. 将 R、G、B 值转换为加深阴影

这个很简单，但很容易搞砸。这是从每个值中减去 (0,255) 刻度的 16 个点：

myHex = 0x8c36a9;
darkerHex = myHex - 0x101010;
#  0x7c2699;

如果任何 R、G、B 值为0x0f 或更低，则十六进制将下溢。像这样的东西可以解决这个问题。

myHex = 0x87f609;
darkenBy = 0x10;
floor = 0x0;

darkerHex = (max((myHex >> 16) - darkenBy, floor) << 16) + \
    (max(((myHex & 0xff00) >> 8) - darkenBy, floor) << 8) + \
    max(((myHex & 0xff) - darkenBy), floor);
# 0x77e600

# substitute `ceiling=0xff;` and `min((myHex ...) + lightenBy, ceiling)` for lightening

选项 2. 缩放 R、G、B 值以增加黑色

在CMYK 模型中，键（黑色）是 1 - (0,1) 刻度上 R、G、B 值的最大值。

这个很简单，不用太多代码就可以得到很好的结果。您正在通过单个比例因子重新调整 R、G、B 值的分布。

将比例因子表示为 2 位十六进制数（因此 50% 为 .5*0x100 或 0x80，1/16 为 0x10，10% 向下舍入为 0x19）。

#  Assumes integer division ... looking at you python3 >:(

myHex = 0x8c36a9;
keyFactor = 0x10;                   #  Lighten or darken by 6.25%
R = myHex >> 16;                    #  0x8c
G = (myHex & 0xff00) >> 8;          #  0x36
B = myHex & 0xff;                   #  0xa9

darkerHex = ((R-R*keyFactor/0x100) << 16) +  # Darker R
            ((G-G*keyFactor/0x100) << 8) +   # Darker G
            (B-B*keyFactor/0x100);           # Darker B
#  0x84339f

#  substitute `(X+keyFactor-X*keyFactor/0x100)` for lightening 
#  0x9443af

选项 3. 降低亮度或恒定色调的亮度

在 RGB 的HSL 表示中，亮度是 R、G、B 值的最小值和最大值之间的中点。对于HSV，亮度是R、G、B值的最大值。

考虑使用您的语言的内置或外部 RGB/HEX 到 HSL/HSV 转换器。然后调整 L/V 值并转换回 RGB/HSL。您可以手动进行转换，如 #1 和 #2，但与现有转换器相比，实施可能不会为您节省任何时间（请参阅数学链接）。

【参考方案9】：

您应该考虑使 L*a*b* 颜色空间中的颜色变暗。这是一个使用 chroma.js 的 JavaScript 示例：

chroma.hex("#FCFC00").darker(10).hex()  // "#dde000"

【参考方案10】：

像#FCFCFC 这样的十六进制颜色由代表RGB 的三对组成。每对的第二部分可以减少以使任何颜色变暗而不会显着改变颜色。

例如。使#FCFCFC变暗，降低C的值以给出#F0F0F0

将每对的第一部分减少少量也会使颜色变暗，但您会开始更多地影响颜色（例如，将绿色变为蓝色）。