Rendering of color pickers can be done either by instantiating via a constuctor, or by using the detect function.

EightBitColorPicker constructor

The constructor takes in an object with the following properties:

If no palette is specified, a sensible default is used. If color is not specified in the argument, it will first check if the targeted element has a data-color attribute and use that if so. Otherwise, a random color from the palette will be chosen.

var picker = new EightBitColorPicker({el: 'example', color: 6})


This function finds all elements with the class eight-bit-color-picker, renders them as pickers, and returns a list of picker instances. Note that this function is not on the prototype chain, and can be invoked statically like so:

var pickers = EightBitColorPicker.detect()


You can set up listeners for events emitted by a color picker instance. Currently, only the colorChange event is emitted.

colorChange event

This event is triggered when the selected color of a color picker changes. The detail property of the event contains these values:


Acts as a proxy to the addEventListener function of the picker's DOMElement

picker.addEventListener('colorChange', function(e) {
  console.log('Old Color: ' + e.detail.oldColor)
  console.log('New Color: ' + e.detail.newColor)
  console.log('Hex Color: ' + e.detail.picker.getHexColor())


Acts as a proxy to the removeEventListener function of the picker's DOMElement

picker.removeEventListener('colorChange', someFunc)


EightBitColorPicker objects expose several getters with useful values.


Returns an integer from 0-255 that corresponds with the 8bit color index currently in display by the picker.

picker.get8bitColor()  // 6


Returns the currently selected color of the picker instance as a string in full hex format with a leading "#".

picker.getHexColor()  // "#008080"


Returns the current color as an object with keys "r", "g", and "b". Values are integers from 0 to 255.

picker.getRGBColor()  // {r: 0, g: 128, b: 128}


Returns the terminal escape code sequence to use the current color as a foreground color.

picker.getForegroundEscapeSequence() // "\x1b[38;5;6m"


Returns the terminal escape code sequence to use the current color as a background color.

picker.getBackgroundEscapeSequence() // "\x1b[48;5;6m"

Behavior Functions

Several functions are exposed that allow users to interact with picker objects programatically

Displays the color picker selection view


Hides the color picker selection view



Updates the value of this.color and its representations. This takes two arguments:



Restores preview color representations to match the value of this.color. Useful if you've invoked updateColor with previewOnly set to true.


Browser Requirements

This will work in all modern browsers. If you're worried about IE, this should work fine on IE10 and up. As for mobile... it works, but the experience isn't quite ideal.