\  

A rich colorpicker web component. Enables deep visualization into all channels of a color.

Live Demo

Since this is a Lit 3 web component, this will work inside any SPA framework. React integration docs. Framework-agnostic web components are the future!

Installation

``bash
npm i lit-colorpicker
`

Usage

`html



Pick a color




`

Events

Fires a 'colorpicked' (when click OK) and 'colorupdated' (any mutation) event with a color object in the event detail. Standard CustomEvent implementation.

Theming

Set the following css variables to set a custom theme:
`css
color-picker {
--font-fam: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue";
--bg-color: rgb(30 41 59);
--label-color: #ccc;
--form-border-color: #495057;
--input-active-border-color: #86b7fe;
--input-bg: #020617;
--input-active-bg: #4682B4;
--input-color: #ccc;
--input-active-color: #333;
--input-active-box-shadow: 0 2px 5px #ccc;
--button-active-bg: #0C5B9D;
--button-active-color: white;
--outer-box-shadow: 0 4px 12px #111;
}
`

Run the demo to use the dynamic theme picker.

Run local

Recommended so you can use the theme chooser. Uses vite. Will run on node 16+ - but will complain about compatibility if you are stuck on node 16 like me. Ignore these. It's fine.
`bash
git clone https://github.com/thewebkid/lit-color-picker.git
cd cd ./lit-color-picker
npm i
npm dev
`

Run Tests

`bash
npm test
``