Javascript 如何让用户使用十六进制和css渐变选择背景色

我想让它，以便用户可以输入一个十六进制到一个文本框和另一个十六进制到不同的文本框。然后将使用线性渐变，以便将第一种颜色渐变为第二种颜色。在代码片段中，有一个示例说明了它可能产生的结果。我更喜欢只使用css和html，但如果必要的话可以使用javascript。感谢任何试图解决这个问题的人。如果我含糊不清，我会回答任何问题

正文{
背景：线性梯度（向右，#ffb6ce，#ff00ea）；
}

文件

我创建了一个示例

const body=document.querySelector（“body”）；
const startInput=document.querySelector（“开始”）；
const endInput=document.querySelector（“#end”）；
让startHex=“#fff”；
让endHex=“#fff”；
let梯度；
函数styleBody（）{
梯度=`线性梯度（向右，${startHex}，${endHex}）`；
body.style.background=渐变；
}
startInput.addEventListener（“输入”，（）=>{
startHex=event.target.value；
styleBody（）；
});
endInput.addEventListener（“输入”，（）=>{
endHex=event.target.value；
styleBody（）；
});


const colorPicker1=document.querySelector（“#picker1”）；
const colorPicker2=document.querySelector（“#picker2”）；
var firstColor='#0F0'；
var secondColor='#F00'
document.body.addEventListener（“输入”，梯度拾取）；
函数梯度拾取（事件）{
if（event.target==colorPicker1）{
firstColor=event.target.value；
}
if（event.target==colorPicker2）{
secondColor=event.target.value；
}
document.body.style.background=`线性渐变（${firstColor}，${secondColor}）`；
document.body.style.backgroundSize=“包含”；
document.body.style.height=“100vh”；
}
您必须使用JS，让用户选择渐变并将这些渐变作为变量。我会专门为此使用，因为大多数现代浏览器现在都支持这种输入类型，而不支持这种输入类型的浏览器则会返回到文本。使用这种类型将允许用户更容易地为支持它的浏览器选择颜色，因为这些浏览器将向用户提供色轮或类似的东西来帮助他们选择，而不是要求用户手动输入十六进制值。