Method to disable RGBA

[glennpowell2]

The project I'm doing requires that we can only save colors in Hex, not RGBA. The HSV view where you can slide it around the square box and select a color is perfect for our needs, but it also shows an option for a slider to set the opacity to the right of it, which then displays RGBA inside the color picker input instead of Hex. Is there a way to disable that opacity slider so only the color picker itself is visible, or to make it so that it only displays hexadecimal?
Thanks.

[istvan-ujjmeszaros]

Hey @glennpowell2, you can use the order setting to customize which sliders to show. You can see examples on this demo page:
https://www.virtuosoft.eu/code/jquery-colorpickersliders/

I think the setting you need looks like this:

$('.demo-popup').ColorPickerSliders({
            order: {
                hsl: 1
            }
        });

[glennpowell2]

Hey @glennpowell2, you can use the order setting to customize which sliders to show. You can see examples on this demo page:
https://www.virtuosoft.eu/code/jquery-colorpickersliders/

I think the setting you need looks like this:

$('.demo-popup').ColorPickerSliders({
            order: {
                hsl: 1
            }
        });

You misunderstood me. When you use the hsl setting, the furthest setting to the right controls the opacity color. Unlike the other selections under hsl, this sets RGBA instead of HEX. From what I could tell there isn't a way to specifically turn this off or to set it to return HEX from this setting. I can only turn on and off rgb, hsl, cie for example. But that doesn't solve my issue. I ended up writing a custom function to convert RGBA to HEX. Because for my purposes I don't need the color to actually be translucent, I just need to match the color selected.

[istvan-ujjmeszaros]

Ah, okay, you are right. I can't remember if there is a setting for it (I think there must be I just can't remember and don't have time to look into that right now) but you can hide that with css:

.cp-hsvpanel-a.cp-transparency {
    display: none !important;
}

You can also tweak the size of the panel to look good when the opacity slider is not visible, something like that should work:

.popover-content .cp-container.hsvpanel-active {
    width: 170px !important;
}