{"id":15256,"library":"vanilla-colorful","title":"Vanilla Colorful Color Picker","description":"vanilla-colorful is a lightweight, framework-agnostic color picker library implemented as W3C standards-based Custom Elements. It serves as a vanilla JavaScript port of the popular `react-colorful` library, offering the same core functionality in a dependency-free, highly optimized package. The current stable version is 0.7.2, released in November 2022, and while no explicit release cadence is stated, it appears to be actively maintained. Key differentiators include its extremely small bundle size (just 2.7 KB minified and gzipped), 100% test coverage, full TypeScript typings, and comprehensive accessibility (WAI-ARIA) and mobile support. It provides various color picker types (HEX, RGB, HSL, HSV) directly usable as HTML custom elements, making integration into any web application or framework straightforward.","status":"active","version":"0.7.2","language":"javascript","source_language":"en","source_url":"https://github.com/web-padawan/vanilla-colorful","tags":["javascript","webcomponents","web-components","webcomponent","web-component","custom-element","customelement","colorpicker","hex","typescript"],"install":[{"cmd":"npm install vanilla-colorful","lang":"bash","label":"npm"},{"cmd":"yarn add vanilla-colorful","lang":"bash","label":"yarn"},{"cmd":"pnpm add vanilla-colorful","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This import registers all available color picker custom elements (e.g., ``, ``). The package is ESM-only and requires `type=\"module\"` in script tags or a bundler for bare module specifiers.","wrong":"const vanillaColorful = require('vanilla-colorful');","symbol":"Side-effect import for custom element registration","correct":"import 'vanilla-colorful';"},{"note":"While common usage is via custom HTML elements, you can import specific picker classes if you need programmatic access, to extend them, or create custom picker components with different tag names.","wrong":"import HexColorPicker from 'vanilla-colorful';","symbol":"HexColorPicker class","correct":"import { HexColorPicker } from 'vanilla-colorful';"},{"note":"For TypeScript users, this type defines the structure of the `detail` object for the `color-changed` custom event, allowing for strong typing of event handlers. Other color types like `HslColor` are also available.","symbol":"ColorChangeEvent type","correct":"import type { ColorChangeEvent } from 'vanilla-colorful';"}],"quickstart":{"code":"\n\n\n\n \n \n Vanilla Colorful Quickstart\n \n \n\n\n

Choose a Color

\n \n \n

\n\n\n\n// main.js\nimport 'vanilla-colorful';\n\ndocument.addEventListener('DOMContentLoaded', () => {\n const picker = document.querySelector('hex-color-picker.my-picker');\n const output = document.getElementById('colorOutput');\n\n // Set initial color output\n if (picker && output) {\n output.textContent = picker.color;\n output.style.color = picker.color; // For text color visualization\n }\n\n // Listen for color changes\n picker?.addEventListener('color-changed', (event) => {\n const newColor = event.detail.value;\n if (output) {\n output.textContent = newColor;\n output.style.color = newColor; // Update text color\n console.log('Color changed to:', newColor);\n }\n });\n\n // Example of programmatically changing the color after some time\n setTimeout(() => {\n if (picker) {\n picker.color = '#ff4500'; // Set new color (e.g., OrangeRed)\n console.log('Programmatically set color to:', picker.color);\n }\n }, 3000);\n});","lang":"typescript","description":"This quickstart demonstrates how to integrate and interact with `hex-color-picker` using standard Custom Elements. It registers the component, initializes its value, listens for `color-changed` events, and updates an output element. It also shows programmatic color setting."},"warnings":[{"fix":"If you need to react to programmatic color changes, implement separate logic or directly call your update function after setting the property. The `color-changed` event is strictly for user interactions.","message":"Starting with version 0.7.0, setting the `color` property programmatically on a picker component will no longer fire the `color-changed` event. This was changed to prevent infinite loops in reactive frameworks.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"Review your custom implementations that extend `vanilla-colorful`'s base classes or rely on internal element structure and update them according to the latest API. Refer to the GitHub changelog for specific changes.","message":"In version 0.6.0, internal elements were simplified and the `color-changed` event typings were added. This might affect advanced users extending internal components or relying on previous internal structures.","severity":"breaking","affected_versions":">=0.6.0"},{"fix":"To style the `hex-input` (or other elements within Shadow DOM), use CSS custom properties (variables) exposed by the component, or the `::part()` pseudo-element if parts are exposed. Direct global CSS selectors will not penetrate the Shadow DOM boundary.","message":"Version 0.5.0 introduced the use of Shadow DOM for the `hex-input` component. This affects how styling is applied to this specific input.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"For development without a bundler, ensure your HTML script tags use `type=\"module\"` and either configure import maps or use a CDN URL that provides module resolution: ``.","message":"The library uses ES Modules and 'bare module specifiers' (e.g., `import 'vanilla-colorful';`). In browsers without `import maps` support, you will need a build tool (like Vite, Rollup, webpack) or a CDN with a module resolver (e.g., unpkg.com with `?module`) to resolve these imports.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Ensure your target browsers have native Web Components support or include appropriate polyfills if wider browser compatibility is required. The library is designed for evergreen browsers.","message":"As a Custom Elements-based library, `vanilla-colorful` relies on modern browser support for Web Components. Older browsers (e.g., Internet Explorer) are not supported without polyfills.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always use `addEventListener('color-changed', ...)` in vanilla JS. When integrating with frameworks, use their specific event binding syntax (e.g., `(color-changed)=\"handler\"` in Angular/Lit, or consider solutions like `@lit/react` for React). Avoid assuming `onChange` or other framework-specific event names.","message":"Event listeners for color changes are dispatched as `CustomEvent` with the name `color-changed`. The updated color value is available in `event.detail.value`. Frameworks often have their own syntax for listening to custom events.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-21T00:00:00.000Z","next_check":"2026-07-20T00:00:00.000Z","problems":[{"fix":"Add `type=\"module\"` to your script tag: `` or use a bundler/CDN with module resolution.","cause":"The HTML `