给定一个RGB值，如何创建一个色调（或阴影）？

Question

给定一个RGB 值，比如 168, 0, 255，我该如何创建颜色的色调（使其变浅）和阴影（使其变暗）？

- DenaliHardtail

Answer 1

在涂色和着色的几种选项中：

• 对于阴影，将每个组件乘以其上一个值的1/4、1/2、3/4等系数。系数越小，阴影越暗。

• 对于着色，计算（255-上一个值），将其乘以1/4、1/2、3/4等系数（系数越大，着色越浅），然后加到上一个值上（假设每个组件都是8位整数）。

请注意，颜色操作（如着色和其他阴影）应在线性RGB中完成。但是，在文档中指定或编码为图像和视频的RGB颜色不太可能处于线性RGB中，在这种情况下，需要对RGB颜色的每个组件应用所谓的逆转换函数。此函数因RGB颜色空间而异。例如，在sRGB颜色空间中（如果未知RGB颜色空间，则可以假定为该颜色空间），此函数“大致”相当于将每个sRGB颜色组件（从0到1）提高到2.2的幂。（请注意，“线性RGB”不是RGB颜色空间。）

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

- Peter O.

---

我尝试了一下这个方法，效果很好。我认为写出这些公式的示例会很有帮助。 原始（r，g，b）; 阴影（rs，gs，bs）：rs = r * 0.25，gs = g * 0.25，bs = b * 0.25（这是一个相当暗的阴影）; 色调（rt，gt，bt）：rt = r + (0.25 * (255 - r))，gt = g + (0.25 * (255 - g))，bt = b + (0.25 * (255 - b))（这是一个相当浅的色调）。我将其作为一个酷炫的数组的一部分来创建许多色调，效果很好。希望这有所帮助。谢谢Peter。 - Thomas

你犯了一个错误。它是相反的。 - spongebob

你确定这些操作不需要考虑伽马校正吗？ - Violet Giraffe

@VioletGiraffe：你提到伽马校正是有道理的。请看我的编辑。（这个替换了我22小时前删除的评论。） - Peter O.

Answer 2

一些定义

• 色调是通过"加深"一个色相或"加黑"来产生的
• 色调是通过"变亮"一个色相或"加白"来产生的

创建色调或色调

根据您的颜色模型，有不同的方法可以创建较暗（阴影）或较亮（色调）的颜色：

• 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) 表示色调。

• HSV或HSB：

  • 要进行阴影处理：降低Value / Brightness或增加Saturation
  • 要进行色调处理：降低Saturation或增加Value / Brightness
• HSL：
  • 要进行阴影处理：降低Lightness
  • 要进行色调处理：增加Lightness

有公式可以将一种颜色模型转换为另一种。根据您最初的问题，如果您正在使用RGB并想要使用HSV模型进行阴影处理，例如，您可以将其转换为HSV，进行阴影处理，然后转换回RGB。转换公式并不是微不足道的，但可以在互联网上找到。根据您的语言，它也可能作为核心功能提供：

• JavaScript中的RGB到HSV颜色？
• 将RGB值转换为HSV

比较模型

• RGB的优点是非常简单易实现，但是：
  • 您只能相对调整颜色的阴影或色调
  • 您不知道您的颜色是否已经被调过色或阴影处理过
• HSV或HSB有点复杂，因为您需要使用两个参数来获得所需的效果（Saturation和Value / Brightness）
• HSL是我认为最好的：
  • 由CSS3支持（用于Web应用程序）
  • 简单而准确：
    • 50％表示未经修改的Hue
    • > 50％表示Hue较浅（色调）
    • < 50％表示Hue较暗（阴影）
  • 给定一种颜色，您可以确定它是否已经被调过色或阴影处理过
  • 您可以相对或绝对地改变颜色的色调或阴影效果（只需替换Lightness部分即可）

---

• 如果您想了解更多有关此主题的信息：Wiki：颜色模型
• 有关这些模型的更多信息：维基百科：HSL和HSV

- JBE

---

我相信这里的意思是_"通过调暗色相来产生阴影"_, 色相指的是颜色。因为如果你指的是HSL/HSV中的色相，改变它会产生不同的颜色，而不是阴影/色调。色相（0-360°）本身无法变暗/变亮。要给颜色添加阴影/色调，需要修改SL / SV值。这个定义可能会让人误以为改变色相会产生较暗/较浅的颜色。 - akinuri

阴影版本仅适用于颜色范围从0开始的情况。将您的颜色范围的一半加到颜色通道值中，然后进行计算，再次减去该范围。如果您的颜色是有符号的，并且您可以在不因溢出而破坏任何内容的情况下进行计算，则此方法可按预期工作。 - t0b4cc0

Answer 3

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

1. Use this to calculate the grey-ness ( luma ? )
2. but with both the existing value and the new 'tint' value
3. calculate the difference ( I found I did not need to multiply )

4. add to offset the 'tint' value

   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;
   

或者类似于这样的东西...

- Blair