• Stars
    star
    402
  • Rank 107,368 (Top 3 %)
  • Language
    JavaScript
  • Created almost 8 years ago
  • Updated over 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

🐝 1-click color picker

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">
<script src="https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js"></script>

Package managers

npm: npm install huebee --save

Bower: bower 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

// 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.

<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', {
  // 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.

.huebee__cursor {
  width: 25px;
  height: 25px;
}

Style Huebee with your own 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.

<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 // => #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

hueb.open()
// opens Huebee

hueb.close()
// closes Huebee

Events

hueb.on( 'change', function( color, hue, sat, lum ) {
  console.log( 'color changed to: ' + color )
})

MIT License

By Metafizzy

More Repositories

1

isotope

πŸ’ž Filter & sort magical layouts
HTML
11,040
star
2

zdog

Flat, round, designer-friendly pseudo-3D engine for canvas & SVG
JavaScript
10,327
star
3

flickity

πŸƒ Touch, responsive, flickable carousels
JavaScript
7,511
star
4

infinite-scroll

πŸ“œ Automatically add next page
HTML
7,407
star
5

packery

🍱 Gapless, draggable grid layouts
JavaScript
4,128
star
6

outlayer

πŸ‘· the brains & guts of a layout library
JavaScript
163
star
7

unidragger

πŸ‘‡ Draggable base class
JavaScript
82
star
8

ev-emitter

πŸ”” Lil' event emitter
JavaScript
65
star
9

flickity-fade

Fade between Flickity slides
JavaScript
62
star
10

zdog-demos

Round, flat, designer friendly demos for Zdog
Makefile
57
star
11

fizzy-ui-utils

UI utilities & helpers
JavaScript
46
star
12

flickity-fullscreen

Enable fullscreen view for Flickity carousels
HTML
46
star
13

tap-listener

Listens to taps
JavaScript
42
star
14

isotope-packery

packery layout mode for Isotope
JavaScript
42
star
15

flickity-bg-lazyload

Flickity lazyload background images
HTML
31
star
16

flickity-as-nav-for

Enable asNavFor for Flickity
HTML
30
star
17

flickity-sync

Sync up two Flickity carousels
HTML
29
star
18

metafizzy.co

🐻 Metafizzy site!
Handlebars
29
star
19

flickity-docs

πŸ“ documentation for Flickity
Handlebars
28
star
20

unipointer

☝️ Do one thing with one pointer
JavaScript
27
star
21

flickity-imagesloaded

enables imagesLoaded option for Flickity
JavaScript
19
star
22

zdog-docs

Documentation site for Zdog
Handlebars
19
star
23

fizzy.school

πŸŽƒ Lessons for anyone writing jQuery
HTML
17
star
24

logo.pizza

πŸ• Logo Pizza site
JavaScript
16
star
25

next-project

Help us decide what to build next
16
star
26

isotope-docs

πŸ“ documentation for Isotope
Handlebars
13
star
27

isotope-masonry-horizontal

masonryHorizontal layout mode for Isotope
HTML
13
star
28

droppabilly

Drag and drop
JavaScript
11
star
29

flickity-hash

Select Flickity slides with links
HTML
11
star
30

packery-docs

πŸ“ Documentation for Packery
HTML
9
star
31

isotope-horizontal

horizontal layout mode for Isotope
JavaScript
8
star
32

isotope-fit-columns

fitColumns layout mode for Isotope
JavaScript
7
star
33

eslint-plugin-metafizzy

ESLint config and rules for Metafizzy
JavaScript
3
star
34

transfob

get a transform stream, like through2.obj()
JavaScript
3
star
35

isotope-cells-by-column

cellsByColumn layout mode for Isotope
JavaScript
3
star
36

flickity-dev

Little demos made in development of Flickity
JavaScript
3
star
37

fizzy-docs-modules

Modules used in Metafizzy documentation sites
Handlebars
3
star
38

isotope-cells-by-row

cellsByRow layout mode for Isotope
JavaScript
2
star
39

huebee-docs

Huebee documentation
Handlebars
2
star
40

infinite-scroll-docs

πŸ“ Documentation for Infinite Scroll
Handlebars
2
star
41

grunt-fizzy-docs

Grunt tasks for Masonry, Isotope, and Packery docs
JavaScript
2
star