在 Javascript 或 jQuery 中获取颜色深浅？答案

【问题标题】：Get shades of Color in Javascript or jQuery?在 Javascript 或 jQuery 中获取颜色深浅？
【发布时间】：2017-06-26 16:04:45
【问题描述】：

在Javascript 或jQuery 中是否有一种方法可以让我们获得一种颜色的所有阴影，然后将值返回到array？非常感谢。

类似：

【问题讨论】：

你有示例颜色吗？
你期望什么作为样本输出？
我在问题上添加了一张图片:)

标签： javascript jquery colors

【解决方案1】：

In color theory，要获得一种颜色的shade，您需要降低其亮度，而要获得一种颜色的tint，您需要增加其亮度。我创建了a library，它允许您使用HSL 颜色模型。使用此颜色模型，您可以采用基色并更改其色调、亮度或饱和度。在这里，您可以使用getTints 方法获得与您的目的相似的内容：

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.7.0/dist/colortranslator.web.js"></script>

<div id="container">
</div>

这里有另一个例子，它同时改变颜色的饱和度和亮度以获得每个饱和度的所有色调：

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.7.0/dist/colortranslator.web.js"></script>

<div id="container">
</div>

【讨论】：

非常感谢 :) 非常清晰，非常周到。谢谢。

【解决方案2】：

你的意思是这样的吗？

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);

【讨论】：

天哪，我现在应该试试这个！感谢您的回答。测试它。
非常感谢老兄！有效！ :D 祝你有美好的一天