pixelpicker

Live demo

Every tab shows a working picker. Show setup code reveals exactly how it was configured.

// Per Attribut, ohne einen eigenen Aufruf je Feld:
<input type="text" data-pp-thumb="circle" value="#06d6a0">

// …oder fuer viele Felder auf einmal:
create('.color-input', { thumbStyle: 'circle' });

// Die Seite waehlen -- 'start' folgt der Schreibrichtung,
// steht also in einem RTL-Layout rechts.
create('.color-input', {
  thumbStyle: 'circle',
  thumbPosition: 'start'
});

// Die Schalter oben bauen die Instanz jeweils neu auf:
destroy(field);
create(field, { thumbStyle: style, thumbPosition: side });

create('#demo-format',   { formatToggle: true });
create('#demo-swatches', { swatchesOnly: true });
create('#demo-noalpha',  { alpha: false });
create('#demo-pill',     { theme: 'pill' });
create('#demo-dark',     { themeMode: 'dark' });
create('#demo-clear',    { clearButton: true });

// Eigene Farbfelder statt der zwoelf Standardwerte:
create('#brand-color', {
  swatches: ['#4361ee', '#7209b7', '#f72585', '#ffbe0b'],
  swatchesOnly: true
});

// Tippen im Feld melden -- onInput faellt bei jeder Aenderung,
// auch bei der von Hand eingegebenen.
create('#demo-typing', {
  onInput: (value) => console.log(value)
});

const [picker] = create('#demo-lifecycle');

picker.setValue('#d62828');   // Wert von aussen setzen
picker.getValue();             // '#d62828'
picker.open();                 // Panel oeffnen
picker.close({ revert: true }); // schliessen, Wert zuruecknehmen

getAll().length;             // wie viele Instanzen leben
picker.destroy();              // diese eine abbauen
destroy('#demo-lifecycle');   // …oder ueber das Feld

It cannot be clipped or buried

Put an input inside a box with overflow: hidden and a conventional picker disappears the moment it opens — the box cuts it off. The panel here lives in the browser's top layer, above everything on the page, so no ancestor can clip it and no z-index can bury it. Open both fields below to see the difference.

Scrolling, flipping, and the fallback

The panel keeps its place while the page or a container scrolls, and flips above the field when there is no room below. Where the browser supports CSS Anchor Positioning it does that itself; otherwise a small JavaScript fallback measures the field. Force the fallback to check both paths.

Getting started

As a module

import { create } from 'pixelpicker';
import 'pixelpicker/css';

create('.color-input', {
  thumbStyle: 'circle',
  formatToggle: true
});

As a plain script

<link rel="stylesheet" href="dist/pixelpicker.css">
<script src="dist/pixelpicker.js"></script>
<script>
  PixelPicker.create('.color-input', { thumbStyle: 'bar' });
</script>

Without any JavaScript call

<input type="text" data-pixelpicker data-pp-thumb="circle" value="#2a9d8f">

<script>PixelPicker.auto();</script>

In an existing design

By default the picker needs an element to anchor the swatch to, because an <input> cannot hold children. It uses the input's parent when the input sits there alone, and only inserts a wrapper when it does not.

That last case breaks markup built on a direct parent-child or sibling relationship. Bootstrap's .form-floating is the common one: it expects the input and its label to be siblings, and an inserted element costs the field its height and shape. Set wrap: false and the existing parent takes the role instead.

<div class="form-floating">
  <input type="text" class="form-control" id="brand" value="#87a878">
  <label for="brand">Brand color</label>
</div>

<script>
  PixelPicker.create('#brand', { thumbStyle: 'circle', wrap: false });
</script>

The swatch scales with the field: circle and square take 60 % of its height, down to a floor of 14 px. Both are yours to change — set --pp-thumb-size and --pp-thumb-min-size on the field's parent.

Options

Everything you can pass to create(). Each option is independent — set only the ones you want to change.

Appearance

Behaviour

Color

Controls

Callbacks

The same options as data attributes

Most options can be set on the element itself, which is handy for server-rendered markup: no JavaScript call per field, just auto() once. An attribute beats the value passed to create(), because it is the more specific source.

formats, labels, returnFocus, forcePositionFallback and the callbacks have no attribute — they take values that do not fit into one.

Events

Each instance dispatches events on its own field, so they bubble and can be delegated. Native input and change events fire as well — forms and validators see exactly what they would see from typing.

field.addEventListener('pixelpicker:change', (event) => {
  console.log(event.detail.value);     // '#2a9d8f'
  console.log(event.detail.instance);  // the PickerInstance
});

API

On an instance

Keyboard

The whole picker is operable without a mouse. The field behaves like any other text input until you deliberately step into the panel.