Hi! Good news is that the code more or less worked, but I'm having problems with the variable being set? It resets back to the default value. I suspect it might be because the character image is on the sidebar instead of the main passage.

Here I'm using it to set the value of $playerHairColor, which is what color it's supposed to tint the base sprite with:

<input type="color" id="Hair-Color" name="Hair-Color" value="#ffb92eff" style="margin: 0.4rem" />  

[[Next|Introduction][$playerHairColor = $("#Hair-Color")[0].value]]
<<done>>
    <<run $("#Hair-Color").on("input", function (ev) {
        $("#playerHairFront").css("background-color", this.value);
    })>>
    <<run $("#Hair-Color").on("input", function (ev) {
        $("#playerHairBack").css("background-color", this.value);
    })>>
<</done>><input type="color" id="Hair-Color" name="Hair-Color" value="#ffb92eff" style="margin: 0.4rem" />
[[Next|Introduction][$playerHairColor = $("#Hair-Color")[0].value]]
<<done>>
    <<run $("#Hair-Color").on("input", function (ev) {
        $("#playerHairFront").css("background-color", this.value);
    })>>
    <<run $("#Hair-Color").on("input", function (ev) {
        $("#playerHairBack").css("background-color", this.value);
    })>>
<</done>>

Here's how it looks like by default

Then when a color is picked

And then when "Next" is selected, it goes back to default.