Backstory: I made a website where you add routines in a timetable style. You select the time amount etc but also the colour of the routine block in the timetable. I've looked online on ways to gather RGB values but I was only able to find it after it was assigned to the div with window.getComputedStyle.

I want to get the hue because I want to automatically add the saturation and luminance amount to other elements of the routine div. I don't mind getting the RGB values if it's easier in a way because I'd like to make myself think about the conversion, I saw online that it is possible to convert from RGB to HSL.

So the input type text basically takes anything like "red" "green" and assigns it to the routine div, then getComputedStyle gives me the RGB value of it. But there's one thing that I don't like about getComputedStyle. It only works after the routine is added. So, I have to add the line getComputedStyle, after the routine div is being added. I want it to find the value from the input not, the background-color style like in these lines:

const bgCol = window.getComputedStyle(routine_element, null).getPropertyValue("background-color");
console.log("Print " + bgCol)

Because from what I believe, getPropertyValue just takes the value like "red" from the background-color, and then getComputedStyle turns it into RGB values. But I tried a few combinations to use just the input type text and wasn't able to get anything back.

I have a list_element.insertBefore(routine_element, routine_f_close); right before the getComputedStyle line, and it turns out the RGB values, but if I do it before, it won't work obviously, and the input variations didn't work either. Let me know if I should provide more info?