我知道多个基于百分比计算颜色的程序。我真的很喜欢以这种方式显示颜色,因为它们似乎以一种不发光的暗淡方式褪色,这确实表明了一种不那么大胆的风格。
我只是想知道是否有人知道如何根据起始颜色(RGB255 代码)计算这些新的褪色颜色,以及我自己如何计算这些颜色?
我特别在寻找一种很好的褪色绿色,当显示为次要轮廓时看起来不错,我觉得知道这个过程可能会帮助我找到一个。(如果您对颜色有建议,请分享!)
我知道多个基于百分比计算颜色的程序。我真的很喜欢以这种方式显示颜色,因为它们似乎以一种不发光的暗淡方式褪色,这确实表明了一种不那么大胆的风格。
我只是想知道是否有人知道如何根据起始颜色(RGB255 代码)计算这些新的褪色颜色,以及我自己如何计算这些颜色?
我特别在寻找一种很好的褪色绿色,当显示为次要轮廓时看起来不错,我觉得知道这个过程可能会帮助我找到一个。(如果您对颜色有建议,请分享!)
有几种方法。通过混合颜色,数学上:
(1-a)*FGcolor+ a*BGcolor
将混合颜色,就好像 fg 颜色是 alpha 混合到 bg 颜色一样。您可以混合成白色黑色或任何其他颜色。介于 0 到 1 之间的可变 ai。python 中的示例:
from Tkinter import *
def ablend(a, fg, bg):
return ((1-a)*fg[0]+a*bg[0],
(1-a)*fg[1]+a*bg[1],
(1-a)*fg[2]+a*bg[2])
root = Tk()
num=8.0
fg=(100, 200, 170)
bg=(255,255,255)
for i in range(int(num)+1):
col = ablend(i/num, fg, bg)
e = Label(root, text=" "*70, background='#%02x%02x%02x' % col)
e.grid(row=i)
root.mainloop()
这将产生一个混合颜色的窗口。您可以自由更改背景颜色。
图 1:代码结果
您也可以通过其他方式进行融合。像 rgb/hsb/hsl 插值。使用 hsv 插值的示例:
from colorsys import rgb_to_hsv, hsv_to_rgb
# replace ablend with hsvblend
def hsvblend(a, fg, bg):
fgh = rgb_to_hsv(fg[0]/255.,fg[1]/255.,fg[2]/255.)
bgh = rgb_to_hsv(bg[0]/255.,bg[1]/255.,bg[2]/255.)
ret = hsv_to_rgb(
(1-a)*fgh[0]+a*bgh[0],
(1-a)*fgh[1]+a*bgh[1],
(1-a)*fgh[2]+a*bgh[2])
return ret[0]*255,ret[1]*255,ret[2]*255
等等...
图 2:使用 hsv 混合
这是一个额外的图像,显示了比完全饱和的白色表现更好的非白色背景。
图 3:更好地显示模式之间的差异(白色和黑色对于 hsv 来说是有问题的)
PS:非常抱歉代码非常混乱
它既快速又简单,但会带来破坏与白色以外的其他颜色重叠的颜色的潜在成本。
.selector { opacity: .36 ; }
做得很好,给了你更多的控制权,但伴随着在 RGB/Hex 和另一个模型之间转换的成本(有 js 库来解决这个问题)。为了减轻和去饱和,控制是显而易见的:
这两个通道一起工作,让您可以非常优雅地控制调色板。
Sass 等工具可让您快速轻松地控制颜色变化。这是当今大多数 [进步的] UI 开发人员在 Web 上使用的,因为它是优雅的实现和管理。您不会遇到不透明问题;您也无法很好地控制 HSB。
$mainColor: #900;
$secondColor: #009;
.useMainColor {
color: $mainColor;
}
.useLigherMainColor {
color: lighten( $mainColor, 60% ); // < lighten it
}
.useDarkerSecondColor {
color: darken( $secondColor, 20% ); // < darken it
}