Preserve-color displays incorrect icon colours

[Joolyan]

Ref: PopClip v2024.5.2

The following is a modified version of the official ‘Icon Preview’ snippet to enable icon selection, as the original version dimmed icon colours (as the icon was not selectable).

// #popclip
// name: Icon Preview
// entitlements: [dynamic]
// language: javascript
// module: true
exports.actions = () => {
  return [
    {
      icon: popclip.input.text,
      code: function() {
        popclip.showText("Hello World!");
      }
    },
  ];
};

If you test this snippet with the following, you’ll see that the icon/swatch is not rendered as pure red #ff0000. Possibly due to UI transparency?

preserve-color svg:<svg width="1em" height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="24" height="24" rx="3" ry="3" fill="#ff0000"></rect></svg>

If PopClip could render icons in their specified colours (possibly with a custom preference to remove UI transparency), I’m hoping it might be possible to create a snippet which displays an icon/swatch for the selected colour.

[nick]

It looks like some of the code got lost in the formatting but I think I get the idea.
I’ll have a look into the icon rendering code and see what effects are applied.

Edit: I have fixed the formatting (please use the ‘code’ formatting style when posting code examples)

[Joolyan]

Thank you for fixing the formatting. Sorry.

My approach for the PopClip snippet is to read RGB and Hex colour values, clean and convert them to Hex to update the SVG icon. If the icon/swatch is clicked, copy the Hex value to the clipboard.

This offers an easy way to visualise text colour values and convert various RGB formats to Hex for simpler pasting.