{"_id":"hcg-color-picker","_rev":"28-af8da8de0993edfb32510a1f7a69f8ba","name":"hcg-color-picker","dist-tags":{"latest":"2.0.6"},"versions":{"2.0.0":{"name":"hcg-color-picker","version":"2.0.0","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.0","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://github.com/html-code-generator/hcg-color-picker#readme","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"80f622453e3b894035727ae4a55621e714df33c1","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.0.tgz","fileCount":7,"integrity":"sha512-zr6I1q0ePrBXO8iR5FzS3+++oddbtC623lR54y5Y9D1QtTTSq2DV3+fWQmmsvgc+YmTEJqPgjLxoCj0G7PQjSQ==","signatures":[{"sig":"MEYCIQC89ye9Zs1ICPPLKkanbcqWhjygLW1IOR1Z/4K82vYgkAIhAIAG0Rf644uJI1/WcEiQBjcM6Fvpyd1H0qjyUMrnbCIY","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":125656},"main":"index.js","module":"index.esm.js","exports":{".":{"import":"./index.esm.js","require":"./index.js"}},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.13.0","description":"Google Chrome style color picker — lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.0_1779494647241_0.18454264921807595","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"hcg-color-picker","version":"2.0.1","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.1","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://github.com/html-code-generator/hcg-color-picker#readme","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"d9a9081066dfb16ec193254226fcf5923bb48e64","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.1.tgz","fileCount":8,"integrity":"sha512-peFtR71gtfxU9WIbY23MsNN31XGyqc9wwp87+lm0stjv5aWhWF0C6SXXuU0rvEK7/Z1iA9tXZUOSMSFjzBUGKg==","signatures":[{"sig":"MEUCIAvQN/zJNwQ6kfvRqFSZTcFPrgo0nhH8cXP7zgGmlM/GAiEA2Wo44SkAke81/lQ135gPe7w32NL/DbADYL6DwUaJTxo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":147078},"main":"index.js","module":"index.esm.js","exports":{".":{"import":"./index.esm.js","require":"./index.js"}},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.13.0","description":"Google Chrome style color picker — lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.1_1779664653984_0.6681016513895002","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"hcg-color-picker","version":"2.0.2","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.2","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://github.com/html-code-generator/hcg-color-picker#readme","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"63d47091d0c9e8735e02e987784dce26b4f42b05","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.2.tgz","fileCount":8,"integrity":"sha512-2JDFh6v4VnATRoyvP4GUAhzvdAfN8vJ2NkSgwc39Vx4NKr0/8+YMI42/wJWy+pBGP5vZAzvs4k+kdN0v2Oa9WA==","signatures":[{"sig":"MEUCIQCcdv1Hdy37JYwnVeg7Nd+hVma4AD2qmIXdOua4Ed0IpQIgPRY9EouhK/k6JElnP2teqLT+SS8qaOEGVoEptrQTJ/4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":147370},"main":"index.js","module":"index.esm.js","exports":{".":{"import":"./index.esm.js","require":"./index.js"}},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.13.0","description":"Google Chrome style color picker — lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.2_1779701854178_0.8866498406933276","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"hcg-color-picker","version":"2.0.3","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.3","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://github.com/html-code-generator/hcg-color-picker#readme","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"ecbc5b99fe2e18375503990cb85a63d780772e7a","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.3.tgz","fileCount":9,"integrity":"sha512-XdvBVdzsynEaC98xOuizoNbPO8D8vmZZ4RH/QA3q7rL6hkGgeIlQ2Yw/X7drcQb+dYqYvWgFPQ1ilkuH21hOXQ==","signatures":[{"sig":"MEUCIQCOVIafVMdIw7hG4ogJiYMrDTKdXbcV8/1Sk8A1OtAd6gIgR9VTr6mctjTm+YfnJgv1RBXhjgrTz8MYvCz1kFX3dDE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":151886},"main":"index.js","types":"index.d.ts","module":"index.esm.js","exports":{".":{"types":"./index.d.ts","import":"./index.esm.js","require":"./index.js"}},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.13.0","description":"Google Chrome style color picker — lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.3_1779897142736_0.8130667695091311","host":"s3://npm-registry-packages-npm-production"}},"2.0.4":{"name":"hcg-color-picker","version":"2.0.4","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.4","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://github.com/html-code-generator/hcg-color-picker#readme","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"4f5592542fd83c0ac8349cb26ea589d25f4eef4a","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.4.tgz","fileCount":9,"integrity":"sha512-d5BBJ2nySI2iEBNxVIIHOO6Btns8dSn6uxPM5m4VgaEk8vBi3uQC3gAYjvcNVl54geg5vZlLzZ3E3SZ2HoMyYw==","signatures":[{"sig":"MEYCIQCjQV9hocSFTPIWE1HHV4ZT03cQYhDtfgkHRzxrUMYKIgIhAKGgADjbahukz/hwd9f0GpK8ZNjKye2jH9oGJOAA0VdU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":153748},"main":"index.js","types":"index.d.ts","module":"index.esm.js","exports":{".":{"types":"./index.d.ts","import":"./index.esm.js","require":"./index.js"}},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.13.0","description":"Google Chrome style color picker — lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.4_1780006627596_0.3583662385277615","host":"s3://npm-registry-packages-npm-production"}},"2.0.5":{"name":"hcg-color-picker","version":"2.0.5","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"url":"https://www.html-code-generator.com/","name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com"},"license":"MIT","_id":"hcg-color-picker@2.0.5","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"homepage":"https://www.html-code-generator.com/javascript/chrome-style-color-picker","bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"dist":{"shasum":"581a44662cb1dfdcf14a30a8a883c0c63b3045dd","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.5.tgz","fileCount":10,"integrity":"sha512-Hsbao2+zjL4SuE6Hy+FMUkBCfKbcSswHn9C7l5g4BHIYHvLvvc91LIWKjZJmMe8omjkxHNQpe5YMIShst5kIQg==","signatures":[{"sig":"MEUCIBS5xOTbZpjaYrmyAyiiTs0j41jIg9jiU848mxVx9wEoAiEA6fg8zo570BrLiWMwTECtpNoqHUdRpuzBVJcKY0dhrps=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":165164},"main":"index.js","style":"hcg-color.css","types":"index.d.ts","module":"index.esm.js","exports":{".":{"types":"./index.d.ts","import":"./index.esm.js","require":"./index.js"},"./hcg-color.css":"./hcg-color.css"},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"repository":{"url":"git+https://github.com/html-code-generator/hcg-color-picker.git","type":"git"},"_npmVersion":"11.18.0","description":"Google Chrome style color picker - lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","directories":{},"_nodeVersion":"23.8.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/hcg-color-picker_2.0.5_1784388936555_0.7504996931650343","host":"s3://npm-registry-packages-npm-production"}},"2.0.6":{"name":"hcg-color-picker","version":"2.0.6","description":"Google Chrome style color picker - lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","main":"index.js","module":"index.esm.js","types":"index.d.ts","style":"hcg-color.css","exports":{".":{"import":"./index.esm.js","require":"./index.js","types":"./index.d.ts"},"./hcg-color.css":"./hcg-color.css"},"keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"author":{"name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com","url":"https://www.html-code-generator.com/"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/html-code-generator/hcg-color-picker.git"},"bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"homepage":"https://www.html-code-generator.com/javascript/chrome-style-color-picker","_id":"hcg-color-picker@2.0.6","_nodeVersion":"23.8.0","_npmVersion":"11.18.0","dist":{"integrity":"sha512-BJUQIxX5Ridtf7EVorvdAn44gn3cvhLTef4lWjw7hTs6jCSmzzH7OT+GivLt1Fvl1YRjrQ0aGMoPF4Qh6BmrLg==","shasum":"89b6d6876cde823f85ac3444d7d807bbdc9a5a03","tarball":"https://registry.npmjs.org/hcg-color-picker/-/hcg-color-picker-2.0.6.tgz","fileCount":10,"unpackedSize":166110,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCH3+CAo9+VUYqKthLOsi8FmVtoo4LcTj/Z3wQC8S+6nAIgEjuorVGehqIyUw7keiw1JeB3ww5+thdP0Yvv+Dl966w="}]},"_npmUser":{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"},"directories":{},"maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/hcg-color-picker_2.0.6_1784800467103_0.3021496230939724"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-20T20:34:14.349Z","modified":"2026-07-23T09:54:27.414Z","1.0.0":"2026-05-20T20:34:14.528Z","1.0.1":"2026-05-20T20:51:09.240Z","1.0.2":"2026-05-20T21:00:23.402Z","1.0.3":"2026-05-20T21:02:49.889Z","1.0.4":"2026-05-21T10:15:54.857Z","1.0.5":"2026-05-21T11:00:26.465Z","1.0.6":"2026-05-21T11:13:47.965Z","1.0.7":"2026-05-21T12:54:40.437Z","1.0.8":"2026-05-21T14:40:12.048Z","2.0.0":"2026-05-23T00:04:07.395Z","2.0.1":"2026-05-24T23:17:34.159Z","2.0.2":"2026-05-25T09:37:34.303Z","2.0.3":"2026-05-27T15:52:22.956Z","2.0.4":"2026-05-28T22:17:07.775Z","2.0.5":"2026-07-18T15:35:36.685Z","2.0.6":"2026-07-23T09:54:27.266Z"},"bugs":{"url":"https://github.com/html-code-generator/hcg-color-picker/issues"},"author":{"name":"HTML Code Generator","email":"htmlcodegenerator.com@gmail.com","url":"https://www.html-code-generator.com/"},"license":"MIT","homepage":"https://www.html-code-generator.com/javascript/chrome-style-color-picker","keywords":["color-picker","color","picker","chrome","eyedropper","rgba","hsla","alpha","vanilla-js"],"repository":{"type":"git","url":"git+https://github.com/html-code-generator/hcg-color-picker.git"},"description":"Google Chrome style color picker - lightweight, dependency-free, multiple instances, alpha support, EyeDropper API.","maintainers":[{"name":"html-code-generator","email":"htmlcodegenerator.com@gmail.com"}],"readme":"# Google Chrome Style Color Picker (hcg-color-picker)\n\nA lightweight, dependency-free Google Chrome style color picker. Supports multiple instances, alpha control, touch input, and the EyeDropper API.\n\n- **Website & demo:** [html-code-generator.com/javascript/chrome-style-color-picker](https://www.html-code-generator.com/javascript/chrome-style-color-picker)\n- **GitHub:** [github.com/html-code-generator/hcg-color-picker](https://github.com/html-code-generator/hcg-color-picker)\n\n> **Also:** [React component on GitHub](https://github.com/html-code-generator/hcg-color-picker-react)\n\n---\n\n## Preview\n\n![Color Picker](https://raw.githubusercontent.com/html-code-generator/hcg-color-picker/main/chrome-style-color-picker.PNG)\n![Color Picker Without Alpha](https://raw.githubusercontent.com/html-code-generator/hcg-color-picker/main/chrome-style-color-picker-without-alpha.PNG)\n\n---\n\n## Features\n\n- **No dependencies** - pure vanilla JavaScript\n- **Multiple instances** - each trigger remembers its own color\n- **Single shared UI** - one floating panel for all instances\n- **Three color modes** - HEX, RGBA, and HSLA inputs\n- **Alpha control** - enable or disable per instance\n- **EyeDropper API** - pick colors from the screen (Chrome / Edge)\n- **Touch support** - Pointer Events on mobile and tablet\n- **Event system** - `change`, `open`, and `close`\n- **Programmatic API** - set color, open/close, enable/disable, destroy\n- **Destroy by element** - `hcgColor.get()`, `hcgColor.destroy()`, `hcgColor.destroyAll()`\n- **Debounce option** - throttle `change` during drag\n- **TypeScript** - bundled `index.d.ts`\n\n---\n\n## Installation\n\n```bash\nnpm install hcg-color-picker\n```\n\n---\n\n## Import\n\n```js\n// ESM\nimport hcgColor from 'hcg-color-picker';\n\n// CommonJS\nconst hcgColor = require('hcg-color-picker');\n```\n\nAlso import the CSS:\n\n```js\nimport 'hcg-color-picker/hcg-color.css';\n```\n\n---\n\n## CDN\n\n**jsDelivr:**\n\n```html\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/hcg-color-picker@2.0.6/hcg-color.css\">\n<script src=\"https://cdn.jsdelivr.net/npm/hcg-color-picker@2.0.6/index.umd.min.js\"></script>\n```\n\n**unpkg:**\n\n```html\n<link rel=\"stylesheet\" href=\"https://unpkg.com/hcg-color-picker@2.0.6/hcg-color.css\">\n<script src=\"https://unpkg.com/hcg-color-picker@2.0.6/index.umd.min.js\"></script>\n```\n\nAfter the script loads, `hcgColor` is available as a global.\n\n---\n\n## Basic Usage\n\n```js\nimport hcgColor from 'hcg-color-picker';\nimport 'hcg-color-picker/hcg-color.css';\n\nconst picker = new hcgColor(\n    document.getElementById('my-color-btn'),\n    { color: '#ff0000' }\n);\n\npicker.on('change', function (colors, source) {\n    console.log(colors.hex);   // \"#ff0000\"\n    console.log(source);       // \"drag\" | \"input\" | \"api\" | \"eyedropper\"\n});\n```\n\n---\n\n## Constructor\n\n```js\nnew hcgColor(element, options)\n```\n\n| Parameter | Type          | Required | Description                |\n|-----------|---------------|----------|----------------------------|\n| `element` | `HTMLElement` | Yes      | The trigger button element |\n| `options` | `object`      | No       | Configuration (see below)  |\n\n---\n\n## Options\n\n| Option     | Type       | Default     | Description                                         |\n|------------|------------|-------------|-----------------------------------------------------|\n| `color`    | `string`   | `data-color` attr or `'#ff0000'` | Initial color - HEX, RGB, HSL formats |\n| `onChange` | `function` | -           | Shorthand change callback (same as `.on('change')`) |\n| `onOpen`   | `function` | -           | Shorthand open callback (same as `.on('open')`)     |\n| `onClose`  | `function` | -           | Shorthand close callback (same as `.on('close')`)   |\n| `alpha`    | `boolean`  | `true`      | Set to `false` to disable alpha control             |\n| `debounce` | `number`   | `0`         | ms to debounce the change event during drag (0 = off) |\n| `disabled` | `boolean`  | `false`     | Start in disabled state - also reads `element.disabled` |\n\n```js\nconst picker = new hcgColor(btn, {\n    color:    '#ff0000',\n    onChange: colors => console.log(colors.hex),\n    alpha:    true,\n    debounce: 150,\n    disabled: false\n});\n```\n\n---\n\n## Initial Color Formats\n\n```js\nnew hcgColor(el, { color: '#ff0000' });\nnew hcgColor(el, { color: '#ff0000ff' });\nnew hcgColor(el, { color: '#f00' });\nnew hcgColor(el, { color: '#f00a' });\nnew hcgColor(el, { color: 'rgb(255, 0, 0)' });\nnew hcgColor(el, { color: 'rgba(255, 0, 0, 0.5)' });\nnew hcgColor(el, { color: 'hsl(0, 100%, 50%)' });\nnew hcgColor(el, { color: 'hsla(0, 100%, 50%, 1)' });\n```\n\n---\n\n## Instance Methods\n\n### `.on(event, callback)` / `.off(event, callback)`\n\n```js\npicker.on('change', (colors, source) => {\n    console.log(colors.hexa, source);\n});\npicker.off('change', handler);\n```\n\n### `.setColor(color, silent?)` / `.getColor()`\n\n```js\npicker.setColor('#00ff00');\npicker.setColor('#00ff00', true); // silent: no change event\nconst colors = picker.getColor();\n```\n\n### `.setAlphaEnabled(boolean)`\n\n```js\npicker.setAlphaEnabled(false);\n```\n\n### `.open()` / `.close()` / `.isOpen`\n\n```js\npicker.open();\npicker.close();\nif (picker.isOpen) picker.close();\n```\n\n### `.disable()` / `.enable()`\n\n```js\npicker.disable();\npicker.enable();\n```\n\n### `.destroy()`\n\n```js\npicker.destroy();\n```\n\n---\n\n## Static Methods\n\nLook up or destroy a picker without keeping the instance from `new hcgColor()`.\n\n### `hcgColor.get(element | selector)`\n\n```js\nconst picker = hcgColor.get('#my-btn');\nif (picker) picker.setColor('#00ff00');\n```\n\n### `hcgColor.destroy(element | selector)`\n\n```js\nnew hcgColor(document.getElementById('my-btn'), { color: '#ff0000' });\nhcgColor.destroy('#my-btn'); // true\n```\n\n### `hcgColor.destroyAll()`\n\n```js\nhcgColor.destroyAll();\n```\n\n---\n\n## Events\n\n| Event    | Callback args         | Description                        |\n|----------|-----------------------|------------------------------------|\n| `change` | `colors, source`      | Fired every time the color changes |\n| `open`   | `hex`                 | Fired when the picker opens        |\n| `close`  | `hex`                 | Fired when the picker closes       |\n\n### `colors` object\n\n```js\n{\n    hex:  \"#ff0000\",\n    hexa: \"#ff0000ff\",\n    rgb:  \"rgb(255, 0, 0)\",\n    rgba: \"rgba(255, 0, 0, 1)\",\n    hsl:  \"hsl(0, 100%, 50%)\",\n    hsla: \"hsla(0, 100%, 50%, 1)\"\n}\n```\n\n### `source` string\n\n| Value          | Triggered by                              |\n|----------------|-------------------------------------------|\n| `\"drag\"`       | Dragging the color box, hue, or alpha slider |\n| `\"input\"`      | Typing into HEX, RGBA, or HSLA inputs     |\n| `\"api\"`        | Calling `.setColor()` programmatically    |\n| `\"eyedropper\"` | Picking a color with the EyeDropper API   |\n\n---\n\n## Multiple Instances\n\n```js\nconst picker1 = new hcgColor(document.getElementById('btn1'), { color: '#ff0000' });\nconst picker2 = new hcgColor(document.getElementById('btn2'), { color: '#0000ff' });\nconst picker3 = new hcgColor(document.getElementById('btn3'), { color: '#00ff00', alpha: false });\n```\n\n---\n\n## TypeScript\n\n```ts\nimport hcgColor, { HcgColorSet, HcgColorSource, HcgColorOptions } from 'hcg-color-picker';\nimport 'hcg-color-picker/hcg-color.css';\n\nconst btn = document.getElementById('my-color-btn') as HTMLButtonElement;\n\nconst picker = new hcgColor(btn, {\n    color:    '#ff0000',\n    alpha:    true,\n    debounce: 150,\n} satisfies HcgColorOptions);\n\npicker.on('change', (colors: HcgColorSet, source: HcgColorSource) => {\n    console.log(colors.hex, source);\n});\n\nhcgColor.destroy('#my-color-btn');\n```\n\n---\n\n## Browser Support\n\n| Feature         | Support                                   |\n|-----------------|-------------------------------------------|\n| Color picker UI | All modern browsers                       |\n| Touch events    | iOS Safari, Android Chrome               |\n| EyeDropper API  | Chrome 95+, Edge 95+ (not Firefox/Safari) |\n\n---\n\n## Links\n\n- Website & demo: https://www.html-code-generator.com/javascript/chrome-style-color-picker\n- GitHub: https://github.com/html-code-generator/hcg-color-picker\n\n---\n\n## Changelog\n\nSee [CHANGELOG.md](CHANGELOG.md) for version history.\n\n---\n\n## License\n\nMIT\n","readmeFilename":"README.md"}