Fatal编程技术网
  • colors/
  • Colors 给定RGB值，如何创建色调（或阴影）？

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

colors

Colors 给定RGB值，如何创建色调（或阴影）？,colors,rgb,Colors,Rgb,给定RGB值，如168、0、255，如何创建颜色的着色（使其更亮）和着色（使其更暗）？用于着色和着色： 对于阴影，将每个组件乘以其颜色的1/4、1/2、3/4等 以前的值。因子越小，阴影越深 对于色调，计算（255-以前的值），乘以1/4， 1/2、3/4等（因子越大，色调越浅），并将其添加到上一个值中（假设每个.component为8位整数） 请注意，颜色操作（如色调和其他着色）应在线性RGB中完成。然而，在文档中指定或在图像和视频中编码的RGB颜色不可能是线性RGB，在这种情况下，需要对

给定RGB值，如
168、0、255
，如何创建颜色的着色（使其更亮）和着色（使其更暗）？

用于着色和着色：

  • 对于阴影，将每个组件乘以其颜色的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关于“gamma校正”的评论。

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

  • 使用此项计算灰色度（luma？）
  • 但同时使用现有值和新的“色调”值
  • 计算差异（我发现我不需要乘法）
  • 添加以偏移“色调”值

    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;
    • 或者类似的…

    一些定义
    • 阴影通过“变暗”色调或“添加黑色”产生
    • 色调是通过“点亮”色调或“添加白色”产生的
    制造色调或阴影 根据您的颜色模型，有不同的方法来创建较深（着色）或较浅（着色）的颜色：

    • 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）=黑色=（0,0,0）
      用于着色，而
      （aR，aG，aB）=白色=（255255）
      用于着色

    • HSV
      或
      HSB
      ：

      • 着色：降低
        值
        /
        亮度
        或增加
        饱和度
      • 着色：降低
        饱和度
        或增加
        值
        /
        亮度
    • HSL
      ：
      • 遮光：降低
        亮度
      • 着色：增加
        亮度
    存在从一种颜色模型转换到另一种颜色模型的公式。根据您最初的问题，如果您在
    RGB
    中，并且想使用
    HSV
    模型进行着色，例如，您可以只转换为
    HSV
    ，进行着色并转换回
    RGB
    。要转换的公式并不简单，但可以在互联网上找到。根据您的语言，它也可能作为核心功能提供：

    比较模型 
    • RGB
      的优点是实现起来非常简单，但是：
      • 您只能相对地对颜色进行着色或着色
      • 您不知道您的颜色是否已经着色或着色
    • HSV
      或
      HSB
      有点复杂，因为需要使用两个参数才能得到想要的（
      Saturation
      &
      值
      /
      亮度
      ）
    • HSL
      在我看来是最好的：
      • 由CSS3支持（用于webapp）
      • 简单准确： 
        • 50%
          表示色调不变
        • >50%
          表示色调较浅（色调）
        • 我试过了，效果很好。我认为写公式的例子会有帮助。原件（r、g、b）；阴影（rs，gs，bs）：
          rs=r*0.25
          ，
          gs=g*0.25
          ，
          bs=b*0.25
          （这是一个相当暗的阴影）；色调（rt，gt，bt）：
          rt=r+（0.25*（255-r））
          ，
          gt=g+（0.25*（255-g））
          ，
          bt=b+（0.25*（255-b））
          （这是一种非常浅的色调）。我把它作为一个很酷的阵列的一部分，创造了很多色彩，效果非常好。希望有帮助。谢谢你，彼得。你弄错了。是维切维萨。你确定这些操作不能解释伽马校正吗？@VioletGiraffe:你的伽马校正很有道理。请参阅我的编辑。（这取代了我22小时前删除的一条评论。）我相信这里的“色调是通过“加深”色调而产生的，色调，你指的是颜色。因为如果你说的是HSL/HSV中的色调，改变它会产生不同的颜色，而不是阴影/色调。色调（0-360°）本身不能变得更暗/更亮。要提供颜色阴影/色调，必须修改SL/SV值。此定义可能会误导某些人，使他们认为更改色调会产生较深/较浅的颜色。阴影版本仅适用于从0开始的颜色范围。将颜色范围的一半添加到颜色通道值，然后进行计算，然后再次减去该范围。如果您的颜色是有符号的，并且您可以在不因溢出而破坏某些内容的情况下进行计算，那么这将按预期工作。