Turn value of colorpicker field into RGB values

Support Themes & Styling
1

I would love to be able to set some colours in the theme settings and use them in my CSS. Since I’m using Tailwind, it would be best to have them in RGB format, but the colorpicker field outputs the hexcode. I would also like to be able to generate lighter and darker versions of a picked color, either in the CSS (which needs HSL format apparently) or with PHP somehow, somewhere. And since it seems to me that I’ll need PHP to convert the hexcodes anyway, that would be my choice of poison.

So ideally, whenever the theme settings area saved or changed, I fire up my theme.php, do some magic calculations, and output some colour values somewhere (I’d probably put them into my :root declarations in base.html.twig as CSS variables). However! – how do I do that? How does my theme.php know when there’s been a change? Can I maybe create a new twig filter that is used in the colorpicker field…? Hmmm I shall experiment with that, but I would love to hear your ideas!

2

The colorpicker-field’s format is set by its input. Ie., if you input #ff0000 , then changing it in the field will return a hex. However, input rgba(255, 21, 0, 1.00), and a change will return a RGBA. Note, though, that RGB input and output is not supported, for reasons unclear.

The alpha, or transparency, value serves as a pseudo-value for actual lightness or darkness - given that the colors background is as such. You could do conversion and manipulation with PHP, though I’d really opt for CSS filters instead. You won’t have the same choice of options, but it’ll require a lot less work.

It really comes down to: How much manipulability are you after?