Advertisement

TrimwebsolutionsTrimwebsolutions

Problem and Solutions

How to handle react-color input should not allow more than 6 digits for hex values ?

By M.K. Verma · 2 May 2022

How to handle react-color input should not allow more than 6 digits for hex values ?

What you need is an alpha channel to edit color opacity.

The react-color's documentation said that

"color accepts either a string of a hex color '#333' or a object of rgb or hsl values [...] Both rgb and hsl will also take a a: 1 value for alpha"

So instead of this:

color = {
    hex: '#f3f3f3',
}

You need to use an object like this:

color = {
    rgb: {
        r: 243,
        g: 243,
        b: 243,
        a: 1, //the opacity value is here
    },
}

Pay attention to convert red-blue-green hexadecimal values to decimal, on the example above the f3 become 243.