Huebee

Install

Download

• CSS:
  • huebee.min.css minified, or
  • huebee.css un-minified
• JavaScript:
  • huebee.pkgd.min.js minified, or
  • huebee.pkgd.js un-minified

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.

<!-- use inputs so users can set colors with text --> <input class="color-input" value="#F80" /> <!-- anchors can be buttons --> <button class="color-button">Select color</button> <!-- anchors can be any element --> <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 ) // element => {Element} anchor element, or // {String} selector string // options => {Object} // hueb => Huebee instance 

// initialize on single element with selector string var hueb = new Huebee( '.color-input', { // options notation: 'hex', saturations: 2, }); 

// initialize on single element with element var elem = document.querySelector('.color-input'); var hueb = new Huebee( elem, { // options }); 

// initials on multiple elements with loop var elems = document.querySelectorAll('.color-input'); for ( var i=0; i < elems.length; i++ ) { var elem = elems[i]; var hueb = new Huebee( elem, { // options }); } 

Initialize with jQuery

// initialize on single element with jQuery var elem = $('.color-input')[0]; var hueb = new Huebee( elem, { // options }); 

// initialize on multiple elements with jQuery $('.color-input').each( function( i, elem ) { var hueb = new Huebee( elem, { // options }); }); 

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.

// default // setText: true // set text of anchor element 

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

setText: '.set-text-elem' // set text of .set-text-elem elements 

<div> <span class="swatch set-text-elem"></span> <span class="swatch set-text-elem"></span> <span class="swatch set-text-elem"></span> </div> <!-- add class to anchor to set text of anchor as well --> <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.

// default // setBGColor: true // set background-color of anchor element 

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

setBGColor: '.set-bg-elem' // set text of .set-bg-elem elements 

<div> <span class="swatch set-bg-elem"></span> <span class="swatch set-bg-elem"></span> <span class="swatch set-bg-elem"></span> </div> <!-- add class to anchor to set background-color of anchor as well --> <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.

// start color grid at cool blue 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 // 100% saturation & 50% saturation 

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.

// default // notation: 'shortHex' // #F00, #F80, #FF0 

notation: 'hex' // #FF0000, #FF8000, #FFFF00 

notation: 'hsl' // hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%) 

staticOpen

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

// default // staticOpen: false // open on click or focus // close on click outside or blur 

staticOpen: true // display open and stay open 

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.

/* 30px grid size */ .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; /* position */ background: #777; border: 5px solid #222; border-radius: 0; } .huebee__cursor { border: 5px solid #19F; } 

.huebee { /* disable reveal/hide transition */ 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" /> <!-- set initial color to #08F --> 

Methods

setColor

hueb.setColor('pink') // sets Huebee color // which in turn sets text and background colors if enabled // and selects swatch on grid, if matched // color may be any valid color value 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 ); } }); 

open

hueb.open() // opens Huebee 

close

hueb.close() // closes Huebee 

Events

change

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

// use change event to change SVG fill & stroke fillHueb.on( 'change', function( color ) { circle.style.fill = color; }); strokeHueb.on( 'change', function( color ) { circle.style.stroke = color; }); 

Properties

hueb.color // => #F00 // {String} - text color value hueb.hue // -> 0 // {Number} - angle of hue of color, 0...360 hueb.sat // -> 1 // {Number} - saturation of color, 0...1 hueb.lum // -> 0.5 // {Number} - luminance of color, 0...1 hueb.isLight // -> false // {Boolean} - true if color is light, false is color is dark // useful for setting legible text color on top of color