CODEWITHSUNDEEP
csssass
fruitjs
fruitjs

Reputation: 765

Adding two color values with SCSS

I am adding two color values in color attribute and subtracting two values in background color using SCSS. It shows some third value. Is there any pattern/formula to add or subtract the colors?

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

Upvotes: 2

Views: 2622

Answers (2)

timolawl
timolawl

Reputation: 5564

Colors in hexadecimal form are broken down into three components, each of which are independent of the other two. A better way of understanding colors in hexadecimal form can be illuminated by the following spacing of the hex color:

# RR GG BB

Where RR represents the red coloring, GG represents the green coloring, and BB represents the blue coloring.

The important takeaway is to understand that when performing addition and subtraction between hexadecimal colors, an f value is a maximum color value and a 0 is a minimum color value.

In more detail, f in hexadecimal (base16) is the same as 16 in base10, whereas 0 in hex is the same as 0 in base10.

In your addition example, a is equivalent to 10 in base10, and 10 + 1 would be 11 in base10 and b in base16:

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

For the calculation of the blue component, the result is ff, since the max color value is f (i.e., f + any value is still f).

In the subtraction example, the lowest value you can have is the absence of the color at 0, so 0 - any value, in this case a, still results in 0:

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

Hope this makes sense.

For more information, see: https://en.wikipedia.org/wiki/Web_colors#Shorthand_hexadecimal_form

Upvotes: 4

Kable
Kable

Reputation: 1035

Adding two colours together results in a new colour with each of its RGB values equal to the sum of the corresponding RGB input values. This can be made clear by converting the colours into their RGB formats:

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

Upvotes: 1

Related Questions