Reproduce a colour effect

Question

When an Excel cell referencing other cells is selected, the referenced cells are systematically highlighted with different colours. I would like to imitate and reproduce this effect in JavaScript and CSS.

For instance, in the beginning the background colour of Cell A1 is gray :

Once we double click on Cell C2 , its referenced cells are highlighted:

We only learn the background colours (and ignore the border colours). A3 now is in purple ; A2 is in purple on top of red ; A1 is in purple on top of red on top of blue on top of gray .

Does anyone know how this colour effect is called (eg, overlay , hover )? Is there a notion of opacity there? Given the colour code of purple and red (and maybe an opacity number), is there an easy way in JavaScript and CSS to produce the colour of A3?

Answer 1

The only thing I can think of is by using svg and rectangles, dynamically generating them and assigning them colors based on numbers of cells selected (I suppose Excel assigns random colors?!). You can achieve the overlay effect by using mix-blend-mode (see snippet below, pay attention to the colors defined and the colors displayed).

 .multiply { background: white; } .multiply rect { mix-blend-mode: multiply; } 

 <svg class="multiply" width="400" height="500"> <rect fill="cyan" width="150" height="20" x="0" y="0" /> <rect fill="yellow" width="100" height="40" x="50" y="0" /> <rect fill="magenta" width="50" height="60" x="100" y="0" /> </svg> 

Another way you can do it (this is more Javascript oriented) is to compute the RGB value of the colors you want to combine and then by using the R, G and B values create the overlayed color, see link