{"id":13495213,"url":"https://github.com/web-padawan/vanilla-colorful","last_synced_at":"2025-05-14T13:06:27.864Z","repository":{"id":38447963,"uuid":"291960220","full_name":"web-padawan/vanilla-colorful","owner":"web-padawan","description":"A tiny color picker custom element for modern web apps (2.7 KB) 🎨","archived":false,"fork":false,"pushed_at":"2024-09-06T12:03:58.000Z","size":1982,"stargazers_count":827,"open_issues_count":7,"forks_count":28,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-05-10T20:03:17.133Z","etag":null,"topics":["color","color-picker","colorpicker","custom-element","custom-elements","vanilla","web-component","web-components","webcomponents"],"latest_commit_sha":null,"homepage":"https://web-padawan.github.io/vanilla-colorful/","language":"TypeScript","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/web-padawan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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-09-01T09:53:58.000Z","updated_at":"2025-05-03T13:55:27.000Z","dependencies_parsed_at":"2024-01-16T09:53:36.021Z","dependency_job_id":"88bfbfde-d1a7-4ca4-b8cf-eca13b7669ae","html_url":"https://github.com/web-padawan/vanilla-colorful","commit_stats":{"total_commits":206,"total_committers":4,"mean_commits":51.5,"dds":"0.014563106796116498","last_synced_commit":"b81455e7d1cb81979d2cf6dd151147766062fa79"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-colorful","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-colorful/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-colorful/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/web-padawan%2Fvanilla-colorful/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/web-padawan","download_url":"https://codeload.github.com/web-padawan/vanilla-colorful/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149953,"owners_count":22022851,"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","custom-element","custom-elements","vanilla","web-component","web-components","webcomponents"],"created_at":"2024-07-31T19:01:32.519Z","updated_at":"2025-05-14T13:06:22.847Z","avatar_url":"https://github.com/web-padawan.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://web-padawan.github.io/vanilla-colorful/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/web-padawan/vanilla-colorful/master/screenshot.png\" width=\"220\" height=\"220\" alt=\"Screenshot of the color picker\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://npmjs.org/package/vanilla-colorful\"\u003e\n    \u003cimg alt=\"npm\" src=\"https://img.shields.io/npm/v/vanilla-colorful.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/web-padawan/vanilla-colorful/actions\"\u003e\n    \u003cimg alt=\"build\" src=\"https://github.com/web-padawan/vanilla-colorful/workflows/tests/badge.svg\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://bundlephobia.com/result?p=vanilla-colorful\"\u003e\n    \u003cimg alt=\"gzip size\" src=\"https://badgen.net/bundlephobia/minzip/vanilla-colorful\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://npmjs.org/package/vanilla-colorful\"\u003e\n    \u003cimg alt=\"no dependencies\" src=\"https://badgen.net/bundlephobia/dependency-count/vanilla-colorful\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003evanilla-colorful\u003c/strong\u003e is a port of \u003ca href=\"https://github.com/omgovich/react-colorful\"\u003ereact-colorful\u003c/a\u003e to vanilla Custom Elements.\n\u003c/div\u003e\n\n## Features\n\n- 🗜 **Small**: Just 2,7 KB (minified and gzipped). [Size Limit](https://github.com/ai/size-limit) controls the size.\n- 🚀 **Fast**: Built with standards based Custom Elements.\n- 🛡 **Bulletproof**: Written in strict TypeScript and has 100% test coverage.\n- 🗂 **Typed**: Ships with [types included](#typescript-support).\n- 😍 **Simple**: The interface is straightforward and easy to use.\n- 💬 **Accessible**: Follows the [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) guidelines to support users of assistive technologies.\n- 📲 **Mobile-friendly**: Works well on mobile devices and touch screens.\n- 👫 **Framework-agnostic**: Can be used [with any framework](https://custom-elements-everywhere.com/).\n- 💨 **No dependencies**\n\n## Live demos\n\n- [Website](https://web-padawan.github.io/vanilla-colorful/)\n- [Angular example](https://stackblitz.com/edit/angular-vanilla-colorful?file=src/app/example.component.ts)\n- [Lit example](https://lit.dev/playground/#project=W3sibmFtZSI6ImluZGV4Lmh0bWwiLCJjb250ZW50IjoiPCFET0NUWVBFIGh0bWw-XG48aGVhZD5cbiAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwiLi9jb2xvci1leGFtcGxlLmpzXCI-PC9zY3JpcHQ-XG48L2hlYWQ-XG48Ym9keT5cbiAgPHN0eWxlPlxuICAgIC53cmFwcGVyIHtcbiAgICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICBhbGlnbi1pdGVtczogY2VudGVyO1xuICAgICAgbWluLWhlaWdodDogMTAwdmg7XG4gICAgICBmb250LWZhbWlseTogLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LCBcIlNlZ29lIFVJXCIsIFJvYm90bywgT3h5Z2VuLVNhbnMsIFVidW50dSwgQ2FudGFyZWxsLCBcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7ICAgIFxuICAgIH1cbiAgPC9zdHlsZT5cbiAgPGRpdiBjbGFzcz1cIndyYXBwZXJcIj5cbiAgICA8Y29sb3ItZXhhbXBsZT48L2NvbG9yLWV4YW1wbGU-XG4gIDwvZGl2PlxuPC9ib2R5PlxuIn0seyJuYW1lIjoiY29sb3ItZXhhbXBsZS5qcyIsImNvbnRlbnQiOiJpbXBvcnQgeyBMaXRFbGVtZW50LCBodG1sLCBjc3MgfSBmcm9tICdsaXQnO1xuaW1wb3J0ICd2YW5pbGxhLWNvbG9yZnVsJztcblxuZXhwb3J0IGNsYXNzIENvbG9yRXhhbXBsZSBleHRlbmRzIExpdEVsZW1lbnQge1xuICBzdGF0aWMgZ2V0IHByb3BlcnRpZXMoKSB7XG4gICAgcmV0dXJuIHtcbiAgICAgIGNvbG9yOiB7IHR5cGU6IFN0cmluZyB9LFxuICAgIH07XG4gIH1cblxuICBzdGF0aWMgZ2V0IHN0eWxlcygpIHtcbiAgICByZXR1cm4gY3NzYFxuICAgICAgb3V0cHV0IHtcbiAgICAgICAgZGlzcGxheTogYmxvY2s7XG4gICAgICAgIG1hcmdpbi10b3A6IDEwcHg7XG4gICAgICAgIGZvbnQtc2l6ZTogMS4yNXJlbTtcbiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xuICAgICAgfVxuICAgIGA7XG4gIH1cblxuICBjb25zdHJ1Y3RvcigpIHtcbiAgICBzdXBlcigpO1xuICAgIHRoaXMuY29sb3IgPSAnIzFlODhlNSc7XG4gIH1cblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIGh0bWxgXG4gICAgICA8aGV4LWNvbG9yLXBpY2tlclxuICAgICAgICAuY29sb3I9XCIke3RoaXMuY29sb3J9XCJcbiAgICAgICAgQGNvbG9yLWNoYW5nZWQ9XCIke3RoaXMuaGFuZGxlQ29sb3JDaGFuZ2VkfVwiXG4gICAgICA-PC9oZXgtY29sb3ItcGlja2VyPlxuICAgICAgPG91dHB1dD4ke3RoaXMuY29sb3J9PC9vdXRwdXQ-XG4gICAgYDtcbiAgfVxuXG4gIGhhbmRsZUNvbG9yQ2hhbmdlZChldmVudCkge1xuICAgIHRoaXMuY29sb3IgPSBldmVudC5kZXRhaWwudmFsdWU7XG4gIH1cbn1cblxuY3VzdG9tRWxlbWVudHMuZGVmaW5lKCdjb2xvci1leGFtcGxlJywgQ29sb3JFeGFtcGxlKTtcbiJ9XQ)\n- [React example](https://components.studio/edit/dXQXpT6ggwihpoxPqioI)\n- [Svelte example](https://components.studio/edit/CpWY9ofL287dfvJaQJIA)\n- [Vue example](https://components.studio/edit/xACXVNs47cgdWFSafS70)\n\n## Install\n\n```\nnpm install vanilla-colorful --save\n```\n\nOr use one of the following content delivery networks:\n\n[unpkg.com CDN](https://unpkg.com/vanilla-colorful?module):\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/vanilla-colorful?module\"\u003e\u003c/script\u003e\n```\n\n[Skypack CDN](https://cdn.skypack.dev/vanilla-colorful):\n\n```html\n\u003cscript type=\"module\" src=\"https://cdn.skypack.dev/vanilla-colorful\"\u003e\u003c/script\u003e\n```\n\n[JSPM CDN](https://jspm.org):\n\n```html\n\u003cscript type=\"module\" src=\"https://jspm.dev/vanilla-colorful\"\u003e\u003c/script\u003e\n```\n\n[ESM CDN](https://esm.sh):\n\n```html\n\u003cscript type=\"module\" src=\"https://esm.sh/vanilla-colorful\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n```html\n\u003chex-color-picker color=\"#1e88e5\"\u003e\u003c/hex-color-picker\u003e\n\u003cscript type=\"module\"\u003e\n  import 'vanilla-colorful';\n\n  const picker = document.querySelector('hex-color-picker');\n  picker.addEventListener('color-changed', (event) =\u003e {\n    // get updated color value\n    const newColor = event.detail.value;\n  });\n\n  // get current color value\n  console.log(picker.color);\n\u003c/script\u003e\n```\n\n## ES modules\n\n**vanilla-colorful** is authored using ES modules which are [natively supported](https://caniuse.com/es6-module)\nby modern browsers. However, all the code examples listed here use so-called \"bare module specifiers\":\n`import 'vanilla-colorful'`.\n\nThere is now a feature in the HTML Standard called [import maps](https://html.spec.whatwg.org/multipage/webappapis.html#import-maps)\nthat enables resolving bare module specifiers without requiring any tools. As of October 2022, import\nmaps are not yet [shipped](https://caniuse.com/import-maps) in all browsers.\n\nIn the meantime, we recommend using one of the tools that leverage ES modules based development, such as\n[`vite`](https://vitejs.dev), [`@web/dev-server`](https://modern-web.dev/docs/dev-server/overview/),\nor [`wmr`](https://www.npmjs.com/package/wmr). None of these tools are needed when importing from CDN.\n\n## Supported color models\n\nThe default **vanilla-colorful**'s input/output format is a HEX string (like `#ffffff`). In case if\nyou need another color model, we provide 12 additional color picker bundles.\n\n\u003cdetails\u003e\n  \u003csummary\u003eHow to use another color model\u003c/summary\u003e\n\n#### Available pickers\n\n| File to import                  | HTML element                 | Value example                      |\n| ------------------------------- | ---------------------------- | ---------------------------------- |\n| `\"hex-color-picker.js\"`         | `\u003chex-color-picker\u003e`         | `\"#ffffff\"`                        |\n| `\"hex-alpha-color-picker.js\"`   | `\u003chex-alpha-color-picker\u003e`   | `\"#ffffff88\"`                      |\n| `\"hsl-color-picker.js\"`         | `\u003chsl-color-picker\u003e`         | `{ h: 0, s: 0, l: 100 }`           |\n| `\"hsl-string-color-picker.js\"`  | `\u003chsl-string-color-picker\u003e`  | `\"hsl(0, 0%, 100%)\"`               |\n| `\"hsla-color-picker.js\"`        | `\u003chsla-color-picker\u003e`        | `{ h: 0, s: 0, l: 100, a: 1 }`     |\n| `\"hsla-string-color-picker.js\"` | `\u003chsla-string-color-picker\u003e` | `\"hsla(0, 0%, 100%, 1)\"`           |\n| `\"hsv-color-picker.js\"`         | `\u003chsv-color-picker\u003e`         | `{ h: 0, s: 0, v: 100 }`           |\n| `\"hsv-string-color-picker.js\"`  | `\u003chsv-string-color-picker\u003e`  | `\"hsv(0, 0%, 100%)\"`               |\n| `\"hsva-color-picker.js\"`        | `\u003chsva-color-picker\u003e`        | `{ h: 0, s: 0, v: 100, a: 1 }`     |\n| `\"hsva-string-color-picker.js\"` | `\u003chsva-string-color-picker\u003e` | `\"hsva(0, 0%, 100%, 1)\"`           |\n| `\"rgb-color-picker.js\"`         | `\u003crgb-color-picker\u003e`         | `{ r: 255, g: 255, b: 255 }`       |\n| `\"rgba-color-picker.js\"`        | `\u003crgba-color-picker\u003e`        | `{ r: 255, g: 255, b: 255, a: 1 }` |\n| `\"rgb-string-color-picker.js\"`  | `\u003crgb-string-color-picker\u003e`  | `\"rgb(255, 255, 255)\"`             |\n| `\"rgba-string-color-picker.js\"` | `\u003crgba-string-color-picker\u003e` | `\"rgba(255, 255, 255, 1)\"`         |\n\n#### Code example\n\n```html\n\u003crgba-color-picker\u003e\u003c/rgba-color-picker\u003e\n\u003cscript type=\"module\"\u003e\n  import 'vanilla-colorful/rgba-color-picker.js';\n\n  const picker = document.querySelector('rgba-color-picker');\n  picker.color = { r: 50, g: 100, b: 150, a: 1 };\n\u003c/script\u003e\n```\n\n\u003c/details\u003e\n\n## Overriding styles\n\n**vanilla-colorful** exposes [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part)\nallowing to override the default styles:\n\n```css\nhex-color-picker {\n  height: 250px;\n}\n\nhex-color-picker::part(saturation) {\n  bottom: 30px;\n  border-radius: 3px 3px 0 0;\n}\n\nhex-color-picker::part(hue) {\n  height: 30px;\n  border-radius: 0 0 3px 3px;\n}\n\nhex-color-picker::part(saturation-pointer) {\n  border-radius: 5px;\n}\n\nhex-color-picker::part(hue-pointer) {\n  border-radius: 2px;\n  width: 15px;\n  height: inherit;\n}\n```\n\n## HEX input\n\n**vanilla-colorful** provides an additional `\u003chex-input\u003e` element that can be used to type a color:\n\n```html\n\u003chex-input color=\"#1e88e5\"\u003e\u003c/hex-input\u003e\n\u003cscript type=\"module\"\u003e\n  import 'vanilla-colorful/hex-input.js';\n\n  const input = document.querySelector('hex-input');\n  input.addEventListener('color-changed', (event) =\u003e {\n    const newColor = event.detail.value;\n  });\n\u003c/script\u003e\n```\n\n`\u003chex-input\u003e` renders an unstyled `\u003cinput\u003e` element inside a slot and exposes it for styling using\n`part`. You can also pass your own `\u003cinput\u003e` element as a child if you want to fully configure it.\n\nIn addition to `color` property, `\u003chex-input\u003e` supports the following boolean properties:\n\n| Property   | Default | Description                                  |\n| ---------- | ------- | -------------------------------------------- |\n| `alpha`    | `false` | Allows `#rgba` and `#rrggbbaa` color formats |\n| `prefixed` | `false` | Enables `#` prefix displaying                |\n\n## Base classes\n\n**vanilla-colorful** provides a set of base classes that can be imported without registering custom\nelements. This is useful if you want to create your own color picker with a different tag name.\n\n```js\nimport { RgbBase } from 'vanilla-colorful/lib/entrypoints/rgb.js';\n\ncustomElements.define('custom-color-picker', class extends RgbBase {});\n```\n\n## Code Recipes\n\n- [Custom styles and layout](https://webcomponents.dev/edit/VRYGVWFu1LIQGN7aXO54/www/styles.css)\n- [Prevent flash of unstyled content](https://webcomponents.dev/edit/NpMKtEifbhOKOw91El9Z/www/index.html)\n- [Prevent flash of unstyled content (picker with alpha)](https://webcomponents.dev/edit/D3XAGOGkyc7yMVyWefkl/www/index.html)\n- [Text field to be able to type/copy/paste a color](https://webcomponents.dev/edit/zz7e9YqnJsqtmdkWL9GI/www/index.html)\n\n## TypeScript support\n\n**vanilla-colorful** supports TypeScript and ships with types in the library itself; no need for any other install.\n\n\u003cdetails\u003e\n  \u003csummary\u003eHow you can get the most from our TypeScript support\u003c/summary\u003e\n\n### Custom types\n\nWhile not only typing its own class methods and variables, it can also help you type yours. Depending on\nthe element you are using, you can also import the type that is associated with the element.\nFor example, if you are using our `\u003chsl-color-picker\u003e` element, you can also import the `HslColor` type.\n\n```ts\nimport type { HslColor } from 'vanilla-colorful/hsl-color-picker';\n\nconst myHslValue: HslColor = { h: 0, s: 0, l: 0 };\n```\n\n### Typed events\n\nAll the included custom elements provide overrides for `addEventListener` and `removeEventListener` methods\nto include typings for the `color-changed` custom event `detail` property:\n\n```ts\nconst picker = document.querySelector('rgba-color-picker');\n\npicker.addEventListener('color-changed', (event) =\u003e {\n  console.log(event.detail.value.a); // (property) RgbaColor.a: number\n});\n```\n\n### Lit plugin\n\nAll the included custom elements are compatible with [lit-analyzer](https://www.npmjs.com/package/lit-analyzer) and\n[lit-plugin](https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin) extension for Visual\nStudio Code, so you can benefit from type checking in [Lit](https://lit.dev) templates, for example\n[validating binding names](https://github.com/runem/lit-analyzer/blob/master/docs/readme/rules.md#validating-binding-names).\n\n\u003c/details\u003e\n\n## Browser support\n\n**vanilla-colorful** uses [Custom Elements](https://caniuse.com/#feat=custom-elementsv1) and [Shadow DOM](https://caniuse.com/#feat=shadowdomv1),\nand does not support IE11 or legacy Edge.\n\n## Why vanilla-colorful?\n\n**vanilla-colorful** has all the benefits of [react-colorful](https://github.com/omgovich/react-colorful#why-react-colorful)\nwith one important difference.\n\nWhile `react-colorful` claims to have zero dependencies, it still expects you to use React or [Preact](https://github.com/omgovich/react-colorful#usage-with-preact).\nThis means that Angular, Vue, Svelte or vanilla JS users would have an **extra** dependency in their apps.\n\nNow when all the evergreen browsers support standards based [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements),\nit's perfect time to build such tiny and lightweight UI controls as web components rather than framework components.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fvanilla-colorful","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweb-padawan%2Fvanilla-colorful","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweb-padawan%2Fvanilla-colorful/lists"}