Weird behaviour with colours and icons + labels - {color} tag not working

I think I have found a bug with the icon + label component and colors.

I am trying to set the color of an icon’s text differently from the color of an icon:


When I enter this color (taken from the color picker in Balsamiq) and confirm the text, it does not work. When I inspect the text again it has changed to:




I can provide a video that shows exactly what is going on if required. OR the Balsamiq file.

Strangely, it is not a problem for ALL colours. E.g. I could have set the color to be 990000 and that would have worked.

This was seen in 4.5.5.

Thanks @paulshoughton

Let me dig in to this today and I’ll be back in touch if we need any more info.

Hi @paulshoughton

Sorry it took me a little while to get back to you. I think this may just be a simple syntax issue. The correct syntax for the {color} tag is: {color:#2B78E4}this notation{color}

It looks like you’re missing the # mark before the hex value.

I tested this in Balsamiq Wireframes for Desktop 4.5.5 on macOS and it’s working as expected. Can you double check and let us know if that’s it?

Hi @alasdair,

That fixes it. Thank you! :smile:

However, you don’t always need the “#” in the color tag and think this is why I have been dropping the “#”.

Take this example:

Screenshot 2022-08-25 at 07.22.53

In order, the syntax for these is:

  1. {color:#2B78E4}Icon Name{color}
  2. {color:2B78E4}Icon Name{color}
  3. {color:#990000}Icon Name{color}
  4. {color:990000}Icon Name{color}
  5. {color:#999999}Icon Name{color}
  6. {color:999999}Icon Name{color}

Number 2 is the only definition that doesn’t work.

Also, when colors are shown in the colour picker, Balsamiq isn’t showing the “#”:

If it showed the “#” there it would be a good reminder.

Thank you for your help. :slight_smile:

1 Like