{"id":44039351,"url":"https://github.com/wipeautcrafter/jscolorpicker","last_synced_at":"2026-02-07T20:14:20.927Z","repository":{"id":268856708,"uuid":"905665445","full_name":"wipeautcrafter/jscolorpicker","owner":"wipeautcrafter","description":"An open source, free (as in beer), versatile, flexible and lightweight Javascript Color Picker Component supporting light and dark skins, swatches, multiple color formats, CSS color parsing, instant and confirm modes and much more.","archived":false,"fork":false,"pushed_at":"2025-11-19T09:51:24.000Z","size":1252,"stargazers_count":24,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-11-19T11:23:53.027Z","etag":null,"topics":["alpha","colorpicker","dark-theme","hex","hsl","hsv","js","responsive","rgb","swatches"],"latest_commit_sha":null,"homepage":"https://jscolorpicker.com/","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/wipeautcrafter.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":"2024-12-19T09:32:00.000Z","updated_at":"2025-11-19T09:51:28.000Z","dependencies_parsed_at":"2025-01-31T11:19:05.909Z","dependency_job_id":"1dd2b0c0-9e7d-413d-bdc0-4b93a74fc977","html_url":"https://github.com/wipeautcrafter/jscolorpicker","commit_stats":null,"previous_names":["wipeautcrafter/colorpicker","wipeautcrafter/jscolorpicker"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/wipeautcrafter/jscolorpicker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wipeautcrafter%2Fjscolorpicker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wipeautcrafter%2Fjscolorpicker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wipeautcrafter%2Fjscolorpicker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wipeautcrafter%2Fjscolorpicker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wipeautcrafter","download_url":"https://codeload.github.com/wipeautcrafter/jscolorpicker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wipeautcrafter%2Fjscolorpicker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29207435,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T20:13:33.422Z","status":"ssl_error","status_checked_at":"2026-02-07T20:13:31.455Z","response_time":63,"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":["alpha","colorpicker","dark-theme","hex","hsl","hsv","js","responsive","rgb","swatches"],"created_at":"2026-02-07T20:14:19.536Z","updated_at":"2026-02-07T20:14:20.913Z","avatar_url":"https://github.com/wipeautcrafter.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Javascript Color Picker\n\nAn open source, free (as in beer), versatile, flexible and lightweight Javascript Color Picker Component supporting light and dark skins, swatches, multiple color formats, CSS color parsing, instant and confirm modes and much more.\n\n## Please visit [jscolorpicker.com](https://www.jscolorpicker.com/) for more detailed documentation and extensive demo's.\u003cbr\u003e\u003cbr\u003e\n\n## Table of Contents\n\n- [Features](#features)\n- [Live Demo](#live-demo)\n- [Screenshots](#screenshots)\n- [Installation](#installation)\n  - [IIFE Bundle](#iife-bundle)\n  - [ESM Bundle](#esm-bundle)\n- [Getting Started](#getting-started)\n  - [Creation](#creation)\n  - [Opening](#opening)\n  - [Setting Color](#setting-color)\n  - [Binding Events](#binding-events)\n  - [Dialog Only](#dialog-only)\n- [Documentation](#documentation)\n- [Customization](#customization)\n  - [Color Scheme](#color-scheme)\n  - [CSS Variables](#css-variables)\n- [Developing](#developing)\n- [License](#license)\n\n## Features\n\n- 🏋️ Light weight (42kB minified, 14.5kB minified and gzipped)\n- 0️⃣ Zero dependencies\n- 😎 Easy to use and customize\n- 🔼 Button, input and hidden styles\n- 👆🏻 Touch friendly\n- 🌙 Dark and light theme\n- 🫥 Alpha slider (can be disabled)\n- 🌈 Color Swatches\n- 🔢 Multiple color formats\n- ✢ Uses popper.js for positioning\n- 🪞 Preview\n- ✅ Apply color immediately, or on submit\n- 📜 CSS color parsing (including named colors)\n- 💧 EyeDropper on Chrome and Edge\n- ⌨️ Keyboard support\n- 🚫 Clearable\n\n## Live Demo\n\nSee the [demo page](https://www.jscolorpicker.com/#demo)\n\n## Screenshots\n\n|            |                         Light                          |                         Dark                          |\n| :--------- | :----------------------------------------------------: | :---------------------------------------------------: |\n| **Button** | \u003cimg src=\"screenshots/button-light.png\" width=\"50\" /\u003e  | \u003cimg src=\"screenshots/button-dark.png\" width=\"50\" /\u003e  |\n| **Input**  | \u003cimg src=\"screenshots/input-light.png\" width=\"300\" /\u003e  | \u003cimg src=\"screenshots/input-dark.png\" width=\"300\" /\u003e  |\n| **Dialog** | \u003cimg src=\"screenshots/dialog-light.png\" width=\"300\" /\u003e | \u003cimg src=\"screenshots/dialog-dark.png\" width=\"300\" /\u003e |\n\n## Installation\n\nThe color picker requires a tiny stylesheet. Please include it like this:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"colorpicker.css\" /\u003e\n```\n\nNow, depending on your environment, choose one of the following:\n\n- IIFE Bundle → When using vanilla JavaScript, without ES modules\n- ESM Bundle → When using ES modules or a bundler\n\n### IIFE Bundle\n\nPlease import the IIFE script using a `script` tag in your HTML:\n\n```html\n\u003cscript src=\"colorpicker.iife.js\"\u003e\u003c/script\u003e\n```\n\nThis exposes the `ColorPicker` class (on window).\n\n### ESM Bundle\n\nPlease import the ESM bundle using the `import` directive in your script:\n\n```js\nimport ColorPicker from 'colorpicker.js'\n```\n\nThis allows you to use `ColorPicker` directly.\n\n## Getting Started\n\n### Creation\n\nTo create a color picker, first create a button or input:\n\n```html\n\u003cbutton id=\"picker\"\u003e\u003c/button\u003e\n\u003c!-- or --\u003e\n\u003cinput id=\"picker\" /\u003e\n```\n\nNext instantiate the ColorPicker, passing an element to bind to and an (optional) configuration:\n\n```js\nconst picker = new ColorPicker('#picker', {\n  submitMode: 'instant'\n})\n```\n\n### Opening\n\nIf you want to open or close the dialog, use their respective methods:\n\n```js\npicker.open()\npicker.close()\npicker.toggle()\npicker.destroy()\n```\n\nYou can also open it as a prompt, returning a promise once the picker is closed:\n\n```js\nconst color = await picker.prompt()\n```\n\n### Setting Color\n\nIf you want to set or clear the color, you can use the `.setColor()` and `.clear()` methods:\n\n```js\npicker.setColor('#ff00ff')\npicker.clear()\n```\n\n### Binding Events\n\nIf you want to listen to certain events, like opening or picking, use the `.on()` method:\n\n```js\npicker.on('pick', (color) =\u003e console.log('pick', color))\npicker.on('open', () =\u003e console.log('open'))\npicker.on('opened', () =\u003e console.log('opened'))\npicker.on('close', () =\u003e console.log('close'))\npicker.on('closed', () =\u003e console.log('closed'))\n```\n\n### Dialog Only\n\nIf you want to open a picker dialog without a toggle, (optionally) destroying it after, you can use the `headless` option with the `prompt()` method:\n\n```js\nconst picker = new ColorPicker(target, {\n  headless: true,\n})\n\nconst color = await picker.prompt(true)\n```\n\n## Documentation\n\nFor all methods and properties, please view the [documentation](DOCUMENTATION.md).\n\n## Customization\n\n### Color Scheme\n\nYou can change the color scheme by using one of the following dataset properties:\n\n```html\n\u003chtml data-cp-theme=\"dark\"\u003e\u003c/html\u003e\n\u003chtml data-bs-theme=\"dark\"\u003e\u003c/html\u003e\n\u003chtml data-cp-theme=\"light\"\u003e\u003c/html\u003e\n\u003chtml data-bs-theme=\"light\"\u003e\u003c/html\u003e\n```\n\n### CSS Variables\n\nYou can alter a variety of styles using their respective CSS variables:\n\n```css\n:root {\n  /* Metrics */\n  --cp-size: 2.375rem; /* Size of color picker thumb */\n  --cp-border-radius-sm: 0.25rem;\n  --cp-border-radius-lg: 0.5rem;\n  --cp-swatch-width: 2rem;\n\n  /* Colors */\n  --cp-body-bg: #fff;\n  --cp-body-color: #212529;\n  --cp-body-color-rgb: 33, 37, 41;\n  --cp-border-color: #ccc;\n  --cp-button-color: #ccc;\n  --cp-border-color-translucent: rgba(0, 0, 0, 0.175);\n  --cp-tertiary-color: rgba(33, 37, 41, 0.5);\n\n  /* Shadows */\n  --cp-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);\n  --cp-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);\n\n  /* Animations (set to 0s to disable) */\n  --cp-delay: 150ms;\n}\n```\n\n## Developing\n\nTo install dependencies:\n\n```sh\nbun|deno|npm|pnpm|yarn install\n```\n\nTo build:\n\n```sh\nbun|deno|npm|pnpm|yarn run build\n```\nincluding minification:\n```\nsh build.sh\n```\n\nTo run:\n\n```sh\nbun|deno|npm|pnpm|yarn run dev\n```\n\n## License\n\nThis component is released under the MIT license. It is simple and easy to understand and places almost no restrictions on what you can do with the code.\n[More Information](http://en.wikipedia.org/wiki/MIT_License)\n\nThe development of this component was funded by [Zygomatic](https://www.zygomatic.nl/).\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwipeautcrafter%2Fjscolorpicker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwipeautcrafter%2Fjscolorpicker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwipeautcrafter%2Fjscolorpicker/lists"}