Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/metafizzy/huebee
🐝 1-click color picker
https://github.com/metafizzy/huebee
color css html javascript plugin widget
Last synced: about 1 month ago
JSON representation
🐝 1-click color picker
- Host: GitHub
- URL: https://github.com/metafizzy/huebee
- Owner: metafizzy
- Created: 2016-11-17T21:15:02.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-03-26T12:40:50.000Z (over 2 years ago)
- Last Synced: 2024-04-24T08:27:12.574Z (5 months ago)
- Topics: color, css, html, javascript, plugin, widget
- Language: JavaScript
- Homepage: https://huebee.buzz
- Size: 206 KB
- Stars: 395
- Watchers: 10
- Forks: 43
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Huebee
🐝 _1-click color picker_
See [huebee.buzz](https://huebee.buzz) for complete docs and demos.
## Install
### Download
+ CSS:
- [huebee.min.css](https://unpkg.com/huebee@2/dist/huebee.min.css) minified, or
- [huebee.css](https://unpkg.com/huebee@2/dist/huebee.css) un-minified
+ JavaScript:
- [huebee.pkgd.min.js](https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js) minified, or
- [huebee.pkgd.js](https://unpkg.com/huebee@2/dist/huebee.pkgd.js) un-minified
### CDN
Link directly to Huebee files on [unpkg](https://unpkg.com).
``` html
```
``` html
```
### Package managers
npm: `npm install huebee --save`
Bower: `bower install huebee --save`
## Usage
Initialize Huebee on an anchor element.
``` html
```
Huebee will open whenever the anchor is clicked or focused (for inputs and buttons).
### Initialize with JavaScript
``` js
// use selector string to initialize on single element
var hueb = new Huebee( '.color-input', {
// options
setBGColor: true,
saturations: 2,
});
// or use element
var colorInput = document.querySelector('.color-input');
var hueb = new Huebee( colorInput, {
// options
setBGColor: true,
saturations: 2,
});
```
### Initialize with HTML
You can initialize Huebee in HTML, without writing any JavaScript. Add `data-huebee` attribute to an element.
``` html
```
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 `"`.
``` html
```
## Options
``` js
var hueb = new Huebee( '.color-input', {
// options
hues: 6,
// number of hues of the color grid
// default: 12
hue0: 210,
// the first hue of the color grid
// default: 0
shades: 7,
// number of shades of colors and shades of gray between white and black
// set to 0 to use only custom colors
// default: 5
saturations: 2,
// number of sets of saturation of the color grid
// 3 saturations => [ 100% saturation, 66% saturation, 33% saturation ]
// default: 3
notation: 'hex',
// the text syntax of colors
// values: shortHex, hex, hsl
// shortHex => #F00, hex => #FF0000, hsl => hsl(0, 100%, 50%)
// default: shortHex
setText: 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
setBGColor: 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
customColors: [ '#19F', '#E5A628', 'darkgray', 'hsl(210, 90%, 55%)' ]
// custom colors added to the top of the grid
staticOpen: true,
// displays open and stays open
// default: false
className: 'color-input-picker',
// class added to Huebee element, useful for CSS
});
```
## CSS
Set the size of the color grid with by setting the size of `.huebee__cursor` in CSS.
``` css
.huebee__cursor {
width: 25px;
height: 25px;
}
```
Style Huebee with your own CSS.
``` css
.huebee {
transition: none; /* disable reveal/hide transition */
}
.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.
``` html
```
``` css
.dark-picker .huebee__container {
background: #222;
}
.light-picker .huebee__container {
background: #F8F8F8;
}
```
## API
``` js
var hueb = new Huebee( element, options );
```
### Properties
``` js
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
```
### Methods
``` js
hueb.open()
// opens Huebee
hueb.close()
// closes Huebee
```
### Events
``` js
hueb.on( 'change', function( color, hue, sat, lum ) {
console.log( 'color changed to: ' + color )
})
```
---
MIT License
By [Metafizzy](https://metafizzy.co)