I am using Redux (RTK) with NextJs and Tailwind also. I want to set background color of a element dynamically by getting the color as input from <input type="color"/>, and the problem is that I am getting a HEX value from the input which is fine but when I give it to my <p> element as bg-color through style attribute, the HEX value gets translated to RGB automatically. And I want it to be HEX because I want to get bg opacity of my <p> element which I can’t set if the color is in RGB value.

Is there a fix?

              <p
                onContextMenu={e => handleRightClickOnTab(e)}
                className={`${parseInt(index) === parseInt(currentNote) ? "selectedMenuBtn" : ""} flex items-center justify-center cursor-pointer whitespace-nowrap !bg-opacity-5 hover:!bg-opacity-[15%] transition px-2 py-0.5 h-fit font-semibold border dark:border-slate-700 text-center rounded-lg`}
                style={{backgroundColor: notes[index].color}}
              >
                {notes[index].name}
              </p>
              <div ref={contextMenuRef} className="VarkNotes_contextMenu z-10 absolute mt-1 bg-white dark:bg-[#0d1117] rounded-md shadow-lg px-2 py-1 border border-slate-200 dark:border-slate-700 flex items-center justify-center gap-x-2 !hidden">
                <button><FaEdit className="hover:opacity-80 transition" /></button>
                <button><ImBin className="hover:opacity-80 transition text-red-500" /></button>
                {/* I also tried this but didn't work <GithubPicker color={notes[index].color} onChangeComplete={setColor}/> */}
                <input type="color" color="" className="p-0.5 h-8 w-8 block bg-white border border-gray-200 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700" id="VarkNotes_color-picker" defaultValue={notes[index].color} title="Choose your color" onChange={e => setColor(e)}></input>
              </div>

Functions

  const setColor = (e) => {
    dispatch(changeColor({currentNote: currentNote, value: e.target.value}))
  }

        changeColor: (state, action) => {
            return produce(state, draftState => {
                console.log(action.payload.value)
                draftState.md[action.payload.currentNote].color = action.payload.value
                draftState.oldMd[action.payload.currentNote].color = action.payload.value
            })
        }