Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
huebee
Advanced tools
Readme
🐝 1-click color picker
See huebee.buzz for complete docs and demos.
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>
npm: npm install huebee --save
Bower: bower install huebee --save
Initialize Huebee on an anchor element.
<input class="color-input" />
Huebee will open whenever the anchor is clicked or focused (for inputs and buttons).
// 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,
});
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 }' />
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
});
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;
}
var hueb = new Huebee( element, options );
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
hueb.open()
// opens Huebee
hueb.close()
// closes Huebee
hueb.on( 'change', function( color, hue, sat, lum ) {
console.log( 'color changed to: ' + color )
})
MIT License
By Metafizzy
FAQs
1-click color picker
The npm package huebee receives a total of 2,591 weekly downloads. As such, huebee popularity was classified as popular.
We found that huebee demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.