How to match a string to a color?

[wpq]

I have tags (via q-badge) that I would like to automatically color, ideally in a predictable way.

Right now I have a fixed color for all the tags and their number will change dynamically. I have a vague idea about how to manage this non-predictably (somehow get the list of colors, shuffle it and while I am building my list of tags, pop a color and attach it to the definition).

I would love to have a way to give a HEX value to a tag (I found a way to do “string → hash → set of 3 hex values”), but it seems that this is not possible?

[Ilia]

@wpq Generally,
Every HEX colour can be converted to decimal meaning that you can map your number range to the colours range, that would be the best way to go.

hex #000000 - #ffffff
decimal 0 - 16777216

Of course, you can convert hex to decimal and vice-versa

That’s what I would play with if you are talking about the dynamic numbers.

Another idea would be to utilize numbers Quasar has (like grey-1 to grey-14, orange-1 to orange-14, etc.)

[metalsadman]

@wpq checkout color utils, you can make your own color brands programmatically https://quasar.dev/quasar-utils/color-utils#Introduction.

[wpq]

@ilia said in How to match a string to a color?:

That’s what I would play with if you are talking about the dynamic numbers.

Thanks - but is there a way to use these numbers? (this is exactly what I was intending to do, just did not find where to actually plus the hex - all I found are the pre-configured colors)

[wpq]

@metalsadman said in How to match a string to a color?:

you can make your own color brands programmatically

Yes, but in that case, I would need to programmatically ass CSS styles (because my colors are generated from the names of the tags)

[Ilia]

@wpq You have a range between 0 and 16777216, map these to your numbers (like multiply by some constant number or use any other formula you would like) and then convert the computed number to hex code. Then, just add style=“background-color: #computed-hex” on that tag.

** you can map hex directly, but would require some extra coding.