SCSSで2つのカラー値を追加する

Question

カラー属性に2つのカラー値を追加し、SCSSを使用して2つの値をバックグラウンドカラーで減算します。それは3番目の値を示しています。色を加えたり引いたりするパターンや数式はありますか？

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

Answer 1

16進形式の色は、それぞれが他の2つとは独立した3つのコンポーネントに分解されています。 16進形式で色を理解するより良い方法は、六角色の以下の間隔によって照明することができる：RRは赤色の着色を表し

# RR GG BB 

、GGは、緑色の着色を示し、BB青色着色を表します。

16進数の色の間で加減算を行う場合、fの値は最大の色値であり、0は最小の色の値であることを理解することが重要です。より詳細には

ヘクスで0はbase10で0と同じであるのに対し、進（base16）でfは、base10で16と同じです。あなたの付加の例で

、aはbase10で10に相当し、10 + 1はbase10で11とbase16でbあろう：

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値のそれぞれと新しい色の結果を2つの色を追加します。これは、色を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) 
}