javascript - Making hex 3-digit converts it to 6-digits while using `rgb-hex` library as an input in React JS?

Question

I am using react-colorful & using it's <HexColorInput /> component as:

<HexColorInput
    className="w-12 text-blue-gray-500"
    color={rgb2hex(selectedColor.rgba)}
    onChange={(hex: string) => {
        updateBackground({
            selectedColor: {
                ...selectedColor,
                rgba: hex2rgb(hex),
            },
        })
    }}
/>

The color prop acts similar to value prop on input. And onChange handler changes as you type in an input.

The problem right now is when I make the hex input to be 3-digits, it automatically converts it to 6-digits as I'm directly using rgb2hex function on the input.

How do I fix this?

Codesandbox → https://codesandbox.io/s/react-colorful-sketch-picker-ouz5t

question from:https://stackoverflow.com/questions/65933032/making-hex-3-digit-converts-it-to-6-digits-while-using-rgb-hex-library-as-an-i

Answer 1

The common way to declare a hex color is using 6 digits. When using the 3 digits format, you are shortening the 6 digits format. This only works if the digits in the positions R (so 1,2), G (3,4) and B(5,6) are equals.

Eg: You can write #00CCFF in 3 digits format as #0CF, but you cannot do the same on #425416

Maybe this thread can make my point more clear.