{"id":15379314,"url":"https://github.com/yaireo/color-picker","last_synced_at":"2025-04-05T08:03:47.182Z","repository":{"id":40667347,"uuid":"320035342","full_name":"yairEO/color-picker","owner":"yairEO","description":"Minimal javascript color picker component","archived":false,"fork":false,"pushed_at":"2025-02-24T10:16:26.000Z","size":5570,"stargazers_count":68,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-29T07:02:18.581Z","etag":null,"topics":["color","color-picker","colorpicker","component","javascript","javascript-component","ui","vanilajs","widget"],"latest_commit_sha":null,"homepage":"https://yaireo.github.io/color-picker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yairEO.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-12-09T17:49:03.000Z","updated_at":"2025-03-20T00:39:53.000Z","dependencies_parsed_at":"2024-06-21T14:05:16.814Z","dependency_job_id":"4c6deda1-3d2c-4969-8423-a102ffe006d4","html_url":"https://github.com/yairEO/color-picker","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fcolor-picker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fcolor-picker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fcolor-picker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yairEO%2Fcolor-picker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yairEO","download_url":"https://codeload.github.com/yairEO/color-picker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247305932,"owners_count":20917208,"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","color-picker","colorpicker","component","javascript","javascript-component","ui","vanilajs","widget"],"created_at":"2024-10-01T14:18:47.220Z","updated_at":"2025-04-05T08:03:47.144Z","avatar_url":"https://github.com/yairEO.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href='https://yaireo.github.io/color-picker/'\u003e\n    \u003cimg src=\"./demo.apng?sanitize=true\" alt=\"color picker demo video\"/\u003e\n  \u003c/a\u003e\n\u003cp\u003e\n\n\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://www.npmjs.com/package/@yaireo/color-picker'\u003e\n      \u003cimg src=\"https://badgen.net/npm/v/@yaireo/color-picker?color=red\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/minzip/@yaireo/color-picker?color=green\" /\u003e\n  \u003cimg src=\"https://badgen.net/npm/dw/@yaireo/color-picker?color=blue\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003e\n  Minimal, 5KB Color-Picker in Vanila-js\n\u003c/h1\u003e\n\n\n**⚠️ Supported only in modern browsers**\n\n* Carefully crafted as lightweight as possible\n* Mousewheel-suppored *range silders*\n* Minimal UX for smallest screen footprint\n* Supported color formats: [`x11 color codes`](https://en.wikipedia.org/wiki/X11_color_names),\n`hexa`, `rgba`, `hsla`\n* Positioning-engine **not included**. Use your own, or one suggested below\n* Optional color swatches:\n  * pre-determined values (un-removable)\n  * custom color add/remove swatch\n  * optional global sync with *localstorage* between picker instances\n\n\u003cbr\u003e\n\n---\n\u003cbr\u003e\n\nThis color-picker component is based on my previous work with highly customizable range input (slider) component: [UI-Range](https://github.com/yairEO/ui-range)\nand the power of HSLA color format infused into custom CSS properties (variables) to allow as lightweight solution as possible.\n\nI have hand-crafted the color transformation functions to be as lightweight as possible, and kept the UI to\nthe minimum necessary to provide the user with a better, unified, color-picking experience which I believe is better\nthan the default `\u003cinput type='color'\u003e` which looks different across browsers and OS, and does ***not*** allow modifications to a color's *alpha* (opacity) channel.\n\nSince this component is ***only*** a color-picker, and does not transforms or interacts with any `\u003cinput type='color'\u003e` elements on the page,\nit is up to developers, if they wish, to connect it to an input and have the color-picker positioned next to it in a popup-manner.\nSuch behavior can be seen seen in the demo page and below, on the last section.\n\nI advise using a `type='text'` input which can offer support for any color format (as a string) because `type='text'` cannot work with named colors such as `value='red'`.\n\n\u003cbr\u003e\n\n## Install\n\n    npm i @yaireo/color-picker\n\n## Use\n\nThe codebase is bundled into 2 formats:\n\n`iife` (to be used as standalone script):\n\n```html\n\u003cscript src='@yaireo/color-picker/color-picker.iife.js'\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { default:ColorPicker, any_to_hex, changeColorFormat } = window.colorPicker\n\u003c/script\u003e\n```\n\n`es` (to be used via `import` command in your bundle or moduled sciprt).\u003cbr\u003e\nThis is the default (\"main\") the package serves:\n```html\n\u003cscript src='@yaireo/color-picker'\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const { default:ColorPicker, any_to_hex, changeColorFormat } = window.colorPicker\n\u003c/script\u003e\n```\n\n\n```js\nconst cPicker = new ColorPicker({\n  // accepted formats: HEX(A), RGB(A), HSL(A), X11 color name\n  color: 'red',\n\n  // default rendered textual represention format\n  // default: 'hex'\n  defaultFormat: 'hex',\n\n  // initial class name for the component's wrapper element\n  // default: ''\n  className: 'hidden',\n\n  // to disable, set \"false\" instead of an Array\n  // default: []\n  swatches: ['red', '#666', 'rgba(10,20,30,.5)'],\n\n  // saves colors for persistance and cross-usage between picker instances\n  // default: false\n  swatchesLocalStorage: true,\n\n  // buttons text \u0026 icon\n  buttons: {\n    undo   : { icon: '\u0026curvearrowleft;', title: 'Undo' },\n    format : { icon: '\u0026leftrightarrows;', title: 'Switch Color Format' },\n    add    : { icon: '+', title: 'Add to Swatches' }\n  },\n\n  // fired rapidly, on every range slider movement or any color change\n  onInput(color){},\n\n  // like \"onInput\", but not fired while a range slider is moved\n  onChange(color){},\n\n  // helpful when the component is used as a popup\n  onClickOutside(e){}\n})\n```\n\n## Example\n\nIn the below example the color picker is used as a *popup*, so when an input of type `color` is clicked, the popup\nis shown in a way which doesn't affect the flow of the page.\n\nSince this component was designed as bare-minimum, it has no internal positioning-system\nand can be pluged with one, for example, [my own](https://github.com/yairEO/position).\n\nIn the below example, the color-picker is being bound to an input element, so when the color-picker\nis being changes, so will the other input.\n\n```html\n\u003cscript src=\"https://unpkg.com/@yaireo/position\"\u003e\u003c/script\u003e\n\u003cinput class='myColor' value='gold' style='--color:gold' /\u003e\n```\n\n```js\n// because \"@yaireo/position\" is used (in this demo) as a script file and not an node module (ES export)\nposition = position.default;\n\nconst cPicker = new ColorPicker({\n  color: myColor.value, // use the input element's value\n\n  className: 'hidden', // optional class name which will be added to the color-picker component\n\n  swatches: ['white', '#000', 'rgba(255,0,0,.3)'],\n\n  // when clicking anywhere that is not within the color picker.\n  // use special logic if clicked on the color-input which is\n  // assosiacated with this specific picker\n  onClickOutside(e){\n    let action = 'add',\n        isTargetColorInput = e.target == myColor\n\n    if( isTargetColorInput ) action = 'toggle'\n    if( e.key == 'Escape' ) action = 'add'\n\n    cPicker.DOM.scope.classList[action]('hidden')\n\n    isTargetColorInput \u0026\u0026 observerCallback()\n  },\n\n  onInput(color){\n    myColor.value = color;\n    myColor.style.setProperty('--color', color)\n  },\n})\n\n// add the color picker to the DOM\ndocument.body.appendChild(cPicker.DOM.scope)\n\n\nconst observerCallback = (entries) =\u003e {\n  !cPicker.DOM.scope.classList.contains('hidden') \u0026\u0026\n  position({ target:cPicker.DOM.scope, ref:myColor });\n}\n\nconst resizeObserver = new ResizeObserver(observerCallback)\nconst intersectionObserver = new IntersectionObserver(observerCallback, {root:document, threshold:1});\n\n\n// position the color picker next to the input element\nresizeObserver.observe(document.body)\nintersectionObserver.observe(cPicker.DOM.scope)\nobserverCallback()\n\n// re-position on window resize\nresizeObserver.observe(document.body)\n```\n\n### Listen to input external `value` changes\n\nIf your \u003cinput\u003e element's value property might change by means other than this color picker component,\nthen it is advisable to periodically check and match the color picker's internal value to the input's value.\n\n```js\nimport ColorPicker, {any_to_hex} from '@yaireo/color-picker'\n\nconst colorInput = document.querySelector('input')\nconst cPicker = new ColorPicker(...)\nconst VALUE_CHANGE_SAMPLING_DURATION = 1000\n\nsetInterval(() =\u003e {\n  const inputValue = any_to_hex(colorInput.value)\n  const pickerValue = any_to_hex(cPicker.CSSColor)\n\n  if(pickerValue != inputValue)\n    cPicker.setColor(inputValue)\n}, VALUE_CHANGE_SAMPLING_DURATION);\n```\n\n### Helper methods exported alongside the *default* `ColorPicker`\n\n\n| Name                | Parameters                      | Info                                                                                                               |\n|---------------------|---------------------------------|-------------------------------------------------------------------------------------|\n| `any_to_hex`        | `String`                        | Converts any color string to `hex` format\n| `hex_rgba`          | `String`                        | Converts `Hex` to `RGBA` format\n| `rgba_hsla`         | `String`                        | Converts `RGBA` to `HSLA` format\n| `CSStoHSLA`         | `String`                        | Converts CSS-string `HSLA` to an `HSLA` javascript Object\n| `HSLAtoCSS`         | `String`                        | Converts `HSLA` Object to CSS-string\n| `changeColorFormat` | color `string`, format `string` | Converts any color string to another color format string\n\n\n### Methods (`ColorPicker` instance)\n\n| Name             | Parameters                                                                                                                                                                                                                                                                                                  | Info                                                                                                               |\n|------------------|-----------------------|-------------------------------------------------------------------------------|\n| `setColor`       | `String`              | Sets the instance color\n| `getColorFormat` | `String`              | Gets the format of a color string: `hex`, `rgba` or `hsla`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaireo%2Fcolor-picker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyaireo%2Fcolor-picker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyaireo%2Fcolor-picker/lists"}