给定RGB值,如何创建色调(或阴影)？

Question

给定一个RGB值,比如168, 0, 255,如何创建颜色(使其更亮)和阴影(使其更暗)的颜色？

Answer 1

在着色和着色的几个选项中:

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

• 对于色调,计算(255 - 前一个值),乘以1/4,1/2,3/4等(因子越大,色调越浅),并将其加到前一个值(假设每个.component是一个8位整数).

请注意,颜色处理(如色调和其他阴影)应以线性RGB完成.然而,在文档中指定或在图像和视频中编码的RGB颜色不可能是线性RGB,在这种情况下,需要将所谓的反向传递函数应用于每个RGB颜色的分量.此功能随RGB色彩空间而变化.例如,在sRGB颜色空间中(如果RGB颜色空间未知,可以假设),此函数大致相当于将每个sRGB颜色分量(范围从0到1)提高到2.2的幂.(请注意,"线性RGB"不是RGB色彩空间.)

另见Violet Giraffe关于"伽马校正"的评论.

Answer 2

一些定义

• 甲灯罩是由"变暗"的色相或"添加黑"产生
• 甲色调通过"ligthening"的色相或"加入白色"产生

创建色调或阴影

根据您的颜色模型,有不同的方法可以创建更深(阴影)或更浅(浅色)的颜色:

• 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支持(适用于webapp)
  • 简单准确:
    • 50% 意味着一个未改变的色调
    • >50% 意味着色调较淡(色调)
    • <50% 意味着色调较暗(阴影)
  • 给定颜色,您可以确定它是否已经着色或着色
  • 你可以相对或绝对地着色或着色(只需更换Lightness部件)

• 如果您想进一步了解这个主题:Wiki:Colors Model
• 有关这些模型的更多信息:维基百科:HSL和HSV