{"id":13906855,"url":"https://github.com/metafizzy/huebee","last_synced_at":"2025-04-13T00:41:52.490Z","repository":{"id":13269872,"uuid":"74068073","full_name":"metafizzy/huebee","owner":"metafizzy","description":"🐝 1-click color picker","archived":false,"fork":false,"pushed_at":"2022-03-26T12:40:50.000Z","size":211,"stargazers_count":395,"open_issues_count":24,"forks_count":43,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-24T08:27:12.574Z","etag":null,"topics":["color","css","html","javascript","plugin","widget"],"latest_commit_sha":null,"homepage":"https://huebee.buzz","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metafizzy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-17T21:15:02.000Z","updated_at":"2024-04-24T08:27:12.575Z","dependencies_parsed_at":"2022-08-07T07:01:11.631Z","dependency_job_id":null,"html_url":"https://github.com/metafizzy/huebee","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fhuebee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fhuebee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fhuebee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metafizzy%2Fhuebee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metafizzy","download_url":"https://codeload.github.com/metafizzy/huebee/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650417,"owners_count":21139672,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["color","css","html","javascript","plugin","widget"],"created_at":"2024-08-06T23:01:43.704Z","updated_at":"2025-04-13T00:41:52.470Z","avatar_url":"https://github.com/metafizzy.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Huebee\n\n🐝 _1-click color picker_\n\nSee [huebee.buzz](https://huebee.buzz) for complete docs and demos.\n\n## Install\n\n### Download\n\n+ CSS:\n  - [huebee.min.css](https://unpkg.com/huebee@2/dist/huebee.min.css) minified, or\n  - [huebee.css](https://unpkg.com/huebee@2/dist/huebee.css) un-minified\n+ JavaScript:\n  - [huebee.pkgd.min.js](https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js) minified, or\n  - [huebee.pkgd.js](https://unpkg.com/huebee@2/dist/huebee.pkgd.js) un-minified\n\n### CDN\n\nLink directly to Huebee files on [unpkg](https://unpkg.com).\n\n``` html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/huebee@2/dist/huebee.min.css\"\u003e\n```\n\n``` html\n\u003cscript src=\"https://unpkg.com/huebee@2/dist/huebee.pkgd.min.js\"\u003e\u003c/script\u003e\n```\n\n### Package managers\n\nnpm: `npm install huebee --save`\n\nBower: `bower install huebee --save`\n\n## Usage\n\nInitialize Huebee on an anchor element.\n\n``` html\n\u003cinput class=\"color-input\" /\u003e\n```\n\nHuebee will open whenever the anchor is clicked or focused (for inputs and buttons).\n\n### Initialize with JavaScript\n\n``` js\n// use selector string to initialize on single element\nvar hueb = new Huebee( '.color-input', {\n  // options\n  setBGColor: true,\n  saturations: 2,\n});\n\n// or use element\nvar colorInput = document.querySelector('.color-input');\nvar hueb = new Huebee( colorInput, {\n  // options\n  setBGColor: true,\n  saturations: 2,\n});\n```\n\n### Initialize with HTML\n\nYou can initialize Huebee in HTML, without writing any JavaScript. Add `data-huebee` attribute to an element.\n\n``` html\n\u003cinput class=\"color-input\" data-huebee /\u003e\n```\n\nOptions 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 `\"`.\n\n``` html\n\u003cinput class=\"color-input\" data-huebee='{ \"setBGColor\": true, \"saturations\": 2 }' /\u003e\n```\n\n## Options\n\n``` js\nvar hueb = new Huebee( '.color-input', {\n  // options\n\n  hues: 6,\n  // number of hues of the color grid\n  // default: 12\n\n  hue0: 210,\n  // the first hue of the color grid\n  // default: 0\n\n  shades: 7,\n  // number of shades of colors and shades of gray between white and black\n  // set to 0 to use only custom colors\n  // default: 5\n\n  saturations: 2,\n  // number of sets of saturation of the color grid\n  // 3 saturations =\u003e [ 100% saturation, 66% saturation, 33% saturation ]\n  // default: 3\n\n  notation: 'hex',\n  // the text syntax of colors\n  // values: shortHex, hex, hsl\n  // shortHex =\u003e #F00, hex =\u003e #FF0000, hsl =\u003e hsl(0, 100%, 50%)\n  // default: shortHex\n\n  setText: false,\n  // sets text of elements to color, and sets text color\n  // true =\u003e sets text of anchor\n  // string, '.color-text' =\u003e sets elements that match selector\n  // default: true\n\n  setBGColor: false,\n  // sets background color of elements\n  // and text color so text is visible on light or dark colors\n  // true =\u003e sets background color of anchor\n  // string, '.color-bg' =\u003e sets elements that match selector\n  // default: true\n\n  customColors: [ '#19F', '#E5A628', 'darkgray', 'hsl(210, 90%, 55%)' ]\n  // custom colors added to the top of the grid\n\n  staticOpen: true,\n  // displays open and stays open\n  // default: false\n\n  className: 'color-input-picker',\n  // class added to Huebee element, useful for CSS\n});\n```\n\n## CSS\n\nSet the size of the color grid with by setting the size of `.huebee__cursor` in CSS.\n\n``` css\n.huebee__cursor {\n  width: 25px;\n  height: 25px;\n}\n```\n\nStyle Huebee with your own CSS.\n\n``` css\n.huebee {\n  transition: none; /* disable reveal/hide transition */\n}\n\n.huebee__container {\n  background: #444;\n  border: 1px solid #222;\n  border-radius: 20px;\n}\n\n.huebee__cursor {\n  border: 2px solid #19F;\n}\n\n.huebee__close-button {\n  background: red;\n}\n\n.huebee__close-button__x {\n  stroke-width: 2;\n}\n```\n\nUse `className` option for specificity.\n\n``` html\n\u003cdiv class=\"dark-swatch\" data-huebee='{ \"className\": \"dark-picker\" }'\u003e\u003c/div\u003e\n\u003cdiv class=\"light-swatch\" data-huebee='{ \"className\": \"light-picker\" }'\u003e\u003c/div\u003e\n```\n\n``` css\n.dark-picker .huebee__container {\n  background: #222;\n}\n\n.light-picker .huebee__container {\n  background: #F8F8F8;\n}\n```\n\n## API\n\n``` js\nvar hueb = new Huebee( element, options );\n```\n\n### Properties\n\n``` js\nhueb.color // =\u003e #F00\n// {String} - text color value\n\nhueb.hue // -\u003e 0\n// {Number} - angle of hue of color, 0...360\n\nhueb.sat // -\u003e 1\n// {Number} - saturation of color, 0...1\n\nhueb.lum // -\u003e 0.5\n// {Number} - luminance of color, 0...1\n```\n\n### Methods\n\n``` js\nhueb.open()\n// opens Huebee\n\nhueb.close()\n// closes Huebee\n```\n\n### Events\n\n``` js\nhueb.on( 'change', function( color, hue, sat, lum ) {\n  console.log( 'color changed to: ' + color )\n})\n```\n\n---\n\nMIT License\n\nBy [Metafizzy](https://metafizzy.co)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Fhuebee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetafizzy%2Fhuebee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetafizzy%2Fhuebee/lists"}