-
02-07-2019 - |
题
的动机
我想找到一种方式,采取任意的色彩,并减轻它一些阴影,所以,我可以通过程序创造一个好的渐变,从一个颜色更浅的版本。梯度将作为背景的用户界面。
可能性1
很显然,我可以只是分裂出来的RGB值和增加他们单独通过一定的数量。这实际上我想要什么?
可能2
我的第二个想法是要转换RGB到单纯疱疹病毒/HSB/赫尔辛基公共(色,饱和,价值/亮/明度)、增加的亮一点,降低饱和点,然后将其转换回RGB。这将有所需的效果?
解决方案
我会去的第二个选项。一般来说RGB空间是不是真的良好做颜色操作(建立过渡,从一个颜色到其他闪电/昏暗的颜色,等等)。下面是两个站点我已经找到一个快速搜索的转换从/向RGB向/从赫尔辛基公共:
- 从"基本的计算机图形"
- 一些源码C# -应该可以很容易地适应其他的编程语言。
其他提示
正如 Wedge所说,你想要倍增使事情变得更加明亮,但是只有在其中一种颜色变得饱和(即达到255或更高)时才有效。此时,您可以将值限制为255,但随着颜色变浅,您将巧妙地更改色调。要保持色调,您需要保持(中 - 最低)/(最高 - 最低)的比率。
这是Python中的两个函数。第一个实现了朴素的方法,如果它们结束,它只会将RGB值钳位到255。第二个重新分配多余的值以保持色调不变。
def clamp_rgb(r, g, b):
return min(255, int(r)), min(255, int(g)), min(255, int(b))
def redistribute_rgb(r, g, b):
threshold = 255.999
m = max(r, g, b)
if m <= threshold:
return int(r), int(g), int(b)
total = r + g + b
if total >= 3 * threshold:
return int(threshold), int(threshold), int(threshold)
x = (3 * threshold - total) / (3 * m - total)
gray = threshold - x * m
return int(gray + x * r), int(gray + x * g), int(gray + x * b)
我创建了一个以RGB值(224,128,0)开头的渐变,并将其乘以1.0,1.1,1.2等,直到2.0。上半部分是使用 clamp_rgb
的结果,下半部分是 redistribute_rgb
的结果。我认为很容易看出重新分配溢出会带来更好的结果,而不必离开RGB色彩空间。
为了比较,这里是HLS和HSV颜色空间中的相同渐变,由Python的 colorsys
模块。仅修改了 L
组件,并对生成的RGB值执行了钳制。结果类似,但每个像素都需要色彩空间转换。
在C#中:
public static Color Lighten(Color inColor, double inAmount)
{
return Color.FromArgb(
inColor.A,
(int) Math.Min(255, inColor.R + 255 * inAmount),
(int) Math.Min(255, inColor.G + 255 * inAmount),
(int) Math.Min(255, inColor.B + 255 * inAmount) );
}
我到处都用过这个。
System.Windows.Forms命名空间中的ControlPaint类具有静态方法Light and Dark:
public static Color Dark(Color baseColor, float percOfDarkDark);
这些方法使用HLSColor的私有实现。我希望这个结构是公共的,并且在System.Drawing中。
或者,您可以在Color struct上使用GetHue,GetSaturation,GetBrightness来获取HSB组件。不幸的是,我没有找到逆转换。
将其转换为RGB并在原始颜色和目标颜色(通常为白色)之间进行线性插值。因此,如果您想在两种颜色之间使用16种阴影,请执行以下操作:
for(i = 0; i < 16; i++)
{
colors[i].R = start.R + (i * (end.R - start.R)) / 15;
colors[i].G = start.G + (i * (end.G - start.G)) / 15;
colors[i].B = start.B + (i * (end.B - start.B)) / 15;
}
为了获得给定颜色的较浅或较暗版本,您应该修改其亮度。即使不将颜色转换为HSL或HSB颜色,也可以轻松完成此操作。例如,为了使颜色更亮,您可以使用以下代码:
float correctionFactor = 0.5f;
float red = (255 - color.R) * correctionFactor + color.R;
float green = (255 - color.G) * correctionFactor + color.G;
float blue = (255 - color.B) * correctionFactor + color.B;
Color lighterColor = Color.FromArgb(color.A, (int)red, (int)green, (int)blue);
如果您需要更多详细信息,请阅读全文在我的博客上。
之前曾问过一个非常相似的问题,有用的答案: 如何确定更暗或给定颜色的浅色变体?
简短回答:如果您只需要“足够好”,则将RGB值乘以常数,如果您需要精确度,则转换为HSV。
我使用安德鲁的回答和马克的回答来制作这个(截至2013年1月没有范围)输入ff)。
function calcLightness(l, r, g, b) {
var tmp_r = r;
var tmp_g = g;
var tmp_b = b;
tmp_r = (255 - r) * l + r;
tmp_g = (255 - g) * l + g;
tmp_b = (255 - b) * l + b;
if (tmp_r > 255 || tmp_g > 255 || tmp_b > 255)
return { r: r, g: g, b: b };
else
return { r:parseInt(tmp_r), g:parseInt(tmp_g), b:parseInt(tmp_b) }
}
转换为HS(LVB),增加亮度然后转换回RGB是在不影响色调和饱和度值的情况下可靠地减轻颜色的唯一方法(即仅在不改变任何其他方式的情况下减轻颜色)
我已经做到了这两种方式 - 你可以用可能性2获得更好的结果。
您为Possibility 1构建的任何简单算法都可能仅适用于有限范围的起始饱和度。
如果(1)您可以限制使用的颜色和亮度,以及(2)您在渲染中执行大量计算,您可能需要查看Poss 1。
生成UI的背景不需要很多阴影计算,所以我建议Poss 2。
-Al。
如果你想产生渐变淡出,我建议进行以下优化:不应该为每种颜色做RGB-&gt; HSB-&gt; RGB,而应该只计算目标颜色。一旦知道目标RGB,就可以简单地计算RGB空间中的中间值,而无需来回转换。无论您是否计算使用的线性转换,都取决于您。
方法1:将RGB转换为HSL,调整HSL,转换回RGB。
方法2: Lerp RGB颜色值 - http: //en.wikipedia.org/wiki/Lerp_(computing)
参见我对这个类似问题的回答是方法2的C#实现。
假装您将alpha混合为白色:
oneMinus = 1.0 - amount
r = amount + oneMinus * r
g = amount + oneMinus * g
b = amount + oneMinus * b
其中 amount
从0到1,0返回原始颜色,1返回白色。
如果你想要显示禁用的东西,你可能想要混合任何背景颜色:
oneMinus = 1.0 - amount
r = amount * dest_r + oneMinus * r
g = amount * dest_g + oneMinus * g
b = amount * dest_b + oneMinus * b
其中(dest_r,dest_g,dest_b)
是混合到的颜色, amount
是0到1,零返回(r,g, b)
和1返回(dest.r,dest.g,dest.b)
直到它成为我原来问题的相关问题后才发现这个问题。
然而,使用这些伟大答案的见解。为此我拼凑了一个很好的双线功能:
它是方法1的一个版本。但考虑到过饱和。就像基思在上面的回答中说的那样;使用Lerp似乎解决了Mark提到的同样问题,但没有重新分配。 shadeColor2
的结果应该更接近于使用HSL以正确的方式进行,但没有开销。
派对有点晚了,但是如果你使用 javascript
或 nodejs
,你可以使用 tinycolor library ,并按照您想要的方式操作颜色:
tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d"
我会先尝试#1号,但#2听起来不错。尝试自己动手,看看你对结果是否满意,听起来好像花了10分钟才能完成测试。
从技术上讲,我认为两者都不正确,但我相信你想要一个选项#2的变体。问题在于采用RGB 990000和“闪电”。它真的只会添加到红色通道(值,亮度,亮度),直到你到达FF。之后(稳定的红色),它将取消饱和度一直到纯白色。
转换变得烦人,特别是因为你不能直接进出RGB和Lab,但我认为你真的想要分离色度和亮度值,只需修改亮度就可以真正达到你想要的效果。 / p>
你会找到代码转换之间的空格中的颜色 色彩的工具,红宝石图书馆
我有一个博客文章这显示了如何在Delphi中执行此操作。它非常简单,因为ColorRGBToHSL和ColorHLSToRGB函数是标准库的一部分。
以下是在Python中淡化RGB颜色的示例:
def lighten(hex, amount):
""" Lighten an RGB color by an amount (between 0 and 1),
e.g. lighten('#4290e5', .5) = #C1FFFF
"""
hex = hex.replace('#','')
red = min(255, int(hex[0:2], 16) + 255 * amount)
green = min(255, int(hex[2:4], 16) + 255 * amount)
blue = min(255, int(hex[4:6], 16) + 255 * amount)
return "#%X%X%X" % (int(red), int(green), int(blue))