ColorTriangle

// Play with the demo on the left and
// watch the favicon change its color

var ct = new ColorTriangle('#de701d');
ct.addEventListener('dragend', function() {
  drawFavicon(ct.getHEX());
});
ct.inject(
  document.getElementById('example-1')
);

// Try out the form on the right

// This adds a ColorTriangle to all
// <input type="color" … > elements
ColorTriangle.initColorInputs();

// A change event will fire on the input fields
// when the user selects a new color
field1.addEventListener('change', changeHeader, false);

API

Instantiation

var triangle = new ColorTriangle([startColor [, options]]);
  1. startColor is a hex color string (dflt: "#f00") or a color object (→ brehaut/color-js)
  2. options is an object. Specifying these properties will overwrite the default settings:
    • size (dflt: 150)
    • padding (dflt: 10)
    • triangleSize (relative to size − 2 × padding, dflt: 0.8)
    • wheelPointerColor1 (dflt: '#444')
    • wheelPointerColor2 (dflt: '#eee')
    • trianglePointerSize (dflt: 20)
    • trianglePointerColor1 (dflt: '#eee')
    • trianglePointerColor2 (dflt: '#444')
    • background (dflt: 'transparent')

Get/set color

triangle.getCSS();

Get color as a hsl CSS string. This is the fastest way to use your color in your site because there's no conversion between color models.

triangle.setHEX(hexString);
var hexString = triangle.getHEX();

hexString must be a valid hex CSS color.

triangle.setRGB(r, g, b);
var rgbArray = triangle.getRGB();

r (⇒ red), g (⇒ green) and b (⇒ blue) must be numbers from 0 to 1.

triangle.setHSL(h, s, l);
var hslArray = triangle.getHSL();

h (⇒ hue) must be between 0 and 2 × π (radian). s (⇒ saturation) and l (⇒ lightness) have to be in the range from 0 to 1.

triangle.setColor(colorObj);
var colorObj = triangle.getColor();

These methods are only available if you've included brehaut/color-js in your page. They accept respectively return color objects.

Add to or remove from your page

triangle.inject(element);

Add the ColorTriangle to the document as the last child of element.

triangle.dispose();

Remove the ColorTriangle from the document.

var mainElement = triangle.getElement();

Get the main element of the ColorTriangle (this is the element that is inserted in the document). Note: the element has the class color-triangle.

Events

triangle.addEventListener(eventName, someFunction);
triangle.removeEventListener(eventName, someFunction);

eventName can be one of the following strings:

  • dragstart
  • drag
  • dragend

They behave exactly like you'd expect them to.

Helpers

ColorTriangle.initInput(inputElement [, options]);

This function shows a ColorTriangle when the user focuses the inputElement. The value of inputElement will be changed when the user selects a new color and a change event will be triggered on the inputElement. options is an object like described in instantiation, except 4 changes:

  • The default value of size will be set to the width of inputElement.
  • The default value of background will be set to the background color of inputElement.
  • New property margin which can be used to determine the space between inputElement and the ColorTriangle (dflt: 10).

  • New property event (dflt: 'dragend'). Please have a look at the events section. You can use this property to change the color while the user is dragging (value: 'drag'). 
ColorTriangle.initColorInputs([options]);

Calls ColorTriangle.initInput for every input[type=color].

Download

All downloads on GitHub

Notes

Built using <canvas>. No JavaScript Framework needed. Tested in Firefox 3.6, Google Chrome 5.0, Safari 4.0 and Opera 10.60. Doesn't work in Internet Explorer. Development takes place on GitHub. MIT License.