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

给定一个RGB值，如168, 0, 255如何创build色调（使其更浅）和色调（使其更深）？

Answer 1

在几个阴影和着色选项中：

• 对于阴影，将每个分量乘以其先前值的1/4，1/2，3/4等等。 因子越小，阴影越深。

• 对于色彩，计算（255 – 之前的值），乘以1/4，1/2，3/4等（因子越大，色调越浅），并将其添加到之前的值。

随着基于物理的渲染的出现，实践已经出现在线性RGB中进行颜色处理（例如色调和其他阴影）。 正如Violet Giraffe在伽马校正的评论中暗示的那样，有多种RGB色彩空间，其中很多是通过伽玛校正转换成线性RGB和从线性RGB转换而来的。 然而，大多数计算机显示器显示的颜色不可能是线性RGB。 一个这样的非线性色彩空间是sRGB; 转换为线性RGB 大致相当于将每个sRGB颜色分量（范围从0到1）提高到2.2的幂。

Answer 2

一些定义

• 阴影是通过“变暗”色调或“join黑色”
• 色调是通过“调色”或“加白”来产生的，

创build色调或阴影

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

• 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 

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

     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 。 转换公式不是微不足道的，但可以在互联网上find。 根据你的语言，它也可能作为一个核心function：

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

比较模型

• RGB具有实现简单的优点，但是：
  • 你只能相对地遮蔽或调色
  • 你不知道你的颜色是否已经着色或着色
• HSV或HSB有点复杂，因为你需要玩两个参数来获得你想要的（ Saturation和Value / Brightness ）
• 从我的观点来看， HSL是最好的：
  • 由CSS3支持（用于webapp）
  • 简单而准确：
    • 50%意味着不变的色调
    • >50%表示色相较淡（色调）
    • <50%表示色调较暗（阴影）
  • 给定一种颜色，你可以确定它是否已经着色或着色
  • 您可以相对或绝对地对色彩进行着色或淡化（只需更换“ Lightness部分）

---

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

Answer 3

这是一个PHP解决scheme： http : //www.charles-reace.com/test/colors.php?color=123456

Answer 4

我目前正在试验canvas和像素…我发现这个逻辑对我更好。

1. 用这个来计算灰度（luma？）
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; 

或类似的东西…