使用SCSS添加两个颜色值

Question

我在颜色属性中添加两个颜色值，并使用SCSS减去背景颜色中的两个值。它显示了第三个价值。有没有添加或减少颜色的图案/公式？

p{ 
    color: #ab00ff + #100abb; //bb0aff 
    background-color: #ab00ff - #100abb; //9b0044 
} 

Answer 1

十六进制形式的颜色被分解为三个组件，每个组件都独立于其他两个组件。理解在十六进制形式的颜色的更好方式可以通过十六进制颜色的如下间隔被点亮：

# RR GG BB 

凡RR表示红色着色，GG表示绿色着色，和BB表示蓝色着色。

重要的是要了解在十六进制颜色之间执行加减操作时，f值是最大颜色值，而0是最小颜色值。

更详细地，f十六进制（base16）是相同base10 16，而0十六进制是一样base10 0。

在你的另外示例，a相当于base10 10，和10 + 1将是base10 11和b在base16：

v 
    # ab 00 ff 
+ # 10 0a bb 
    ------- 
    # bb 0a ff 
      ^^ 

对于蓝色分量的计算，结果是ff ，因为最大颜色值是f（即，f + any value仍然是f）。

在减法例如，你可以有最低值是没有在0的颜色，所以0 - any value，在这种情况下a，仍然导致0：

#ab 00 ff 
- #10 0a bb 
    ------- 
    #9b 00 44 
    ^

希望这是有道理的。

有关详细信息，请参见：https://en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

Answer 2

添加两种颜色一起导致一种新的颜色与每个其等于相应的RGB输入值的总和RGB值。这可以通过将颜色转换为RGB格式来清楚：

p { 
    color: rgb(171, 0, 255) + rgb(16, 10, 187); // rgb(187, 10, 255) 
    background-color: rgb(171, 0, 255) - rgb(16, 10, 187); // rgb(155, 0, 68) 
}