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

Question

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

Answer 1

在several options 中用于着色和着色：

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

• 对于色调，计算 (255 - 前一个值)，乘以 1/4， 1/2、3/4 等（系数越大，色调越淡），并将其与前一个值相加（假设 each.component 是一个 8 位整数）。

请注意，颜色操作（例如色调和其他阴影）应在线性 RGB 中完成。但是，在文档中指定或在图像和视频中编码的 RGB 颜色不太可能是线性 RGB，在这种情况下，需要将所谓的 逆传递函数 应用于 RGB 颜色的每个分量.此功能随 RGB 色彩空间而变化。例如，在 sRGB 颜色空间中（如果 RGB 颜色空间未知，则可以假设），此函数大致相当于将每个 sRGB 颜色分量（范围从 0 到 1）提升一次2.2。 （请注意，“线性 RGB”不是 RGB 颜色空间。）

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

Answer 2

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

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

4. 添加以抵消“色调”值

   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;
   

或类似的东西......

Answer 3

一些定义

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

创建色调或阴影

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

• 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。转换公式并非易事，但可以在互联网上找到。根据您的语言，它也可能作为核心功能提供：

• RGB to HSV color in javascript?
• Convert RGB value to HSV

比较模型

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

---

• 如果您想了解有关此主题的更多信息：Wiki: Colors Model
• 有关这些型号的详细信息：Wikipedia: HSL and HSV