给定一个 RGB 值，我如何创建一个色彩(或阴影) ？

给定一个 RGB 值，如 168, 0, 255，我如何创建色调(使它更轻)和阴影(使它更深)的颜色？

137917 次浏览
小开
最佳答案

在 几种选择中，用于遮光和着色:

  • 对于阴影，将每个组件乘以它的1/4、1/2、3/4等 因子越小，阴影越深

  • 对于色彩，计算(255-之前的值) ，乘以1/4, 1/2,3/4等(因子越大，色彩越淡) ，并将其添加到前一个值中(假设 each. Component 是一个8位整数)。

请注意，颜色操作(如色彩和其他阴影)应该在 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB 线性 RGB中完成。然而，文档中指定的 RGB 颜色或图像和视频中编码的 RGB 颜色不太可能是线性 RGB 颜色，在这种情况下，需要将所谓的 反向传递函数反向传递函数应用于 RGB 颜色的每个组件。此函数随 RGB 颜色空间而变化。例如，在 sRGB 颜色空间(如果 RGB 颜色空间未知，可以假设)中，此函数的 差不多等效于将每个 sRGB 颜色分量(从0到1)提升到2.2的幂。(注意，“线性 RGB”不是 RGB 颜色空间。)

另见紫罗兰长颈鹿关于“伽玛校正”的评论。

小开

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

  1. 用这个来计算灰度(luma?)
  2. 但同时具有现有值和新的“ tint”值
  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;

or something like that...

小开

一些定义

  • 阴影是通过“加深”色相或“加黑”产生的
  • 色彩是通过“减轻”色相或“增加白色”而产生的

创造一种色彩或阴影

根据您的颜色模型，有不同的方法来创建一个更深(阴影)或更浅(有色)的颜色:

  • 返回文章页面

    • 遮阴:

      newR = currentR * (1 - shade_factor)
newG = currentG * (1 - shade_factor)
newB = currentB * (1 - shade_factor)

    • To tint:

      newR = currentR + (255 - currentR) * tint_factor
newG = currentG + (255 - currentG) * tint_factor
newB = currentB + (255 - currentB) * tint_factor

    • More generally, the color resulting in layering a color RGB(currentR,currentG,currentB) with a color RGBA(aR,aG,aB,alpha) is:

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

    where (aR,aG,aB) = black = (0,0,0) for shading, and (aR,aG,aB) = white = (255,255,255) for tinting

  • HSV or HSB:

    • To shade: lower the Value / Brightness or increase the Saturation
    • To tint: lower the Saturation or increase the Value / Brightness
  • HSL:
    • To shade: lower the Lightness
    • To tint: increase the Lightness

There exists formulas to convert from one color model to another. As per your initial question, if you are in RGB and want to use the HSV model to shade for example, you can just convert to HSV, do the shading and convert back to RGB. Formula to convert are not trivial but can be found on the internet. Depending on your language, it might also be available as a core function :

Comparing the models

  • RGB has the advantage of being really simple to implement, but:
    • you can only shade or tint your color relatively
    • you have no idea if your color is already tinted or shaded
  • HSV or HSB is kind of complex because you need to play with two parameters to get what you want (Saturation & Value / Brightness)
  • HSL is the best from my point of view:
    • supported by CSS3 (for webapp)
    • simple and accurate:
      • 50% means an unaltered Hue
      • >50% means the Hue is lighter (tint)
      • <50% means the Hue is darker (shade)
    • given a color you can determine if it is already tinted or shaded
    • you can tint or shade a color relatively or absolutely (by just replacing the Lightness part)

提交答案