I used a color picker, and the default value format is hex. However, when I access the value, it provides me with the RGB format.
please help to get hex value
There should be a formattedValue property on the colorpicker that has it in hex format
Could you please explain with an example, how can I convert RGB to hex?
If you're using the color picker component then you shouldn't need to convert it yourself, it's already available:
Or if you're really wanting to convert it you can do it in a oneliner like so:
{{ colorInput1.value.replaceAll(/[^0-9,]/g,'').split(',').map(x => parseInt(x).toString(16).padStart(2, '0')).join('') }}
I am having the same issue, where I want the hex value from a color input component to store this value in respective DB column. however I tried to get use of the mentioned formattedValue util from my primaryColor input inside the query handler like so form.data.primaryColor.formattedValue but it always returns an empty value, and form.data.primaryColor returning the correct color value but in rgb format.
I also find this hex->rgb format transformation very disturbing!
this is a simplified version of my setup:
It looks like you're using a form component ( which is the correct component to be using for multiple input items ) but the form might only return value and not formattedValue - in which case you may need to either manually get the data from the components instead of using the form, or convert the values into hex using the javascript function above.
As an aside, most components and web elements and css will readily accept any standard colour format whether it's rgb, hex, hsl, rgba etc so unless there's a requirement for hex only values to be stored then it might be something you don't necessarily need to be disturbed about. Converting one to the other is just a maths puzzle, nothing "clever".
I see, but I think in this case it's confusing to return an rgb value when the original value is a hex, and also without any internal option to configure the component to return the desired value format.
Yea I wouldn't disagree with that, if the component had some option to configure the format of the returned value it would be nice.
I guess if you're being generous you could consider that it's like a numeric field - it may display as "$12,345.00" but the underlying value is 12345.0
Hi @yaser_alazm, welcome to the forum! 
I created a FR for the state to reflect the color format selected on the input.
On the meantime, we could use @dcartlidge's one liner on the query, or create a few transformers and use their output on the query:
I'll keep you posted with any updates on the feature request. 
Thanks for the collaboration, using color transformers works as a temporal solution.
However instead of creating a transformer for every color input, I find it much better to create a custom rgbToHex function inside Settings -> Preload JS, this function can accept variable of the rgb string and returns the transformed hex value. then whenever we need to get the hex value for a color we call the function from the global window object window.rgbToHex. I think this is more universal and generic way instead of creating a transformer for each color input we have inside the app.
I also updated the js snippet a bit:
rgbToHex = (str) => str?.startsWith('rgb') ? '#' + str.replaceAll(/[^0-9,]/g,'').split(',').map(x => parseInt(x).toString(16).padStart(2, '0')).join('') : str;
Amazing workaround! 