I now also found a nice solution to this problem that someone shared on discord (I don’t remember the person’s name):
If you click on a color, the css automatically selects the texts inside to copy it.
By changing the callout name to > ![COLORS-X], where x is a number between 1-4, multiple color rows can also be displayed at the same line.
It looks like this:
Raw text:
> [!COLORS-1]
<span style="background:#FF0038; color:white;"> FF0038 </span> <span style="background:#deb221; color:white;"> DEB221 </span> <span style="background:#fa90a7; color:white;"> fa90a7 </span> <span style="background:#B061FF; color:white;"> B061FF </span><span style="background:#005C59; color:white;"> 005C59 </span> <span style="background:#20b2aa; color:white;"> 20b2aa </span><span style="background:#00cc99; color:white;"> 00cc99 </span> <span style="background:#16d7d6; color:white;"> 16d7d6 </span><span style="background:#b1ebe1; color:white;"> b1ebe1 </span><span style="background:#d5f0ee; color:black;"> d5f0ee </span> <span style="background:#272B39; color:white;"> 272B39 </span>
CSS Snippet:
colored-span-hex.css (9.7 KB)