benknight / kuler-d3

D3.js implementation of the color wheel UI found on http://color.adobe.com, formerly known as Adobe Kuler

Color Wheel with D3

Reconstruction of the color wheel UI found on http://color.adobe.com (formerly known as Kuler) using D3.js.

Demo

http://benknight.github.io/kuler-d3/

Usage

By specifying a number of colors:

var colorWheel = new ColorWheel('.colorwheel');
colorWheel.bindData(5);

or, with preexisting color values:

// Use any valid tinycolor input
// More: github.com/bgrins/TinyColor
var data = [
  'red', 
  '#0ff', 
  {r: 0, g: 255, b: 0},
  {h: 220, s: 1, v: 1},
  {h: 300, s: 1, l: 0.5},
  'hsl(0, 100%, 50%)'
];

var colorWheel = new ColorWheel('.colorwheel');
colorWheel.bindData(data);