Huebee
🐝 1-click color picker
See huebee.buzz for complete docs and demos.
Install
Download
CDN
Link directly to Huebee files on unpkg.
<link rel="stylesheet" href="https://unpkg.com/huebee@2/dist/huebee.min.css">
<link rel="stylesheet" href="https://unpkg.com/huebee@2/dist/huebee.css">
<script src="https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js"></script>
<script src="https://unpkg.com/huebee@2/dist/huebee.pkgd.js"></script>
Package managers
Bower: bower install huebee --save
npm: npm install huebee --save
Usage
Initialize Huebee on an anchor element.
<input class="color-input" />
Huebee will open whenever the anchor is clicked or focused (for inputs and buttons).
Initialize with JavaScript
var hueb = new Huebee( '.color-input', {
setBGColor: true,
saturations: 2,
});
var colorInput = document.querSelector('.color-input');
var hueb = new Huebee( colorInput, {
setBGColor: true,
saturations: 2,
});
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 "setBGColor"
:. Note that the attribute value uses single quotes '
, but the JSON entities use double-quotes "
.
<input class="color-input" data-huebee='{ "setBGColor": true, "saturations": 2 }' />
Options
var hueb = new Huebee( '.color-input', {
hues: 6,
hue0: 210,
shades: 7,
saturations: 2,
notation: 'hex',
setText: false,
setBGColor: false,
customColors: [ '#19F', '#E5A628', 'darkgray', 'hsl(210, 90%, 55%)' ]
staticOpen: true,
className: 'color-input-picker',
});
CSS
Set the size of the color grid with by setting the size of .huebee__cursor
in CSS.
.huebee__cursor {
width: 25px;
height: 25px;
}
Style Huebee with your own CSS.
.huebee {
transition: none;
}
.huebee__container {
background: #444;
border: 1px solid #222;
border-radius: 20px;
}
.huebee__cursor {
border: 2px solid #19F;
}
.huebee__close-button {
background: red;
}
.huebee__close-button__x {
stroke-width: 2;
}
Use className
option for specificity.
<div class="dark-swatch" data-huebee='{ "className": "dark-picker" }'></div>
<div class="light-swatch" data-huebee='{ "className": "light-picker" }'></div>
.dark-picker .huebee__container {
background: #222;
}
.light-picker .huebee__container {
background: #F8F8F8;
}
API
var hueb = new Huebee( element, options );
Properties
hueb.color
hueb.hue
hueb.sat
hueb.lum
Methods
hueb.open()
hueb.close()
Events
hueb.on( 'change', function( color, hue, sat, lum ) {
console.log( 'color changed to: ' + color )
})
MIT License
By Metafizzy