Authors:Bill Keese, Nikolai Onken, Jared Jurkiewicz
Developers:Declan Fahey, Bill Keese, Adam Peller, Becky Gibson, Pete Higgins

dijit.ColorPalette is a great little tool which provides a color picker for you to use in your application. The color palette size is definable. In addition, the color palette is accessible through screen readers as well as keyboard. The widget also supports the ‘standard’ dijit function onChange, which signals when a new selection was made from the palette.

Widget Construction Parameters

Parameter Description

A string defining the size of the palette. Can only take one of two values, 7x10 or 3x4. The default value is 7x10.


Return Values

As with all dijit widgets, the selected value can be obtained through the widget get(“value”) function. The return type is an instance of dojo.Color.


Default color palette

Default color palette, created programmatically:

  var myPalette = new dijit.ColorPalette({
    palette: "7x10",
    onChange: function(val){ alert(val); }
  }, "placeHolder" );
<span id="placeHolder">this will be replaced</span>

Small color palette

Small color palette, created declaratively:

<div data-dojo-type="dijit.ColorPalette" data-dojo-props="onChange:function(){alert(this.value);}, palette:'3x4'"></div>



Action Key
Navigate colors Arrow keys
Pick a color Spacebar or enter

Screen Reader

Screen readers will read the name of each color as it is highlighted. For example, “white”, “seashell”, “cornsilk”, and so on.

Error in the documentation? Can’t find what you are looking for? Let us know!