jquery - 为 Jquery 提供一个十六进制代码，动态生成相似的颜色

Question

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

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

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

然后我需要将它转换回chart.js 的十六进制代码。

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

Answer 1

I figured it out...

Chart.js accepts HSV values...

so i declare a jquery variable with the primary hue like: 266. Then i just generate a random number between 1 - 100 and dynamically create the hsv string from the numbers like so...

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