在色彩理论中, 要获得一种颜色的阴影
,需要降低其亮度,而要获得一种颜色的色调
,需要增加其亮度。我创建了一个库,它允许您使用HSL
颜色模型。使用此颜色模型,您可以获取基本颜色并更改其色相、亮度或饱和度。这里有一个类似于您的目的的示例,使用getTints
方法:
const { ColorTranslator } = colortranslator;
const container = document.querySelector("#container");
const tints = ColorTranslator.getTints("#93625D", 15);
tints.forEach((c) => {
const box = document.createElement("div");
box.style.backgroundColor = c;
container.appendChild(box);
});
console.log(JSON.stringify(tints));
html,
body {
height: 100%;
}
#container {
display: flex;
height: 100%;
}
#container div {
height: 100%;
width: 100%;
}
<script src="https://unpkg.com/colortranslator@1.10.1/web/colortranslator.js"></script>
<div id="container">
</div>
const { ColorTranslator } = colortranslator;
const container = document.querySelector("#container");
const color = new ColorTranslator('hsl(25,100%,50%)');
let box = null;
//---Create elements
for (let row = 0; row < 10; row++) {
for (let col = 0; col < 10; col++) {
color
.setS(row * 10)
.setL(col * 5 + 30);
box = document.createElement("div");
box.style.background = color.HEX;
box.innerText =
`R:${color.R}
G:${color.G}
B:${color.B}`;
container.appendChild(box);
}
}
html,
body {
height: 500px;
}
body {
margin: 0;
padding: 0;
position: relative;
}
#container {
display: flex;
flex-wrap: wrap;
height: 500px;
margin: 0 auto;
position: relative;
width: 500px;
}
#container div {
align-items: center;
box-sizing: border-box;
display: flex;
font-family: Arial;
font-size: 10px;
height: 10%;
justify-content: center;
text-align: center;
width: 10%;
}
<script src="https://unpkg.com/colortranslator@1.10.1/web/colortranslator.js"></script>
<div id="container">
</div>
您的意思是这样的吗?
var r = 40 % 256;
var g = 40 % 256;
var b = 50 % 256;
var result = [];
for(var i = 0; i < 7; i++)
{
r += 33;
g += 33;
b += 33;
result.push(r + "," + g + "," + b);
}
console.log(result);