使用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) 
}