如何更改HSL颜色?

Question

这就是我想做的例子。可以从左到右使用#00809C和#142E76两种颜色吗，我该怎么做?https://codepen.io/rodzyk/pen/mdxvQby

const gradateLineTemplate = (deg: number, hue: number) =>
`<line data-deg="${deg}" class="active" style="--deg: ${deg}deg; --h: ${hue}" x1="300" y1="30" x2="300" y2="70" />`;

这是js代码，我找到了改变颜色的方法，但它不能使用指定颜色，只是调整程度来改变颜色。

Answer 1

这是一种方法，将您的颜色转换为HSL并分别插入所有三个值。https://codepen.io/BoppreH/pen/yLxdvrP

更改SCSS以接受每行的所有三个H、S和L值，而不仅仅是H和S:

.gradate {
line {
--deg: 0deg;
--h: 135;
--s: 10%;
--a: 0.2;
--l: 55%;
stroke-linecap: round;
stroke-width: 10px;
stroke: hsla(var(--h), var(--s), var(--l), var(--a));

将您的两种颜色转换为HSL(在这里手动完成，但您可以自动完成):

// H between 0-360, and S and L between 0 and 100.
const START_HSL = [191, 100, 31]; // #00809c
const END_HSL = [224, 71, 27]; // #142e76

将mapBetween和getRangePercent移到顶部，因为我们将需要它们进行插值。

更改行创建方式

const gradateLineTemplate = (deg: number, h: number, s: number, l: number) =>
`<line data-deg="${deg}" class="active" style="--deg: ${deg}deg; --h: ${h}deg; --s: ${s}%; --l: ${l}%;" x1="300" y1="30" x2="300" y2="70" />`;
let gradateLines = ``;
const Q = DEG_RANGE / STEP;
for (let i = DEG_RANGE * -1; i <= DEG_RANGE; i += Q) {
const p = (100 * (i + DEG_RANGE)) / (2 * DEG_RANGE);
const h = getRangeNumber(p, START_HSL[0], END_HSL[0]);
const s = getRangeNumber(p, START_HSL[1], END_HSL[1]);
const l = getRangeNumber(p, START_HSL[2], END_HSL[2]);
gradateLines += gradateLineTemplate(i, h, s, l);
}

最后，更改setValue，使球光标获得匹配的颜色:

function setValue(v) {
deactiveAll();
active(v);
slider.style.setProperty("--deg", `${v}deg`);
sliderShadow.style.setProperty("--deg", `${v}deg`);
const p = (100 * (v + DEG_RANGE)) / (2 * DEG_RANGE);
console.log(p);
slider.style.setProperty(
"--h",
`${getRangeNumber(p, START_HSL[0], END_HSL[0])}deg`
);
slider.style.setProperty(
"--s",
`${getRangeNumber(p, START_HSL[1], END_HSL[1])}%`
);
slider.style.setProperty(
"--l",
`${getRangeNumber(p, START_HSL[2], END_HSL[2])}%`
);
}