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