背景未根据滑块正确更改
Background not changing correctly with respect to sliders
所以我正在通过 course.And 练习一个项目，其中一个项目是基于调色板的，该站点生成随机调色板，并具有用户可以更改色调、亮度、饱和度的附加功能
我在中途某处，但我的滑块无法按预期运行。
如果我改变色调，背景不会改变，因为它一直围绕着一些灰色旋转，并且所有颜色的饱和度都以某种方式停留在开始时。
我检查了色调比例是否正确。
我尝试将 console.log 检查到数组中以检查是否每个初始颜色都被正确推送，但这似乎是正确的
请帮忙
提前致谢
这是代码
//Global selection and variables
const colorDivs = document.querySelectorAll(".color");
const generateBtn = document.querySelector(".generate");
const sliders = document.querySelectorAll('input[type="range"]');
const currentHexes = document.querySelectorAll(".color h2");
let initialColors;
//Event listeners
sliders.forEach((slider) => {
slider.addEventListener("input", hslControls);
});
colorDivs.forEach((div, index) => {
div.addEventListener("change", () => {
updateTextUI(index);
});
});
//Functions
//Color generator
function generateHex() {
const hexColor = chroma.random();
return hexColor;
}
function checkTextContrast(color, text) {
const luminance = chroma(color).luminance();
if (luminance > 0.5) {
text.style.color = "black";
} else {
text.style.color = "white";
}
}
function randomColors() {
initialColors = [];
colorDivs.forEach((div, index) => {
const hexText = div.children[0];
const randomColor = generateHex();
initialColors.push(chroma(randomColor).hex());
//Add the color to the background
div.style.backgroundColor = randomColor;
hexText.innerText = randomColor;
checkTextContrast(randomColor, hexText);
//Initialize Colorize sliders
const color = chroma(randomColor);
const sliders = div.querySelectorAll(".sliders input");
const hue = sliders[0];
const brightness = sliders[1];
const saturation = sliders[2];
colorizeSliders(color, hue, brightness, saturation);
});
resetInputs();
}
randomColors();
function colorizeSliders(color, hue, brightness, saturation) {
//Scale Saturation
const noSat = color.set("hsl.s", 0);
const fullSat = color.set("hsl.s", 1);
const scaleSat = chroma.scale([noSat, color, fullSat]);
//Scale Brightness
const midBright = color.set("hsl.l", 0.5);
const scaleBright = chroma.scale(["black", midBright, "white"]);
//Update input colors
saturation.style.backgroundImage = `linear-gradient(to right,${scaleSat(
0
)}, ${scaleSat(1)})`;
brightness.style.backgroundImage = `linear-gradient(to right,${scaleBright(
0
)},${scaleBright(0.5)} ,${scaleBright(1)})`;
hue.style.backgroundImage = `linear-gradient(to right, rgb(204,75,75),rgb(204,204,75),rgb(75,204,75),rgb(75,204,204),rgb(75,75,204),rgb(204,75,204),rgb(204,75,75))`;
}
function hslControls(e) {
const index =
e.target.getAttribute("data-bright") ||
e.target.getAttribute("data-sat") ||
e.target.getAttribute("data-hue");
let sliders = e.target.parentElement.querySelectorAll('input[type="range"]');
const hue = sliders[0];
const brightness = sliders[1];
const saturation = sliders[2];
const bgColor = initialColors[index];
console.log(bgColor);
let color = chroma(bgColor)
.set("hsl.s", saturation.value)
.set("hsl.l", brightness.value)
.set("hsl.h", hue.value);
colorDivs[index].style.backgroundColor = color;
}
function updateTextUI(index) {
const activeDiv = colorDivs[index];
const color = chroma(activeDiv.style.backgroundColor);
const textHex = activeDiv.querySelector("h2");
const icons = activeDiv.querySelectorAll(".controls button");
textHex.innerText = color.hex();
//Check Contrast
checkTextContrast(color, textHex);
for (icon of icons) {
checkTextContrast(color, icon);
}
}
function resetInputs() {
const sliders = document.querySelectorAll(".sliders input");
sliders.forEach((slider) => {
if (slider.name === "hue") {
const hueColor = initialColors[slider.getAttribute("data-hue")];
const hueValue = chroma(hueColor).hsl()[0];
slider.value = Math.floor(hueValue);
}
if (slider.name === "brightness") {
const brightColor = initialColors[slider.getAttribute("data-bright")];
const brightValue = chroma(brightColor).hsl()[2];
slider.value = Math.floor(brightValue * 100) / 100;
}
if (slider.name === "saturation") {
const satColor = initialColors[slider.getAttribute("data-sat")];
const satValue = chroma(satColor).hsl()[1];
slider.value = (Math.floor(satValue) * 100) / 100;
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Mulish", sans-serif;
color: rgb(51, 51, 51);
}
button {
font-family: "Mulish", sans-serif;
}
path,
i,
svg {
pointer-events: none;
}
.colors {
min-height: 80vh;
display: flex;
max-width: 100vw;
color: rgb(212, 212, 212);
}
.color {
min-height: 80vh;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
overflow: hidden;
}
.color h2 {
font-size: 2rem;
cursor: pointer;
}
.sliders {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0%;
background: rgb(255, 255, 255);
padding: 1rem;
width: 80%;
/* opacity: 0; */
/* pointer-events: none; */
/*We are adding adjustment class*/
/* transform: translateY(100px); */
transition: all 0.5s ease-in-out;
}
.sliders.active {
opacity: 1;
transform: translateY(0px);
pointer-events: all;
}
.sliders button {
position: absolute;
top: 0;
right: 0;
padding: 0.5rem;
border-top-left-radius: 1rem;
border-bottom-right-radius: 1rem;
border: none;
background: rgb(75, 75, 75);
color: white;
cursor: pointer;
font-weight: bold;
}
.controls {
display: flex;
flex-direction: column;
}
.panel {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 20vh;
}
.panel button {
font-size: 1.2rem;
margin: 1rem;
padding: 1rem 2rem;
background-color: rgb(31, 33, 63);
border: none;
color: white;
cursor: pointer;
border-radius: 1rem;
}
.panel p {
font-size: 1.2rem;
}
.library-panel,
.generate-panel,
.save-panel {
display: flex;
flex-direction: column;
align-items: center;
}
.adjust,
.lock {
font-size: 2rem;
border: none;
background: none;
cursor: pointer;
margin: 2rem 0rem;
}
/* Slider stuff */
input[type="range"] {
-webkit-appearance: none;
margin: 1rem 0rem;
width: 100%;
position: relative;
border-radius: 1rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div class="colors">
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="0"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="0"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="0"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="1"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="1"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="1"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="2"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="2"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="2"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="3"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="3"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="3"
/>
</div>
</div>
<div class="color">
<h2></h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="4"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="4"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="4"
/>
</div>
</div>
</div>
<div class="panel">
<div class="library-panel">
<button class="library"><i class="fas fa-book-open"></i></button>
<p>Library</p>
</div>
<div class="generate-panel">
<button class="generate"><i class="fas fa-sync"> </i></button>
<p>Generate</p>
</div>
<div class="save-panel">
<button class="generate"><i class="fas fa-save"></i></button>
<p>Save</p>
</div>
</div>
<div class="copy-container">
<div class="copy-popup">
<h3>Copied to clipboard</h3>
<h4>👍</h4>
</div>
</div>
<div class="save-container">
<div class="save-popup">
<button class="close-save">X</button>
<h4>Give a name to your palette</h4>
<input type="text" max-length="35" class="save-name">
<button type="submit" class="submit-save"></button>
</div>
</div>
<div class="library-container">
<div class="library-popup">
<button class="close-library">X</button>
<h4>Pick your Palette</h4>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.1/chroma.min.js" integrity="sha512-RWI59o+PDXjPl3bakOf3k2ZbDtfvn/OU/ZKe6QmkE0V/ve7vYKEJe0RdkDueS+VkghBazP+1o4LKGON+pHUa5g==" crossorigin="anonymous"></script>
<script src="./app.js"></script>
</body>
</html>
这里的问题是获取sat值的区域，我更改了：
const satValue = chroma(satColor).hsl()[1];
slider.value = (Math.floor(satValue) * 100) / 100;
为了
const satValue = chroma(satColor).get('hsl.s');
slider.value = (satValue);
它对我有用！
所以我正在通过 course.And 练习一个项目，其中一个项目是基于调色板的，该站点生成随机调色板，并具有用户可以更改色调、亮度、饱和度的附加功能 我在中途某处，但我的滑块无法按预期运行。 如果我改变色调，背景不会改变，因为它一直围绕着一些灰色旋转，并且所有颜色的饱和度都以某种方式停留在开始时。 我检查了色调比例是否正确。 我尝试将 console.log 检查到数组中以检查是否每个初始颜色都被正确推送，但这似乎是正确的
请帮忙 提前致谢
这是代码
//Global selection and variables
const colorDivs = document.querySelectorAll(".color");
const generateBtn = document.querySelector(".generate");
const sliders = document.querySelectorAll('input[type="range"]');
const currentHexes = document.querySelectorAll(".color h2");
let initialColors;
//Event listeners
sliders.forEach((slider) => {
slider.addEventListener("input", hslControls);
});
colorDivs.forEach((div, index) => {
div.addEventListener("change", () => {
updateTextUI(index);
});
});
//Functions
//Color generator
function generateHex() {
const hexColor = chroma.random();
return hexColor;
}
function checkTextContrast(color, text) {
const luminance = chroma(color).luminance();
if (luminance > 0.5) {
text.style.color = "black";
} else {
text.style.color = "white";
}
}
function randomColors() {
initialColors = [];
colorDivs.forEach((div, index) => {
const hexText = div.children[0];
const randomColor = generateHex();
initialColors.push(chroma(randomColor).hex());
//Add the color to the background
div.style.backgroundColor = randomColor;
hexText.innerText = randomColor;
checkTextContrast(randomColor, hexText);
//Initialize Colorize sliders
const color = chroma(randomColor);
const sliders = div.querySelectorAll(".sliders input");
const hue = sliders[0];
const brightness = sliders[1];
const saturation = sliders[2];
colorizeSliders(color, hue, brightness, saturation);
});
resetInputs();
}
randomColors();
function colorizeSliders(color, hue, brightness, saturation) {
//Scale Saturation
const noSat = color.set("hsl.s", 0);
const fullSat = color.set("hsl.s", 1);
const scaleSat = chroma.scale([noSat, color, fullSat]);
//Scale Brightness
const midBright = color.set("hsl.l", 0.5);
const scaleBright = chroma.scale(["black", midBright, "white"]);
//Update input colors
saturation.style.backgroundImage = `linear-gradient(to right,${scaleSat(
0
)}, ${scaleSat(1)})`;
brightness.style.backgroundImage = `linear-gradient(to right,${scaleBright(
0
)},${scaleBright(0.5)} ,${scaleBright(1)})`;
hue.style.backgroundImage = `linear-gradient(to right, rgb(204,75,75),rgb(204,204,75),rgb(75,204,75),rgb(75,204,204),rgb(75,75,204),rgb(204,75,204),rgb(204,75,75))`;
}
function hslControls(e) {
const index =
e.target.getAttribute("data-bright") ||
e.target.getAttribute("data-sat") ||
e.target.getAttribute("data-hue");
let sliders = e.target.parentElement.querySelectorAll('input[type="range"]');
const hue = sliders[0];
const brightness = sliders[1];
const saturation = sliders[2];
const bgColor = initialColors[index];
console.log(bgColor);
let color = chroma(bgColor)
.set("hsl.s", saturation.value)
.set("hsl.l", brightness.value)
.set("hsl.h", hue.value);
colorDivs[index].style.backgroundColor = color;
}
function updateTextUI(index) {
const activeDiv = colorDivs[index];
const color = chroma(activeDiv.style.backgroundColor);
const textHex = activeDiv.querySelector("h2");
const icons = activeDiv.querySelectorAll(".controls button");
textHex.innerText = color.hex();
//Check Contrast
checkTextContrast(color, textHex);
for (icon of icons) {
checkTextContrast(color, icon);
}
}
function resetInputs() {
const sliders = document.querySelectorAll(".sliders input");
sliders.forEach((slider) => {
if (slider.name === "hue") {
const hueColor = initialColors[slider.getAttribute("data-hue")];
const hueValue = chroma(hueColor).hsl()[0];
slider.value = Math.floor(hueValue);
}
if (slider.name === "brightness") {
const brightColor = initialColors[slider.getAttribute("data-bright")];
const brightValue = chroma(brightColor).hsl()[2];
slider.value = Math.floor(brightValue * 100) / 100;
}
if (slider.name === "saturation") {
const satColor = initialColors[slider.getAttribute("data-sat")];
const satValue = chroma(satColor).hsl()[1];
slider.value = (Math.floor(satValue) * 100) / 100;
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Mulish", sans-serif;
color: rgb(51, 51, 51);
}
button {
font-family: "Mulish", sans-serif;
}
path,
i,
svg {
pointer-events: none;
}
.colors {
min-height: 80vh;
display: flex;
max-width: 100vw;
color: rgb(212, 212, 212);
}
.color {
min-height: 80vh;
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
position: relative;
overflow: hidden;
}
.color h2 {
font-size: 2rem;
cursor: pointer;
}
.sliders {
display: flex;
flex-direction: column;
position: absolute;
bottom: 0%;
background: rgb(255, 255, 255);
padding: 1rem;
width: 80%;
/* opacity: 0; */
/* pointer-events: none; */
/*We are adding adjustment class*/
/* transform: translateY(100px); */
transition: all 0.5s ease-in-out;
}
.sliders.active {
opacity: 1;
transform: translateY(0px);
pointer-events: all;
}
.sliders button {
position: absolute;
top: 0;
right: 0;
padding: 0.5rem;
border-top-left-radius: 1rem;
border-bottom-right-radius: 1rem;
border: none;
background: rgb(75, 75, 75);
color: white;
cursor: pointer;
font-weight: bold;
}
.controls {
display: flex;
flex-direction: column;
}
.panel {
display: flex;
align-items: center;
justify-content: space-evenly;
height: 20vh;
}
.panel button {
font-size: 1.2rem;
margin: 1rem;
padding: 1rem 2rem;
background-color: rgb(31, 33, 63);
border: none;
color: white;
cursor: pointer;
border-radius: 1rem;
}
.panel p {
font-size: 1.2rem;
}
.library-panel,
.generate-panel,
.save-panel {
display: flex;
flex-direction: column;
align-items: center;
}
.adjust,
.lock {
font-size: 2rem;
border: none;
background: none;
cursor: pointer;
margin: 2rem 0rem;
}
/* Slider stuff */
input[type="range"] {
-webkit-appearance: none;
margin: 1rem 0rem;
width: 100%;
position: relative;
border-radius: 1rem;
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Mulish&display=swap"
rel="stylesheet"
/>
<title>Document</title>
</head>
<body>
<div class="colors">
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="0"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="0"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="0"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="1"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="1"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="1"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="2"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="2"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="2"
/>
</div>
</div>
<div class="color">
<h2>Hex</h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="3"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="3"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="3"
/>
</div>
</div>
<div class="color">
<h2></h2>
<div class="controls">
<button class="adjust"><i class="fas fa-sliders-h"></i></button>
<button class="lock"><i class="fas fa-lock-open"></i></button>
</div>
<div class="sliders">
<button class="close-adjustment">X</button>
<span>Hue</span>
<input
type="range"
min="0"
max="360"
step="1"
name="hue"
class="hue-input"
data-hue="4"
/>
<span>Brightness</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="brightness"
class="bright-input"
data-bright="4"
/>
<span>Saturation</span>
<input
type="range"
min="0"
max="1"
step="0.01"
name="saturation"
class="sat-input"
data-sat="4"
/>
</div>
</div>
</div>
<div class="panel">
<div class="library-panel">
<button class="library"><i class="fas fa-book-open"></i></button>
<p>Library</p>
</div>
<div class="generate-panel">
<button class="generate"><i class="fas fa-sync"> </i></button>
<p>Generate</p>
</div>
<div class="save-panel">
<button class="generate"><i class="fas fa-save"></i></button>
<p>Save</p>
</div>
</div>
<div class="copy-container">
<div class="copy-popup">
<h3>Copied to clipboard</h3>
<h4>👍</h4>
</div>
</div>
<div class="save-container">
<div class="save-popup">
<button class="close-save">X</button>
<h4>Give a name to your palette</h4>
<input type="text" max-length="35" class="save-name">
<button type="submit" class="submit-save"></button>
</div>
</div>
<div class="library-container">
<div class="library-popup">
<button class="close-library">X</button>
<h4>Pick your Palette</h4>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js"
integrity="sha512-RXf+QSDCUQs5uwRKaDoXt55jygZZm2V++WUZduaU/Ui/9EGp3f/2KZVahFZBKGH0s774sd3HmrhUy+SgOFQLVQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.1.1/chroma.min.js" integrity="sha512-RWI59o+PDXjPl3bakOf3k2ZbDtfvn/OU/ZKe6QmkE0V/ve7vYKEJe0RdkDueS+VkghBazP+1o4LKGON+pHUa5g==" crossorigin="anonymous"></script>
<script src="./app.js"></script>
</body>
</html>
这里的问题是获取sat值的区域，我更改了：
const satValue = chroma(satColor).hsl()[1];
slider.value = (Math.floor(satValue) * 100) / 100;
为了
const satValue = chroma(satColor).get('hsl.s');
slider.value = (satValue);
它对我有用！