Deniz R. - 1 year ago 77
HTML Question

# SASS/SCSS - Hex Colors Mathematical Calculations

This question is for learning purposes only. I understand the logic behind math operations in SASS when calculating hex colors, i.e.:

``````<div>Style me</div>

div {
color: #010203 + #010203;
}
``````

I know it will be calculated in this way:

``````01 + 01 = 02
02 + 02 = 04
03 + 03 = 06
``````

which will compile to:
`color #020406;`
.

More precisely:

``````div {
color: #020406;
}
``````

How are hex colors calculated when you have letters in them? For example:

``````div {
color: #a1b1c1 + a2b2c2;
}
``````

Are they calculated like this:

``````a1 + a2 = a3
b1 + b2 = b3
c1 + c2 = c3
``````

which would compile to
`color: #a3b3c3;`
?

If so, how would then

``````div {
color: #a1a2a3 + #b1b2b3;
}
``````

calculate?

Would
`a1 + b1`
result
`c2`
?

If it would, what would happen with:

• multiplication
`*`

• division
`/`

• modulo
`%`

I know this is a very long question and I apologize for that.

Thank you.

In the example of `#010203 + #010203` you should first split the string to retrieve RGB channels, so than you can do RED+RED

``````var R1   = parseInt("01", 16);      // 1
var R2   = parseInt("01", 16);      // 1
var R1R2 = Math.min(R1 + R2, 255);  // 2

console.log( R1R2.toString(16) );   // "2"  ``````

add a leading zero and here you go with `02`, repeat for all other channels and you got your `#020406`

Let's see another example with letters:

``````var R1   = parseInt("9f", 16);      // 195
var R2   = parseInt("ae", 16);      // 174
var R1R2 = Math.min(R1 + R2, 255);  // 255  <<< !!!!!

console.log( R1R2.toString(16) );   // "ff" ``````

so since R1 + R2 are exceeding 255 max value for RED channel, 255 will be used,
convert it back to HEX and you have `ff`.

To conclude:

`#ff0000 + #00ffff = #ffffff` which makes quite sense but let's see further:
`#eeeeee + #eeeeee = #ffffff` which could make you conclude every HEX+HEX (R,G or B) channel that sums over 255 stays at 255. (pseudo-code:) `Min( R1_16 + R2_16, 255)`

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download