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

Question

给定一个 RGB 值，例如 168, 0, 255，如何创建颜色的色调（使其更亮）和阴影（使其更暗）？

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 关于“伽玛校正”的评论。

Answer 2

一些定义

• 阴影是通过“加深”色调或“添加黑色”产生的
• 色调是通过“淡化”色调或“添加白色”

产生阴影

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

• RGB:

  • 遮光：

    newR = currentR * (1 - 阴影系数)
    新G = 当前G * (1 - 阴影系数)
    新B = 当前B * (1 - 阴影系数)
    

  • 着色：

    newR = currentR + (255 - currentR) * 色调系数
    新G = 当前G + (255 - 当前G) * 色调系数
    新B = 当前B + (255 - 当前B) * 色调系数
    

  • 更一般地说，颜色导致颜色 RGB(currentR,currentG,currentB) 与颜色 RGBA(aR,aG,aB,alpha) 分层> 是：

    newR = 当前R + (aR - 当前R) * alpha
    新G = 当前G + (aG - 当前G) * alpha
    新B = 当前B + (aB - 当前B) * alpha
    

  其中 (aR,aG,aB) = black = (0,0,0) 用于阴影，(aR,aG,aB) = White = (255,255,255) code> 用于着色

• HSV 或 HSB：

  • 要着色：降低值 / 亮度或提高饱和度
  • 要着色：降低饱和度或增加值 / 亮度
• HSL：
  • 遮光：降低亮度
  • 要着色：增加亮度

存在从一种颜色模型转换为另一种颜色模型的公式。根据您最初的问题，如果您处于 RGB 模式并希望使用 HSV 模型进行着色，则只需转换为 HSV 即可，进行着色并转换回 RGB。转换公式并不简单，但可以在互联网上找到。根据您的语言，它也可能作为核心功能提供：

• RGB 到 HSV 颜色javascript?
• 将 RGB 值转换为 HSV

比较模型

• RGB 的优点是实现起来非常简单，但是：
  • 您只能相对地对颜色进行着色或着色
  • 您不知道您的颜色是否已经着色或着色
• HSV 或 HSB 有点复杂，因为您需要使用两个参数来获得你想要的（Saturation & Value / Brightness）
• HSL 是最好的我的观点：
  • 由 CSS3 支持（针对网络应用）
  • 简单而准确：
    • 50% 表示未改变的色调
    • >50% 表示色调较浅（色调）
    • <50% 表示色调较暗（阴影）
  • 给定一种颜色，您可以确定它是否已经着色或着色
  • 您可以相对或绝对地对颜色进行着色或着色（只需替换 Lightness 部分）

---

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

Answer 3

我目前正在尝试画布和像素......我发现这种逻辑更适合我。

1. 使用它来计算灰度（亮度？），
2. 但使用现有值和新的“色调”值
3. 计算差异（我发现我不需要相乘）

4. 添加以抵消“色调”值< /p>

   var grey = (r + g + b) / 3;    
   var grey2 = (new_r + new_g + new_b) / 3;
   
   var dr = 灰色 - 灰色2 * 1;    
   var dg = 灰色 - 灰色2 * 1    
   var db = 灰色 - 灰色2 * 1;  
   
   色调_r = new_r + dr;    
   色调_g = new_g + dg;   
   色调_b = new_b _ db;
   

或类似的值...