Is there a way to set a css rule according to a javascript variable?

Question

for context since I'm doing this in a pretty specific scenario: I am making a style editor for open.spotify.com (unfinished but working here), and I want to make a text color changer using the jscolor colorpicker (irrelevent to this question I can implement it just fine), but nothing I've tried to change the color has worked. When I change the color using the stylebot extension in css, it works perfectly fine.

I know that I can't just put something like

element {
color: jsVariable;
}

but is there a way to dynamically create a css rule using javascript? I have a function already made called addGlobalStyle that I can use like this: addGlobalStyle("element{color: red;}"), can I create a rule like this with javascript and append it? I have already tried using setAttribute, and tried getting help here, but nothing tried there works.

Things I've tried (mostly pasted from my previous question linked above): h1 and #ffff00 are used as examples, the elements with text I would like to change are h1-3, div, span, and a

let hexValue = "#ffff00" 
document.getElementsByTagName("h1").style.color = hexValue;

let h1 = document.getElementsByTagName("h1")
h1.style.color = "#ffff00"

and here is the original code I was trying at the beginning which takes hex code from a user input

let tc1 = document.getElementsByTagName("h1");
let btn = document.createElement("button")
btn.textContent = 'update'
btn.addEventListener('click', changeTextColor)
let jsc = document.createElement("input");
jsc.setAttribute('id', 'hexInput');
jsc.setAttribute("data-jscolor", "{}")

function changeTextColor() {
jsc.addEventListener('change', function() {
let hexValue = this.value; //in this line, i have also tried document.getElementById('hexInput').value
tc1.style.color = hexValue;


}
document.body.insertAdjacentElement('beforebegin', jsc)
document.body.insertAdjacentElement('beforebegin', btn)
jscolor.install()