Color alpha support

[coderofsalvation]

Is this somehow supported?
If not: how about just adding it by just using a rgb colorpocker, and entering the 'AA' value manually in the textbox (thats how dat.gui solved it).

[georgealways]

No, at the moment alpha values are going to get chopped off the end of a hex string. It would be nice if the GUI "ignored" the last two characters and passed them along like you describe, I'll consider adding that.

Adding a separate alpha slider for an Object or Array based color is pretty straightforward, but it's admittedly annoying for an #rrggbbaa string:

let color;

const obj = { rgb: '#aabbcc', alpha: 1 };

gui.addColor( obj, 'rgb' ).onChange( update );
gui.add( obj, 'alpha', 0, 1 ).onChange( update );

update();

function update() { 
  color = obj.rgb + Math.round( obj.alpha * 0xff ).toString( 16 ).padStart( 2, 0 ); 
};

Hope that gets you by for now. I'd be curious to hear more about your use case too.

[awelles]

Here's a snippet to preserve #rrggbbaa format on an object using an intermediate object:

const params = { color: '#ff0000aa' };  // object you ultimately want to play with

const obj = { color: params.color.slice( 0, -2 ) };  // intermediate object

gui.addColor( obj, 'color' )
    .onChange( value => {
        params.color = value + params.color.slice( -2 );
    } );

Note: A downside here is that the controller is attached to obj and so won't detect changes to params.color with .listen().

[amatyulkov]

I'd be excited to see rgba() or #rrggbbaa support in this project. I'm using lil-gui to provide demos of a web component that I'm building. The component uses a gradient to render loading indicators, and the default config I have for the gradient has semi-transparent colors written as rgba(128,128,128,0.2).

I can get away with just using the same colors without the alpha channel, but if I wanted to, for example, put one semi-transparent element over another for added visual effect, I wouldn't be able to do it comfortably with lil-gui. I would still be able to control opacity through additional controllers, but that's a lot more code than I'd like to write for a demo.

The demo is here: https://amatyulkov.github.io/legendary-skeleton/examples/01-basic.html.

[georgealways]

hey @amatyulkov thanks for chiming in (and for using an existing issue 😉)

So the main reason we don't have alpha support is because color controllers use the native input[type=color] element. The built in color picker spares us from a lot of complexity (color space conversions, mobile support) ... but it doesn't support alpha.

I'd be curious to see a pass at an "advanced" color controller (written from scratch in lil-gui's visual style) that does everything the native color picker does + alpha. It would probably make the library a fair deal bigger, so maybe that could live as some kind of an "extension".

Gonna make this the general color alpha thread for anyone else who has this same request, or thoughts on how to implement.

[amatyulkov]

I've done some more lurking. Dat.gui's color controller is 300 LOC without the alpha support. I think 300 LOC would make lil-gui not-so-lil, and ColorWithAlpha is better as a controller extension.

What's your take on this?

[georgealways]

Agreed—longer reply in #12. And keep in mind that 300 lines doesn't include any of the color math or CSS 😉

[nuthinking]

+1 on adding Alpha support

[IkarosKappler]

Hello, I recently replaced dat.gui by lil-gui in my projects and hadn't noticed there is currently no alpha support.

This is my extension, adding an alpha range slider after the color input if desired:
https://gist.github.com/IkarosKappler/b3c1673fc174d2706da13b6b68adfb16

Here's a demo:
https://www.int2byte.de/public/plotboilerplate/tests/test_lilgui_addcolorwithalpha.html

Maybe it's helpful.

[mistic100]

Hello

I made a version using jscolor library (the lib is not ESM and adds itself to the global context, but it the only one with a working UI I found)

https://gist.github.com/mistic100/2ccdc808962d67adc8d81a15323e817c

addColorPicker(gui, obj, 'color');