Setting the vector function Fill opacity if you have a hex color

Question

I am trying to set the opacity of filling a vector function in OL3 and cannot figure out how to do this if I have a hexadecimal value ... I saw examples with rgba. Any suggestions?

Here is what I have:

style : function(feature, resolution) { return [new ol.style.Style( { stroke : new ol.style.Stroke( { color : feature.get('color'), width : 2 }), fill : new ol.style.Fill( { color : feature.get('color'), //'#FF0000' opacity : 0.2 // I thought this would work, but it not an option }) })] } 

Answer 1

You can use ol.color.asArray function. This function converts colored strings to colored arrays.

So here is what you can use:

 var hexColor = feature.get('color'); var color = ol.color.asArray(hexColor); color = color.slice(); color[3] = 0.2; // change the alpha of the color 

slice() used to create a new array of colors. This is done so as not to damage the "color lines for color arrays" cache, supported by ol.color.asArray .

See http://openlayers.org/en/master/apidoc/ol.color.html?unstable=true#asArray .

Answer 2

It's late, but can help someone. Using rgba is also possible.

 fill: new ol.style.Fill({color: 'rgba(255, 255, 0, 0.63)'}),