A color picker you can drive with the keyboard.

RGB, HSV, HSL and HEX, alpha, light and dark themes, and smart positioning around its target. Change the options and watch the events fire.

npm install yk-color-picker

Playground Closed

Methods

Options

color

Not a valid color. Try a HEX, rgb() or named color.

target

Button Swatch Input

container

Popup Inline

Popup floats next to the target. Inline renders the picker inside the playground.

position

Top Bottom Left Right

positionFallback

Order to try when there's no room. Any of b t l r, no repeats.

Use only b, t, l and r, each at most once (e.g. btrl, lr, b).

representation

RGB HEX HSV HSL

theme

Light Dark

Close behavior closeOnScrollClose when the page scrolls closeOnResizeClose when the window resizes