Feed Jquery一个十六进制代码，动态生成相似的颜色

Question

我正在使用图表.js为我正在构建的应用程序创建一些圆环图。我希望图表基于像 #5a2a97 这样的单一颜色。

然后我想我想使用 HSB（我从 photoshop 颜色滑块中获得这个术语）将 S 和 B 值动态更改为 0 到 100% 之间的随机百分比。

这将产生基于原始十六进制的颜色，但动态饱和度和值。

然后我需要将其转换回图表.js的十六进制代码。

我知道这听起来很疯狂，但有人有什么想法吗？

Answer 1

我想通了...

图表.js接受HSV值...

所以我声明了一个具有主要色调的 jQuery 变量，例如：266。然后我只是生成一个介于 1 - 100 之间的随机数，然后像这样从数字动态创建 hsv 字符串......

 //Home page Charts...
$(document).ready(function() { 
   var primary_hue = 266;
   var doughnutData = [
      {
         value: 30,
         color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)",
         label: "test",
      },
      {
         value : 50,
         color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)",
         label: "test",
      },
      {
         value : 100,
         color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)",
         label: "test",
      },
      {
         value : 40,
         color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)",
         label: "test",
      },
      {
         value : 120,
         color:"hsl("+primary_hue+","+(Math.round(Math.random() * 99) + 1)+"%,"+(Math.round(Math.random() * 99) + 1)+"%)",
         label: "test",
      },
   ];
   var myDoughnut = new Chart(document.getElementById("best-lure-canvas").getContext("2d")).Doughnut(doughnutData);
});