Name: huebee
Owner: Metafizzy
Description: ? 1-click color picker
Created: 2016-11-17 21:15:02.0
Updated: 2018-05-05 16:55:19.0
Pushed: 2017-12-20 15:19:41.0
Homepage: http://huebee.buzz
Size: 55
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
? 1-click color picker
See huebee.buzz for complete docs and demos.
Link directly to Huebee files on unpkg.
k rel="stylesheet" href="https://unpkg.com/huebee@2/dist/huebee.min.css">
or -->
k rel="stylesheet" href="https://unpkg.com/huebee@2/dist/huebee.css">
html
ipt src="https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js"></script>
or -->
ipt src="https://unpkg.com/huebee@2/dist/huebee.pkgd.js"></script>
Bower: bower install huebee --save
npm: npm install huebee --save
Initialize Huebee on an anchor element.
ut class="color-input" />
Huebee will open whenever the anchor is clicked or focused (for inputs and buttons).
se selector string to initialize on single element
hueb = new Huebee( '.color-input', {
options
tBGColor: true,
turations: 2,
r use element
colorInput = document.querySelector('.color-input');
hueb = new Huebee( colorInput, {
options
tBGColor: true,
turations: 2,
You can initialize Huebee in HTML, without writing any JavaScript. Add data-huebee attribute to an element.
ut 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 ".
ut class="color-input" data-huebee='{ "setBGColor": true, "saturations": 2 }' />
hueb = new Huebee( '.color-input', {
options
es: 6,
number of hues of the color grid
default: 12
e0: 210,
the first hue of the color grid
default: 0
ades: 7,
number of shades of colors and shades of gray between white and black
default: 5
turations: 2,
number of sets of saturation of the color grid
3 saturations => [ 100% saturation, 66% saturation, 33% saturation ]
default: 3
tation: 'hex',
the text syntax of colors
values: shortHex, hex, hsl
shortHex => #F00, hex => #FF0000, hsl => hsl(0, 100%, 50%)
default: shortHex
tText: false,
sets text of elements to color, and sets text color
true => sets text of anchor
string, '.color-text' => sets elements that match selector
default: true
tBGColor: false,
sets background color of elements
and text color so text is visible on light or dark colors
true => sets background color of anchor
string, '.color-bg' => sets elements that match selector
default: true
stomColors: [ '#19F', '#E5A628', 'darkgray', 'hsl(210, 90%, 55%)' ]
custom colors added to the top of the grid
aticOpen: true,
displays open and stays open
default: false
assName: 'color-input-picker',
class added to Huebee element, useful for CSS
Set the size of the color grid with by setting the size of .huebee__cursor in CSS.
bee__cursor {
dth: 25px;
ight: 25px;
Style Huebee with your own CSS.
bee {
ansition: none; /* disable reveal/hide transition */
bee__container {
ckground: #444;
rder: 1px solid #222;
rder-radius: 20px;
bee__cursor {
rder: 2px solid #19F;
bee__close-button {
ckground: red;
bee__close-button__x {
roke-width: 2;
Use className option for specificity.
class="dark-swatch" data-huebee='{ "className": "dark-picker" }'></div>
class="light-swatch" data-huebee='{ "className": "light-picker" }'></div>
css
k-picker .huebee__container {
ckground: #222;
ht-picker .huebee__container {
ckground: #F8F8F8;
hueb = new Huebee( element, options );
.color // => #F00
String} - text color value
.hue // -> 0
Number} - angle of hue of color, 0...360
.sat // -> 1
Number} - saturation of color, 0...1
.lum // -> 0.5
Number} - luminance of color, 0...1
.open()
pens Huebee
.close()
loses Huebee
.on( 'change', function( color, hue, sat, lum ) {
nsole.log( 'color changed to: ' + color )
MIT License
By Metafizzy