BK Color Picker

A compact, standalone color picker web component for Lit apps and plain HTML. It includes a Display P3/sRGB color space, opacity editing, format-aware paste, and browser screen sampling when the EyeDropper API is available.

Install

npm install bk-color-picker

Use

import "bk-color-picker";

<bk-color-picker value="#ff4d6d">
	<button type="button" aria-label="Choose color">Choose color</button>
</bk-color-picker>

The component follows prefers-color-scheme automatically. Set data-color-scheme="light" or data-color-scheme="dark" on the component or an ancestor to override it.

Properties

• value: color value, defaulting to #000000
• format: hex, rgb, hsl, or hsv
• color-space: display-p3 (default) or srgb
• opacity: shows the opacity control; enabled by default. Set the property to false when you need a picker without alpha editing.
• swatches: array of color strings
• disabled: disables the trigger and picker
• open: controls the popup from JavaScript

The component dispatches bubbling, composed input and change events. Each event exposes the current color on event.value.

Paste recognizes hex, RGB/RGBA, HSL/HSLA, HSV/HSVA, CSS color(...), named CSS colors, RGB tuples, and simple RGBA JSON. The pasted format becomes the active format, and an alpha value keeps the opacity control visible.

The format dropdown is built in and uses the picker’s theme by default. If your application already has a menu component, replace it through the named format-control slot and update the picker’s format property from your menu:

<bk-color-picker>
	<select
		slot="format-control"
		aria-label="Color format"
		onchange="this.closest('bk-color-picker').format = this.value"
	>
		<option value="hex">HEX</option>
		<option value="rgb">RGB</option>
		<option value="hsl">HSL</option>
		<option value="hsv">HSV</option>
	</select>
	<button type="button">Choose color</button>
</bk-color-picker>

The slotted control is yours to style and manage; the built-in menu is only the fallback when the slot is empty.

The screen sampler uses the browser EyeDropper API where available. Browsers without that API receive a native color-input fallback.

Development

npm install
npm run build
npm run dev

The short package page lives in docs/index.html.