[Ark][React] How to use ColorPicker with both RGBA and HSL values in React?

[Infektid782]

According to documentation, it should be possible, to achieve the following feature:

In our experience, if we provide RGBA value, we can only use the ChannelInputs without ColorPickerArea and ColorPickerChannelSliderTrack and if we provide HSL value, then it is the other way around. Providing both values, the component will only use the one we provide first. Examples for values:

1. 'rgba(10.5, 10, 10, 1)' - Only ChannelInputs with channel red, green, blue and alpha are working.
2. 'hsl(10, 10.5%, 10%)' - Only ColorPickerArea and ColorPickerChannelSliderTrack are working.
3. 'hsl(10, 10.5%, 10%), rgba(10.5, 10, 10, 1)' - Only ColorPickerArea and ColorPickerChannelSliderTrack are working. Errors:

• Unknown color channel: red
• Unknown color channel: green
• Unknown color channel: blue

5. 'rgba(10.5, 10, 10, 1), hsl(10, 10.5%, 10%)' - Only ChannelInputs with channel red, green, blue and alpha are working. Errors:

• Unknown color channel: hue
• Unknown color channel: saturation
• Unknown color channel: lightness

We've noticed, that the conversion from and to HEX colors works with both RGBA and HSL values, but the details.value never contains it.

[cschroeter]

@Infektid782 thanks for taking your time to create the issue.

Depending on your current color format, you will have diffent channels available 0a5af02

<ColorPicker.View format="rgba">
  <ColorPicker.ChannelInput channel="hex" />
  <ColorPicker.ChannelInput channel="alpha" />
</ColorPicker.View>

or in HSL

 <ColorPicker.View format="hsl">
   <ColorPicker.ChannelInput channel="hue" />
  <ColorPicker.ChannelInput channel="saturation" />
  <ColorPicker.ChannelInput channel="lightness" />
</ColorPicker.View>

It is somewhat similar to the DatePicker api where you can drafte different views for different modes:

<DatePicker.View view="day">{/* All the things in Day View */}</DatePicker.View/>

[Infektid782]

Thank you for your answer!
I will be closing this discussion. For further conversation, please proceed to the issue I have created. If anyone is interested in the results in the future, kindly refer to the issue using the following link: #1649.