{"id":48783608,"url":"https://github.com/node-projects/pickr-webcomponent","last_synced_at":"2026-04-16T18:01:15.302Z","repository":{"id":350535946,"uuid":"1207266986","full_name":"node-projects/pickr-webcomponent","owner":"node-projects","description":"a color picker webcomponent (created from https://github.com/simonwep/pickr)","archived":false,"fork":false,"pushed_at":"2026-04-15T16:23:04.000Z","size":66,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-04-15T17:13:26.255Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/node-projects.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-10T18:54:45.000Z","updated_at":"2026-04-15T16:23:08.000Z","dependencies_parsed_at":"2026-04-16T18:01:00.967Z","dependency_job_id":null,"html_url":"https://github.com/node-projects/pickr-webcomponent","commit_stats":null,"previous_names":["node-projects/pickr-webcomponent"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/node-projects/pickr-webcomponent","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fpickr-webcomponent","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fpickr-webcomponent/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fpickr-webcomponent/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fpickr-webcomponent/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/node-projects","download_url":"https://codeload.github.com/node-projects/pickr-webcomponent/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/node-projects%2Fpickr-webcomponent/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31897870,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T17:33:00.867Z","status":"ssl_error","status_checked_at":"2026-04-16T17:32:57.401Z","response_time":69,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2026-04-13T15:30:34.397Z","updated_at":"2026-04-16T18:01:15.256Z","avatar_url":"https://github.com/node-projects.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3 align=\"center\"\u003e\n    \u003cimg src=\"https://user-images.githubusercontent.com/30767528/57573928-1e78db80-7430-11e9-940c-aecbf3226b7c.png\" alt=\"Logo\"\u003e\n\u003c/h3\u003e\n\n\u003ch3 align=\"center\"\u003e\n    Flat, simple, hackable color picker web components.\n\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ccode\u003e@node-projects/pickr-webcomponent\u003c/code\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003e **About this fork**\n\u003e This repository is a rewrite of [simonwep/pickr](https://github.com/simonwep/pickr)\n\u003e as native web components. The original project is frozen upstream — see the\n\u003e note in its README. This fork keeps the look and color logic of pickr but\n\u003e drops the monolithic `Pickr.create({el})` API, the popup/positioning engine,\n\u003e SCSS, and the webpack build. The three themes are now standalone custom\n\u003e elements with shadow DOM and `adoptedStyleSheets`, shipped as plain ES modules.\n\u003e\n\u003e Credit for the original design, color math and SCSS goes to\n\u003e [Simon Reinisch](https://github.com/Simonwep) and pickr's contributors.\n\n### Features\n* 🧩 **Web components** — `\u003cpickr-classic\u003e`, `\u003cpickr-monolith\u003e`, `\u003cpickr-nano\u003e`\n* 🌑 **Shadow DOM** — fully encapsulated, styles applied via `adoptedStyleSheets`\n* 🚫 **Zero dependencies** — no bundler, no framework, no build step\n* 🎨 Three themes (classic, monolith, nano)\n* 🌈 Multiple color representations (HEX, RGBA, HSLA, HSVA, CMYK)\n* 🔍 Color comparison (current vs. previous)\n* 🎚️ Opacity control\n* 🖱️ Detail adjustments via mouse-wheel\n* 👆 Touch support\n* 🎨 Swatches for quick selection\n* ♿ Accessible with keyboard navigation and i18n\n* 🪟 **No popup** — the component is the picker; you place it wherever you want\n\n\u003e **Breaking change vs. upstream pickr**\n\u003e The old jQuery-like `Pickr.create({el})` API is gone. Pickr is now a set of\n\u003e web components that render inline. Positioning, popups, toggling and click-outside\n\u003e are no longer handled by this library — wrap the component in your own dialog,\n\u003e popover or drawer if you need that behavior.\n\n### Themes\n| Classic | Monolith | Nano |\n|---------|----------|------|\n| ![Classic](https://user-images.githubusercontent.com/30767528/59562615-01d35300-902f-11e9-9f07-44c9d16dbb99.png) | ![Monolith](https://user-images.githubusercontent.com/30767528/59562603-c9cc1000-902e-11e9-9c84-1a606fa5f206.png) | ![Nano](https://user-images.githubusercontent.com/30767528/59562578-8ec9dc80-902e-11e9-9882-2dacad5e6fa5.png) |\n\n## Getting started\n\n### Install\n\n```shell\nnpm install @node-projects/pickr-webcomponent\n```\n\nNo bundler needed — everything ships as plain ES modules. Styles are inlined into\nthe components as constructable stylesheets; there is nothing extra to import.\n\n### From HTML (attributes)\n\n```html\n\u003cscript type=\"module\"\u003e\n  import '@node-projects/pickr-webcomponent';\n\u003c/script\u003e\n\n\u003cpickr-classic default=\"#42445a\"\u003e\u003c/pickr-classic\u003e\n\u003cpickr-monolith default=\"#ff3366\" lock-opacity\u003e\u003c/pickr-monolith\u003e\n\u003cpickr-nano default=\"rgb(34, 139, 230)\" swatches=\"#f00,#0f0,#00f,#ff0\"\u003e\u003c/pickr-nano\u003e\n```\n\n### From JavaScript (property)\n\n```js\nimport {PickrClassic} from '@node-projects/pickr-webcomponent';\n\nconst el = document.createElement('pickr-classic');\nel.config = {\n    default: '#42445a',\n    swatches: [\n        '#f44336', '#e91e63', '#9c27b0',\n        '#673ab7', '#3f51b5', '#2196f3'\n    ],\n    components: {\n        preview: true,\n        opacity: true,\n        hue: true,\n        interaction: {\n            hex: true,\n            rgba: true,\n            hsla: true,\n            input: true,\n            clear: true,\n            save: true\n        }\n    }\n};\ndocument.body.appendChild(el);\n\nel.addEventListener('change',  e =\u003e console.log('change',  e.detail));\nel.addEventListener('save',    e =\u003e console.log('save',    e.detail));\nel.addEventListener('cancel',  e =\u003e console.log('cancel',  e.detail));\n```\n\n### CDN / no bundler\n\n```html\n\u003cscript type=\"module\"\u003e\n  import 'https://cdn.jsdelivr.net/npm/@node-projects/pickr-webcomponent/lib/js/pickr-classic.js';\n\u003c/script\u003e\n\n\u003cpickr-classic default=\"#42445a\"\u003e\u003c/pickr-classic\u003e\n```\n\n## Attributes\n\nEvery component supports the following attributes. All are reactive — changing\nan attribute rebuilds the component with the new config.\n\n| Attribute                | Type       | Default  | Description |\n|--------------------------|------------|----------|-------------|\n| `default`                | color      | `#42445a`| Initial color. Any CSS color is accepted (`#rgb`, `rgba()`, `hsl()`, named, etc.). |\n| `default-representation` | string     | —        | `HEX`, `HEXA`, `RGBA`, `HSLA`, `HSVA` or `CMYK`. Determines the input-field format. |\n| `comparison`             | `\"false\"`  | `true`   | Set to `\"false\"` to disable the \"current vs. previous\" preview. |\n| `lock-opacity`           | boolean    | `false`  | Presence hides the opacity slider. |\n| `output-precision`       | number     | `0`      | Decimal precision of the color string in the input field. |\n| `adjustable-numbers`     | `\"false\"`  | `true`   | Set to `\"false\"` to disable mouse-wheel tweaking of numbers in the input. |\n| `sliders`                | `v` \\| `h` \\| `hv` | theme default | Orientation of the hue and opacity sliders. |\n| `swatches`               | csv        | —        | Comma-separated list of colors: `swatches=\"#f00,#0f0,#00f\"`. |\n| `components`             | JSON       | —        | JSON object shaped like the `components` config, e.g. `components='{\"hue\":false}'`. |\n| `i18n`                   | JSON       | —        | JSON object mapping i18n keys to strings. |\n\nExamples:\n\n```html\n\u003c!-- Minimal, everything at defaults --\u003e\n\u003cpickr-classic\u003e\u003c/pickr-classic\u003e\n\n\u003c!-- Custom default color and swatches --\u003e\n\u003cpickr-classic\n    default=\"#2ecc71\"\n    swatches=\"#e74c3c, #3498db, #f1c40f, #9b59b6, #1abc9c\"\u003e\n\u003c/pickr-classic\u003e\n\n\u003c!-- Disable opacity, hide CMYK button, show only hex input --\u003e\n\u003cpickr-monolith\n    lock-opacity\n    default-representation=\"HEXA\"\n    components='{\"hue\":true,\"interaction\":{\"hex\":true,\"input\":true,\"save\":true}}'\u003e\n\u003c/pickr-monolith\u003e\n\n\u003c!-- Disable live comparison; updates happen instantly --\u003e\n\u003cpickr-nano comparison=\"false\" default=\"#42445a\"\u003e\u003c/pickr-nano\u003e\n```\n\n## Config (JavaScript)\n\nAttributes cover the common cases; for anything more complex, assign the\n`config` property. It deep-merges with the current config (and the defaults),\nso you only pass what you want to change:\n\n```js\nel.config = {\n    default: '#42445a',\n    comparison: true,\n    outputPrecision: 0,\n    lockOpacity: false,\n    adjustableNumbers: true,\n    sliders: 'v',                  // 'v', 'h', 'hv' — theme default if unset\n    defaultRepresentation: 'HEXA', // HEXA | RGBA | HSLA | HSVA | CMYK\n    swatches: ['#f00', '#0f0', '#00f'],\n\n    components: {\n        preview: true,    // current vs. previous preview\n        opacity: true,    // opacity slider\n        hue: true,        // hue slider\n        palette: true,    // color palette (implied if any of the above is true)\n\n        interaction: {\n            hex:    true,\n            rgba:   true,\n            hsla:   true,\n            hsva:   true,\n            cmyk:   true,\n            input:  true, // the text input field\n            cancel: true,\n            clear:  true,\n            save:   true\n        }\n    },\n\n    i18n: {\n        'ui:dialog':      'color picker dialog',\n        'btn:swatch':     'color swatch',\n        'btn:last-color': 'use previous color',\n        'btn:save':       'Save',\n        'btn:cancel':     'Cancel',\n        'btn:clear':      'Clear',\n        'aria:btn:save':   'save and close',\n        'aria:btn:cancel': 'cancel and close',\n        'aria:btn:clear':  'clear and close',\n        'aria:input':      'color input field',\n        'aria:palette':    'color selection area',\n        'aria:hue':        'hue selection slider',\n        'aria:opacity':    'opacity selection slider'\n    }\n};\n```\n\n## Events\n\nEvents are dispatched as `CustomEvent`s on the component. They bubble and cross\nthe shadow boundary (`composed: true`), so you can listen on an ancestor if you\nprefer. Every event's `detail` is `{value, instance}` where `instance` is the\ncomponent itself.\n\n| Event          | `detail.value`                            | Fired when |\n|----------------|-------------------------------------------|------------|\n| `init`         | `undefined`                               | Component is ready after connection. |\n| `change`       | `{color, source}`                         | Color changed (not yet applied). `color` is `HSVaColor` or `null`; `source` is `slider`, `input` or `swatch`. |\n| `changestop`   | source string                             | User stopped dragging / typing. |\n| `save`         | `HSVaColor` or `null`                     | Save button clicked (`null` after clear). |\n| `clear`        | `undefined`                               | Clear button clicked. |\n| `cancel`       | `undefined`                               | Cancel button clicked (reverts to the last saved color). |\n| `swatchselect` | `HSVaColor`                               | A swatch was clicked. |\n\n```js\nel.addEventListener('change', e =\u003e {\n    const {color, source} = e.detail.value;\n    console.log('changed to', color ? color.toRGBA().toString(0) : 'null', 'via', source);\n});\n\nel.addEventListener('save', e =\u003e {\n    console.log('saved', e.detail.value);\n});\n```\n\n## The HSVaColor object\n\nPickr stores color in HSVa internally and exposes converters:\n\n```js\nconst c = el.getColor();\n\nif (c) {\n    c.toHSVA();  // [h, s, v, a]\n    c.toHSLA();  // [h, s, l, a]\n    c.toRGBA();  // [r, g, b, a]\n    c.toHEXA();  // ['FF','AA','22', ...]\n    c.toCMYK();  // [c, m, y, k]\n    c.clone();\n}\n```\n\nEach returned array has an overridden `toString()`:\n\n```js\nc.toRGBA().toString();   // \"rgba(r, g, b, a)\"\nc.toRGBA().toString(3);  // \"rgba(r, g, b, a)\" rounded to 3 decimals\n```\n\n## Methods\n\nWeb components are regular DOM nodes, so you interact with them as such.\n\n| Method | Description |\n|---|---|\n| `el.setColor(str, silent?)` | Parse a color string, or clear when passed `null`, `''` or `'null'`. Returns `true` if accepted. |\n| `el.setHSVA(h, s, v, a, silent?)` | Set color directly. Returns `true` if accepted. |\n| `el.getColor()` | Current `HSVaColor` or `null`. |\n| `el.getSelectedColor()` | Last saved `HSVaColor` or `null`. |\n| `el.setColorRepresentation(type)` | Switch the input-field format (`HEX`, `RGBA`, …). |\n| `el.getColorRepresentation()` | Current format. |\n| `el.applyColor(silent?)` | Same as pressing Save. |\n| `el.addSwatch(color)` | Append a swatch. |\n| `el.removeSwatch(index)` | Remove a swatch by index. |\n| `el.getRoot()` | Internal shadow-DOM tree (advanced). |\n| `el.config = {...}` | Merge a new config and rebuild. |\n\nTo remove an instance, just remove the element: `el.remove()`. Its\n`disconnectedCallback` tears everything down.\n\n## Popups and positioning\n\nPickr 2.x is deliberately unopinionated about popup UI. The component renders\ninline wherever you put it. If you want it to appear on click, wrap it in your\npreferred popover primitive (`\u003cdialog\u003e`, `\u003cdetails\u003e`, a framework component, a\n`popover` attribute, etc.):\n\n```html\n\u003cbutton id=\"trigger\"\u003ePick color\u003c/button\u003e\n\u003cdialog id=\"dlg\"\u003e\n    \u003cpickr-classic id=\"pkr\" default=\"#42445a\"\u003e\u003c/pickr-classic\u003e\n\u003c/dialog\u003e\n\n\u003cscript type=\"module\"\u003e\n    import '@node-projects/pickr-webcomponent';\n\n    const dlg = document.getElementById('dlg');\n    const pkr = document.getElementById('pkr');\n    document.getElementById('trigger').onclick = () =\u003e dlg.showModal();\n    pkr.addEventListener('save', () =\u003e dlg.close());\n\u003c/script\u003e\n```\n\n## More examples\n\nSee [`EXAMPLES.md`](EXAMPLES.md).\n\n## Credits\n\nDerived from [simonwep/pickr](https://github.com/simonwep/pickr) by\n[Simon Reinisch](https://github.com/Simonwep) and contributors, released under\nthe MIT license. This fork is maintained independently under\n[@node-projects](https://github.com/node-projects); please file bugs and PRs\nspecific to the web-component rewrite here, not upstream.\n\n## Contributing\n\nOpen issues and pull requests on\n[GitHub](https://github.com/node-projects/pickr-webcomponent).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fpickr-webcomponent","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnode-projects%2Fpickr-webcomponent","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnode-projects%2Fpickr-webcomponent/lists"}