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@1/dist/huebee.min.css">
<!-- or -->
<link rel="stylesheet" href="https://unpkg.com/huebee@1/dist/huebee.css">

<script src="https://unpkg.com/huebee@1/dist/huebee.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/huebee@1/dist/huebee.pkgd.js"></script>

Package managers

Install with npm: npm install huebee

Install with Bower: bower install huebee --save

License

Commercial license

If you want to use Huebee to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Huebee commercial licensing.

Once purchased, you’ll receive a commercial license PDF and be all set to use Huebee in your commercial applications.

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use Huebee under the terms of the GPLv3. Read more about Huebee open source licensing.

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' ]

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