Skip to content
🐝 1-click color picker
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/workflows βœ… add GitHub Action for nodejs Apr 14, 2020
bin βœ… migrate to puppeteer tests Apr 20, 2020
dist 🐝 v2.1.0 Apr 22, 2020
sandbox πŸ”” support customColors only. #5 Apr 22, 2020
test βœ… migrate to puppeteer tests Apr 20, 2020
.eslintrc.js πŸ‘Ÿ migrate to eslint & npm scripts; remove gulp πŸ’€ Apr 14, 2020
.gitignore add package-lock.json Apr 14, 2020
README.md πŸ”” support customColors only. #5 Apr 22, 2020
bower.json πŸ‘· build v1.0.0 Nov 17, 2016
huebee.css 🐝 v2.1.0 Apr 22, 2020
huebee.js 🐝 v2.1.0 Apr 22, 2020
package-lock.json 🐝 v2.1.0 Apr 22, 2020
package.json 🐝 v2.1.0 Apr 22, 2020

README.md

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

You can’t perform that action at this time.