Huebee is a JavaScript library for creating user-centric color pickers. Huebee displays a limited set of colors so users view all colors at a glance, make clear decisions, and select a color with a single click.

Install

Download

CDN

Link directly to Huebee files on unpkg.

< link rel = "stylesheet" href = "https://unpkg.com/huebee@2/dist/huebee.min.css" >

< script src = "https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js" > </ script >

Package managers

Install with npm: npm install huebee

Install with Bower: bower install huebee --save

Getting started

Include the Huebee .css and .js files in your site.

< link rel = "stylesheet" href = "/path/to/huebee.css" media = "screen" >

< script src = "/path/to/huebee.pkgd.min.js" > </ script >

Huebee works on an anchor element.

< input class = "color-input" value = "#F80" /> < button class = "color-button" > Select color </ button > < span class = "current-color" > Current color </ span >

The Huebee color picker will open whenever the anchor is clicked or focused.

Initialize with vanilla JavaScript

var hueb = new Huebee ( element, options )

var hueb = new Huebee ( '.color-input' , { notation: 'hex' , saturations : 2 , });

var elem = document .querySelector( '.color-input' ); var hueb = new Huebee ( elem, { });

var elems = document .querySelectorAll( '.color-input' ); for ( var i= 0 ; i < elems.length; i++ ) { var elem = elems[i]; var hueb = new Huebee ( elem, { }); }

Initialize with jQuery

var elem = $( '.color-input' )[ 0 ]; var hueb = new Huebee ( elem, { });

$( '.color-input' ).each( function ( i, elem ) { var hueb = new Huebee ( elem, { }); });

Initialize with HTML

You can initialize Huebee in HTML, without writing any JavaScript. Add data-huebee attribute to an element.

< input class = "color-input" data-huebee />

Options can be set in value of data-huebee . Options set in HTML must be valid JSON. Keys need to be quoted, for example "notation" :. The data-huebee attribute value is set with single quotes '{...}' , but JSON entities use double-quotes "string" .

< input class = "color-input" data-huebee = '{ "notation": "hex", "saturations": 2 }' />

Options

The demos below are opened by default with staticOpen: true to be easily viewable.

setText

Sets elements’ text to color.

Set setText to a selector string to set the text of multiple elements.

setText: '.set-text-elem' < div > < span class = "swatch set-text-elem" > </ span > < span class = "swatch set-text-elem" > </ span > < span class = "swatch set-text-elem" > </ span > </ div > < input class = "set-text-elem" />

setBGColor

Sets elements’ background color to color. Also sets text color so text is visible with light and dark colors.

Set setBGColor to a selector string to set the background color of multiple elements.

setBGColor: '.set-bg-elem' < div > < span class = "swatch set-bg-elem" > </ span > < span class = "swatch set-bg-elem" > </ span > < span class = "swatch set-bg-elem" > </ span > </ div > < input class = "set-bg-elem" />

hues

Number of hues of the color grid. Hues are slices of the color wheel — red, yellow, green, cyan, blue, magenta. Default hues: 12 .

hues: 6

hue0

The first hue of the color grid. Default hue0: 0 .

hue0: 210

shades

Number of shades of colors and shades of gray between white and black. Default shades: 5 .

shades: 7

saturations

Number of sets of saturation of the color grid. saturations: 3 will display saturations of 100%, 66%, and 33%. Default saturations: 3

saturations: 2

customColors

Custom colors added to the top of the grid. Values may be any valid color value: '#19F', '#E5A628', 'darkgray', 'hsl(210, 90%, 55%)' .

customColors: [ '#C25' , '#E62' , '#EA0' , '#19F' , '#333' ]

Set shades: 0 to disable normal colors and use only custom colors. Use hues to set the number of columns.

customColors: [ '#C25' , '#E62' , '#EA0' , '#ED0' , '#6C6' , '#19F' , '#258' , '#333' ], shades : 0 , hues : 4 ,

notation

Text syntax of colors values.

notation: 'hex'

notation: 'hsl'

staticOpen

Displays open and stays open. Default disabled staticOpen: false .

staticOpen: true

className

Class added to Huebee element. Useful for CSS, see below.

className: 'custom-huebee-class'

CSS

Set the size of the color grid with by setting the size of .huebee__cursor in CSS. This allows you to size the color grid responsively with media queries.

.huebee__cursor { width : 30px ; height : 30px ; }

Style Huebee with your own CSS. Look over huebee.css to see what styles you can customize.

.huebee__container { top : 20px ; background : #777 ; border : 5px solid #222 ; border-radius : 0 ; } .huebee__cursor { border : 5px solid #19F ; }

.huebee { transition : none; } .huebee__close-button { background : red; } .huebee__close-button__x { stroke-width : 2 ; }

Use className option for specificity.

< input data-huebee = '{ "className": "dark-picker" }' /> < input data-huebee = '{ "className": "light-picker" }' /> .dark-picker .huebee__container { background : #222 ; } .light-picker .huebee__container { background : #F8F8F8 ; }

Inputs

With <input> elements, set value to set the initial color.

< input value = "#08F" />

Methods

setColor

hueb .setColor( 'pink' ) hueb .setColor( 'transparent' ) hueb .setColor( '#F90' ) hueb .setColor( '#BADA55' ) hueb .setColor( 'hsl(210, 90%, 50%)' )

Use setColor to add UI to set specific colors.

< div class = "button-row" > < button data-color = "#08F" > Blue </ button > < button data-color = "#2D2" > Green </ button > < button data-color = "#F80" > Orange </ button > </ div > buttonRow.addEventListener( 'click' , function ( event ) { var buttonColor = event.target.getAttribute( 'data-color' ); if ( buttonColor ) { hueb .setColor( buttonColor ); } }); Blue Green Orange

open

hueb .open()

close

hueb .close()

Events

change

hueb .on( 'change' , function ( color, hue, sat, lum ) { console .log( 'color changed to: ' + color ) })

fillHueb.on( 'change' , function ( color ) { circle.style.fill = color; }); strokeHueb.on( 'change' , function ( color ) { circle.style.stroke = color; });

Properties