Enable rgba Colors

[SeanBlakeley]

It'd be great if the color picker could output a rgba color and offer users an opacity option.

Cheers,

Sean.

[mattwiebe]

The underlying color library already speaks rgba fluently, it's just that the UI doesn't have an opacity slider.

[Traik]

Agree, that would be an awesome improvement to have rgba() :) It's good to hear that it's almost there. Thank you for making this great colorpicker!

[MrVibe]

+1

[corradomatt]

I would love to see this featured added to Iris. Possibly even an option to allow for a transparent value as well as noted here - http://core.trac.wordpress.org/ticket/21059#comment:7

[TeaMike]

Trying to add opacity to my theme i'd like to add my vote. Unfortunately i am not a programmer but i found some input which might be helpful:

• convert hex to rgb
• convert hex color to rgb using php
• background manager contains a slide controller for the WP Theme Customizer

[RiccardoB]

+1

[eliorivero]

I totally agree with this. A secondary slider for transparency like Minicolors does would be good.

http://labs.abeautifulsite.net/jquery-minicolors/#opacity (first color picker on the left)

The change callback would have to be updated as well, providing the alpha value.

[bitcommit]

Hello,

This issue was opened a year ago, are there any news about implementing an opacity slider?

Thanks!

[RiccardoB]

As far as I know, there are no news about it.

[mattwiebe]

The news is simple: neither the WordPress project nor I have needed this, so there are no plans for me/us to do this at present.

Of course, this is open source: anyone could implement it and submit a PR. I would be open to working with them to get it to a merge-able state.

[stevenmunro]

I have created a short tutorial on how to implement alpha/opacity support. Please check it out

http://pluto.kiwi.nz/2014/07/how-to-add-a-color-control-with-alphaopacity-to-the-wordpress-theme-customizer/

[jjeaton]

@mattwiebe what are the chances of merging this PR submitted back in June? #40

[mattwiebe]

I looked into merging the PR but:

1. It's out of sync and too much work was required to fix that
2. It's not implemented in a manner I'm happy with.

[jjeaton]

@mattwiebe understood on the first point. We use the color picker extensively in our plugin, and are looking at implementing an alpha slider as well. I'd love to be able to submit our changes back to Iris itself, could you expand a bit on why the other PR isn't implemented how you'd want it? Just so I can avoid doing the same things. Thanks!

[cluke009]

@mattwiebe I am interested in point 2 as well. I would be willing to work on this as I also have an in house plugin that depends on color picker and would rather not hack my own in just for alpha support.

[mattwiebe]

could you expand a bit on why the other PR isn't implemented how you'd want it?

Sure, from my closing comment in #40:

The slider would need to be a 2nd vertical slider, to the right of the existing one, not a horizontal one beneath the picker.

[cluke009]

Added in the vertical slider to master cluke009@48afa02. It needs CSS and some code to compensate for the width calculation but it might be enough to get someone else started.

Probably won't be able to look at this again til after the holiday.

[Codestar]

Hi,

I am following this topic since 2013, hmm i think we will use own modifications for this feature. i just created a GPL Plugin for this. you can use it for your projects ;)

Repo: https://github.com/Codestar/codestar-wp-color-picker

[kallookoo]

Hi,
As needed using rgba one of my plugins I created an extension with other visual customizations of the iris plugin to activate the rgba in wpColorPicker without calling other plugins like @stevenmunro or @Codestar, you only need to add on the label input a class and a data, and obviously call my script to activate, use css3 and I've only tested in firefox.
It currently only works when the element is an input, it may be that change it in the future.
This repo is: https://github.com/kallookoo/wp-color-picker-alpha

Edited:
older nick: 23r9i0

[Codestar]

@23r9i0 nice alternative, i liked ;) and i hope Iris/Owner will make an update for this alpha request :)

[dgwyer]

It would be very useful to have optional transparency added to the current color picker, so you could add certain color pickers with transparency when needed. The 'default' color picker control could then be used for all other colors.

My use case is that I need background colors to support transparency so they can either be set to a specific color, or transparent (to show through colors underneath).

e.g. The built-in background color picker changes the background color of the body tag. If I wanted to add a color picker, say, for the footer background then I can use the standard color picker BUT I have no way to set the opacity to zero if I wanted to remove the footer background color and show through the body background color.

[marcwiest]

plus 1 for transparency control

[BraadMartin]

+1 for this feature.

@mattwiebe Can you tell us why you prefer the opacity slider to be vertical and next to the color slider? Both Chrome and Firefox devtools have the opacity slider below like some of the examples in this thread, and in the Customizer there isn't quite enough horizontal space for a second vertical slider to fit unless the overall size of Iris were to get narrower (on desktop view the customizer controls area is only 300px wide including the scroll bar, and stock Iris is already 257px wide).

I recently tried to add the opacity slider as a vertical slider so that I could send a PR to you, but I couldn't get it to fit in the Customzer in a way that felt right, so for my purposes ended up with this:

