3

I want to fill and outline polygons by using a field that contains HEX codes as a string, e.g. #99d594, as well as set the fill opacity to 25%.

I'm able to set the colours with the right field through the Data defined override option (Data defined override button > Field type: string > select field):

data defined override

Having the fill and outline colours set, I want to set a 25% opacity to the fill. But it displays at 100% opacity even when the opacity is set at 25%.

Below the opacity setting doesn't reflect on the map when I set the fill colour with a string field:

before and after colour defined by string field

How do I ensure that the opacity reflects when I define a fill colour with a string field?

RESULT AFTER I TESTED THE ANSWER FROM J. Monticolo:

result

🎉🙌

Improve this question
2
  • Have you considered handing rgba values, which include transparency?
    – Erik
    Jul 1 at 12:52
  • @Erik, our client works with HEX codes, but I will look into the possibility of rgba values - thanks for mentioning it!
    – CJL
    Jul 1 at 13:06

2 Answers 2

Reset to default
3

If you don't want to add transparency to the HEX-code and have the value static or in a field, you can use this expression :

with_variable('fill_color', '#99d594',  -- replace with color field
with_variable('transparency', 25,  -- percent
color_rgba(
    color_part(@fill_color, 'red'),
    color_part(@fill_color, 'green'),
    color_part(@fill_color, 'blue'),
    @transparency / 100 * 255
)))
Improve this answer
1
  • this works perfectly, thank you!! Going to try to add an image of my result somewhere below here...
    – CJL
    Jul 1 at 13:51
2

Ah, the more you research:

You can add transparency to HEX-codes by adding two leading characters as per this list: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

E.g., a leading 80 will give you a transparency of 50%, so '#80000099' results in a transparent dark blue.

enter image description here

So the code for your example would be '#BF99d594'.

Improve this answer
1
  • I also came across a post that mentioned adding two leading characters, but was hoping not to fiddle too much with the client's data. But the link that you've shared is very useful though, thanks!!
    – CJL
    Jul 1 at 13:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.