Colorpicker Web component built with Lit 3
npm install lit-colorpicker
A rich colorpicker web component. Enables deep visualization into all channels of a color.
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!
``bash`
npm i lit-colorpicker
`html
`
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
``