Hinzufügen von zwei Farbwerten mit SCSS

Question

Ich füge zwei Farbwerte im Farbattribut hinzu und subtrahiere zwei Werte in der Hintergrundfarbe mit SCSS. Es zeigt einen dritten Wert. Gibt es ein Muster/eine Formel, um die Farben zu addieren oder zu subtrahieren?

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

Answer 1

Farben in hexadezimaler Form sind in drei Komponenten zerlegt, von denen jede unabhängig von den anderen beiden ist. Eine bessere Art der Farben in Hexadezimal-Form zu verstehen, kann durch den folgenden Abstand der Hex-Farbe beleuchtet werden:

# RR GG BB 

Wo RR die rote Färbung darstellt, GG die grüne Färbung darstellt und BB stellt die blaue Färbung.

Der wichtige Service ist zu verstehen, dass, wenn die Addition und Subtraktion zwischen hexadezimalen Farben durchgeführt wird, ein f Wert ein maximaler Farbwert und ein 0 ist eine minimale Farbwert.

Genauer f in hexadezimal (Base16) ist das gleiche wie in 16 Base10, wohingegen in 0 hex die gleiche wie in 0 Base10 ist.

In Ihrem Zusätzlich Beispiel ist a-10 in Base10 äquivalent und 10 + 1 würde 11 in Base10 und b in Base16 sein:

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

Für die Berechnung der blauen Komponente, ist das Ergebnis ff , da der maximale Farbwert f ist (dh f + any value ist immer noch f).

Im Subtraktion Beispiel der niedrigste Wert, den Sie ist das Fehlen der Farbe bei 0, so 0 haben kann - any value, in diesem Fall a ergibt noch in 0: sense

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

Hope this macht .

Für weitere Informationen siehe: https://en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

Answer 2

Hinzufügen von zwei Farben zusammen führt zu einer neuen Farbe mit jeder seiner RGB-Werte gleich der Summe der entsprechenden Werte RGB-Eingang. Dies kann deutlich gemacht werden, indem die Farben in ihre RGB-Formate umgewandelt werden:

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