Feed Jquery a hex code, dynamically generate similar colors

Question

I am using Chart.js to create some donut charts for an app i'm building. I want the chart to be based on a single color like #5a2a97.

Then I'm thinking that I want to use HSB (i'm getting this term from photoshop color sliders) to dynamically change the S and B values to a random percentage between 0 and 100%.

This would result in a color based on the original hex, but dynamic saturation and value.

then i need to convert it back to a hex code for chart.js.

I know this sounds crazy, but does anyone have any ideas?

Use HSL and vary the L parameter. You'll need generic hex-colour decode and encode functions, and HSL <-> RGB conversion functions too. Google should turn up both. — Alnitak, Jan 15 '14 at 18:56
possible duplicate of [Javascript convert HSB/HSV color to RGB accurately](http://stackoverflow.com/questions/17242144/javascript-convert-hsb-hsv-color-to-rgb-accurately) — Blazemonger, Jan 15 '14 at 18:58

score 0 · Answer 1 · answered Jan 15 '14 at 19:12

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

Feed Jquery a hex code, dynamically generate similar colors

1 Answers1