给定RGB值,如何创建色调(或阴影)?


124

给定RGB值(如)168, 0, 255,如何创建颜色的色调(使其更亮)和阴影(使其更暗)?

Answers:


153

在阴影和着色的几种选择中:

  • 对于阴影,将每个分量乘以其先前值的1 / 4、1 / 2、3 / 4等。系数越小,阴影越深。

  • 对于色调,计算(255-先前的值),然后将其乘以1 / 4、1 / 2、3 / 4等(系数越大,色调越浅),然后将其与先前的值相加(假设每个.component是8位整数)。

请注意,应该在线性RGB中进行颜色处理(例如,色调和其他阴影)。但是,在文档中指定或在图像和视频中编码的RGB颜色不太可能是线性RGB,在这种情况下,需要将所谓的逆传递函数应用于RGB颜色的每个成分。此功能随RGB颜色空间而变化。例如,在sRGB颜色空间(如果RGB颜色空间未知的情况下可以假定),此功能大致等效于将每个sRGB颜色分量(范围从0到1)提高到2.2的幂。(请注意,“线性RGB”不是RGB颜色空间。)

另请参见Violet Giraffe关于“伽玛校正”的评论。


20
我尝试了一下,效果很好。我认为编写公式示例会有所帮助。原件(r,g,b); 灯罩(RS,GS,BS) ,rs = r * 0.25gs = g * 0.25bs = b * 0.25这是一个漂亮的深色阴影); 色调(室温,GT,BT): , rt = r + (0.25 * (255 - r))gt = g + (0.25 * (255 - g))bt = b + (0.25 * (255 - b))即是一个相当轻色调)。我将其作为酷炫阵列的一部分进行了处理,它创造了许多色调,并且效果很好。希望有帮助。谢谢彼得。
托马斯

1
你错了 反之亦然。
Francesco Menzani 2014年

您确定这些操作不能说明伽马校正吗?
紫罗兰色长颈鹿

1
@VioletGiraffe:伽玛校正可以很好地说明您的观点。看到我的编辑。(这取代了我22个小时前删除的评论。)
Peter O.

97

一些定义

  • 一个遮阳是由“变暗”的色相或“添加黑”产生
  • 色调通过“ligthening”的色相或“加入白色”产生

创建色调或阴影

根据您的颜色模型,可以使用不同的方法来创建较深(阴影)或较浅(着色)的颜色:

  • RGB

    • 遮蔽:

      newR = currentR * (1 - shade_factor)
      newG = currentG * (1 - shade_factor)
      newB = currentB * (1 - shade_factor)
      
    • 着色:

      newR = currentR + (255 - currentR) * tint_factor
      newG = currentG + (255 - currentG) * tint_factor
      newB = currentB + (255 - currentB) * tint_factor
      
    • 更一般而言,导致RGB(currentR,currentG,currentB)用一种颜色分层的颜色RGBA(aR,aG,aB,alpha)是:

      newR = currentR + (aR - currentR) * alpha
      newG = currentG + (aG - currentG) * alpha
      newB = currentB + (aB - currentB) * alpha
      

    在哪里(aR,aG,aB) = black = (0,0,0)着色和(aR,aG,aB) = white = (255,255,255)着色

  • HSVHSB

    • 遮蔽:降低Value/Brightness或增加Saturation
    • 着色:降低Saturation或增加Value/Brightness
  • HSL
    • 遮蔽:降低 Lightness
    • 着色:增加 Lightness

存在将一种颜色模型转换为另一种颜色模型的公式。按照您的第一个问题,例如,如果您RGB要使用HSV模型进行HSV着色,则可以将其转换为,进行着色,然后转换回RGB。要转换的公式并非易事,但可以在互联网上找到。根据您的语言,它也可能作为核心功能提供:

比较模型

  • RGB 具有非常容易实现的优点,但是:
    • 您只能相对地着色或着色您的颜色
    • 您不知道您的颜色是否已经着色或着色
  • HSV还是HSB有点复杂,因为您需要使用两个参数来获得所需的内容(SaturationValue/ Brightness
  • HSL 从我的角度来看,这是最好的:
    • 受CSS3支持(适用于Webapp)
    • 简单准确:
      • 50% 表示不变的色调
      • >50% 表示色调较浅(色调)
      • <50% 表示色相较暗(阴影)
    • 给定颜色,您可以确定它是否已着色或着色
    • 您可以相对或绝对地对颜色进行着色或着色(只需替换Lightness零件即可)


1
我相信这里的“色调是通过使色调“变暗”产生的”,色调是指颜色。因为如果您像在HSL / HSV中那样谈论色相,则对其进行更改将产生不同的颜色,而不是阴影/色调。色相(0-360°)本身不会变暗/变亮。为了提供颜色阴影/色调,必须修改SL / SV值。此定义可能会误导某人以为更改色调会产生较深/较浅的颜色。
akinuri '17

阴影版本仅适用于从0开始的颜色范围。将颜色范围的一半添加到颜色通道值,然后进行数学运算,然后再次减去该范围。如果您的颜色是带符号的,并且您可以进行计算而不会由于溢出而破坏任何内容,则可以按预期工作。
t0b4cc0

3

我目前正在尝试使用画布和像素...我发现这种逻辑对我来说更好。

  1. 用它来计算灰度(亮度?)
  2. 但同时具有现有价值和新的“色彩”价值
  3. 计算差异(我发现我不需要乘法)
  4. 添加以抵消“ tint”值

    var grey =  (r + g + b) / 3;    
    var grey2 = (new_r + new_g + new_b) / 3;
    
    var dr =  grey - grey2 * 1;    
    var dg =  grey - grey2 * 1    
    var db =  grey - grey2 * 1;  
    
    tint_r = new_r + dr;    
    tint_g = new_g + dg;   
    tint_b = new_b _ db;
    

或类似的东西...

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.