Question

我在color属性中添加两个颜色值，并使用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相同。 / p>

在您的附加示例中，a相当于base10中的10，而10 + 1在base10和11中相同b在base16：

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

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

在减法示例中，您可以拥有的最低值是f处没有颜色，因此0 - 0，在这种情况下any value，仍然结果为a：

希望这是有道理的。

有关详细信息，请参阅：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)
}

使用SCSS添加两个颜色值

2 个答案: