0

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:

enter image description here

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

enter image description here

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?

SoftTimur
  • 5,630
  • 38
  • 140
  • 292

1 Answers1

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

Community
  • 1
  • 1
ali404
  • 1,143
  • 7
  • 13
  • FYI, Excel does not assign random colours (the first argument is always in blue, the second in red, the third in purple...). One thing I notice from your result is that your colours are much more "opaque" than in the images of my OP... So I still think there is a notion of "opacity" in Excel's style... – SoftTimur Jun 12 '16 at 04:39
  • You can always style the rect with rgba (if by using rgb values you do not gain the wanted opacity for the colors). The issue here is more with how to combine two colors than how to set the opacity to html element, right? – ali404 Jun 12 '16 at 04:41
  • So in your opinion, the order of `mix-blend` (ie, one colour on top of another) is not important, right? – SoftTimur Jun 12 '16 at 04:45
  • Well, mixing yellow with green = mixing green with yellow. I don't quite understand your question though. – ali404 Jun 12 '16 at 04:50