I have N polygons (let N = 3 for making it simple) to display onto a base map in an OpenLayers application (but this can also naturally be applied to other GIS softwares as well).

For the moment, I manually picked the color for each polygon that suits my eyes, adding an alpha value to the fill so that I can keep the details of the underlying base map as much as I can (but this obviously is a trade-off between knowing which polygon overlays the map and what are the terrain details under).

Here is the code that generates the colors:

let alpha = 0.9;
const colors = [
    [136, 0, 255, alpha],
    [255, 243, 138, alpha],
    [143, 251, 255, alpha],
    [255, 161, 179, alpha],

let borderColors = [];
let fillColors = [];

for (let row of colors) {
    let rowstr = JSON.stringify(row);
    // weired and probably useless way of converting each row of the colors array:
    borderColors.push(rowstr.replace(/\[/g, 'rgba(')));
    fillColors.push(rowstr.replace(/\[/g, 'rgba(').replace(/0.9]/g, '0.2)'));

Which I then use in the style definition of a vector layer, in a loop over my N polygons:

style: new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: borderColors[i],
        width: 2
    fill: new ol.style.Fill({
        color: fillColors[i],

Results are as follow on an orthophoto (which is more critical than a map because of its main 'greenish hues'):

Results on an orthophoto

On the left, the original colors of the base layer. Then, going toward the right, a cyan polygon, which then has a yellow one on top, and finally a pink-red one over the two previous ones.

Therefore, each time one or more polygons overlay an original pixel p, this pixel is getting moved in the colors space by some amount. I would like to be able to distribute, on average for a standard orthophoto (I have the feeling that it wouldn't be useful to do some calculations, which would also be very time consuming...), every possible shift in the color space so that all combinations of overlap between polygons

  1. are as discernible as possible from each other,
  2. keep the underlying imagery contrast, and
  3. pleasing to the eyes.

I have seen Generating random muted/pastel colours using QGIS which was asked recently, and is great and inspiring, but in my case, the main difference is that the N polygons have (2^N)-1 different overlapping possibilities (i.e. 7 my case with 3 polygons). So I need to pick 3 colors which 7 combinations can be mathematically described to render a nice cumulative stack (using the alpha channel) of colors on the screen.

Maybe part of the solution could come from the classic overlay modes offered by any imaging software, like in Gimp where you can choose a blending mode:

Overlay modes in Gimp

In this situation I wonder if that would be possible in OpenLayers / JS in general?

Which blending mode is used by default on OL, and which mode would give better results?

Another idea would be to create a number of individual layers for each of the different overlapping possibilities (7 in this case), and fall back on the related question. But I would like to avoid this because each polygon has intrinsic attributes that I must keep attached to it.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.