Color picker with RGB values?

Questions
#1

Is it possible to use the color picker with RGB values?

The specifications formats:rgb and showAlpha:true are not listed in the docs, but are recognized by the color picker in the backend.

However, the output string remains a hex value.

#2

Hi @Amin

Thanks for your question. The built-in color picker is limited to hex values since only hex values are supported by other areas of the system. For example, checking if a string starts with a # is used to determine that the value is a color, and where only solid colors are supported, such as manipulation via the LESS compiler.

You should be able to write a plugin that implements a colorpicker with more flexible options. The jscolor library looks nice: https://jscolor.com/

Here is a link to the documentation for creating your own form widget:

#3

Hi @daft

Thank you for your quick response. I just thought I’d ask before I build a FormWidget.
I think I’ll give https://iro.js.org/ a try.

#4

@Admin

Just a heads up, we added support for 8-digit hex codes in v3.3. It is functionally equivalent to rgba() in CSS. This is what is new in the docs for the colorpicker field for v3.3.

Use the showAlpha property to include opacity in the color selection and this produces an 8-digit hex value.

color:
    label: Background
    type: colorpicker
    showAlpha: true

Use the showInput property to display a text input next to the color. This mode will disable the available colors and make choosing and entering a custom hex color the primary focus.

color:
    label: Primary Color
    type: colorpicker
    showInput: true
1 Like