simonwep/pickr
Pickr
Pickr is a dependency-free JavaScript color picker library and multi-format color converter. It provides a visual interface for selecting colors and transforming them between HEX, RGB, HSL, and CMYK representations.
The library is designed as a themed UI component that can attach to and function within web shadow roots. It supports customizable visual styles and layout applications to align with various CSS frameworks and design systems.
Capability areas include visual color selection with alpha channel opacity control, the management of preset color swatches, and an event-driven callback system for handling user interactions. It also features coordinate-based color mapping and scroll-based numeric value adjustments.
Features
- Visual Color Pickers - Provides a visual interface for selecting colors from a palette and exporting them in formats like HEX and RGBA.
- Color Selection Components - Integrates a visual interface for picking and exporting colors in formats like HEX or RGBA.
- Color Format Converters - Translates color states between multiple representations including HEX, RGB, HSL, and CMYK.
- Vanilla JavaScript Implementations - Implemented in plain JavaScript to ensure full compatibility without requiring external frameworks or libraries.
- Canvas Coordinate Mapping - Calculates precise color values by mapping mouse movements on the selection canvas to hue and saturation coordinates.
- Event-Driven Callbacks - Employs an event-driven system to execute user-defined functions when internal states, like color selection, change.
- Shadow DOM Selectors - Provides specialized selector syntax to locate and attach the picker to elements nested inside shadow roots.
- Color Swatches - Supports defining a set of preset color tiles for quick selection and dynamic updates.
- Interactive Color Pickers - Provides a set of callbacks that trigger when users interact with the color picker, swatches, or save actions.
- Color Opacity Adjustments - Includes a dedicated slider to modify the alpha channel of a color or lock it to a fixed value.
- Customizable UI Components - Ships a highly customizable interface with visual styles that can be adjusted to match specific design systems and CSS frameworks.
- Design System Customizations - Supports customizing visual tokens and styles to create a branded picker that matches a specific design system.
- CSS Class-Based Styling - Allows swapping visual aesthetics by applying predefined CSS class names to the root container.
- Theme Application Systems - Enables the application of different layout styles to the interface to align with various design systems.
- Shadow Root Element Selection - Uses custom selector logic to find and manipulate DOM elements located inside nested shadow roots.
- Shadow DOM Compatibility - Provides specialized logic to ensure the color picker can be attached to and operate within nested shadow roots.
Star history
How this analysis was created: This summary and feature list are AI-generated from collected project material and can contain mistakes. Stars, license and language are imported from GitHub. Inclusion does not mean that we have tested or audited this project. Check the source documentation for any feature you depend on. Learn more on our About page.