Personally I like having the opacity slider more separated from the color slider because it makes it more clear to the user that the two sliders do different things, and it matches the Chrome and Firefox devtools.

Would you be open to considering this approach or are you set on having the second vertical slider?

[corradomatt]

@BraadMartin - that looks awesome. I agree with having the 2 sliders on different axis'...makes for a better user experience.

[stevenmunro]

@BraadMartin Glad you like the way I've done it too. Visually, your slider looks identical to mine. However I know with my version, the code can be improved. (see above for link)

[SilverSting]

+1

[rohmann]

Hey @mattwiebe, it's been a while since we've heard from you, so just wondering if you had any thoughts here.

Many would agree this is greatly needed, but I'd imagine reading comments like "It's not implemented in a manner I'm happy with." is a huge turn off to anyone else considering making a pull request.

Just wanted to see if this is on the radar, or will be soon. Thanks!

[mattwiebe]

Apologies for the neglect, Iris just isn't a priority for me at the moment. I would like to see this land at some point.

[rohmann]

Sure thing. Totally understand. Really appreciate you letting us know, and really glad to hear the feature it's still something being considered.

Aside from what you've said so far about the alpha slider being next to the other slider, any other considerations to keep in mind for a PR?

[BraadMartin]

For anyone interested in using an Alpha Color Picker control in the Customizer, I've spent some time making improvements to some of the solutions mentioned in this thread and now have a drop-in control class that's super easy to use. Here it is in action:

All of the code for the control is available on Github.

I've added some nice things like support for passing a palette as an array of color values when registering the control, animated transitions on the opacity slider in all situations (even when clicking a palette color or the default color button), clickable zones on either side of the slider to make it easier to reach alpha values of 0 or 100, and more. I also formatted everything to match the WP coding standards and added inline documentation to help others understand and modify things as they wish.

I'm sure it's not perfect, but it's been working great for me. Feel free to fork it and use it in your plugins and themes, and let me know if you find any issues or opportunities for improvements. More information can be found in this blog post.

[NotAmaan]

@BraadMartin Does this output the opacity value as 0? For example, can is it able to set rgba(255,255,255,0) as a value? The current rgba picker I'm using doesn't support it.

EDIT: Just tried it and it works. Awesome!

[weavertheme]

@BraadMartin -
Your class looks great, but unfortunately it will not pass muster with the WP Theme Review team because it has no license specified. Just a line "feel free to use this" does not qualify as a GPL compatible license.

If no one has used your control in a theme yet, it is because it is not GPL compatible. Just add a license line to the source code or readme, please.

[BraadMartin]

@weavertheme My bad, I figured that because my Alpha Color Picker is dependent on Iris (which is GPL) it would automatically be considered GPL, but I've just added the explicit GPL references in the PHP file and in the readme for both my Alpha Color Picker and Multi Color Picker, so both are now 100% GPL.

[karimhossenbux]

Is it worth it to work on that feature? I could try to do a PR but I would hate losing time for nothing if at the end it's not merged :(

This feature even if it's not a top priority, could help a lot of people and push a little more some design.

Cheers!

[pingram3541]

Anyone like the idea of making the color value field horizontally large enough to see a complete rgba value without having to key over? I have no issues with letting the default button wrap to the next line or even putting it somewhere else sensibly.

[tradesouthwest]

Let's move on this. There is so much [touted] value that WP gives to the Customizer and I as well as many top level programmers do not like using Customizer on any production website. So if you are going to value the Customizer then make it usable and UX friendly. Opacity to a background would mean that I can now use a body (tag) background-image and then a main content background-color opacity attribute that can make my body background image viewable from behind the content div.

If WP does not do this then it is up to the users to hack up the CSS. WP has too many CSS "utensils" all over the admin. (CSS editing in the Customizer, CSS in the editors, CSS in the themes....) We don't need more choices for non-programmers. Just more utensils that work, for non-programmers.

[graemedgibson]

I just implemented BraadMartin's solution posted on Jun 13, 2015 above.

Fan-friggen-tastic! Thanks a bunch!

[rgblab]

@mattwiebe - six years and counting...

[notrealdev]

six years and counting...
lol
👎

[w33zy]

I wonder how quick this issue had been closed if Gutenberg needed a color picker with transparency support

[codergigachad]

Hi,
As needed using rgba one of my plugins I created an extension with other visual customizations of the iris plugin to activate the rgba in wpColorPicker without calling other plugins like @stevenmunro or @Codestar, you only need to add on the label input a class and a data, and obviously call my script to activate, use css3 and I've only tested in firefox.
It currently only works when the element is an input, it may be that change it in the future.
This repo is: https://github.com/kallookoo/wp-color-picker-alpha

Edited:
older nick: 23r9i0

Thanks a lot man you are great. I was looking for this for 2 straight days. And this worked for me