This page features interactive demos and side-by-side code samples that need at least 340 pixels of horizontal space. Please widen your browser window, or rotate your device, to continue.
Component <neo-color-field> is a 2D saturation/value picker painted over a base hue, with pointer and arrow-key handle movement. The host reflects value (hex); set hue to fix the base hue, or omit it and the kit derives one from value, so the simplest usage is a single value="#rrggbb".
Default
Derived hue
Explicit hue
Disabled
Custom size
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.
The simplest form. Pass a value hex and the host derives the base hue from it on connect, so a freshly mounted picker shows the handle on the matching point of the saturation/value plane.
Set hue in degrees to override the derived value. Useful when the selected colour is desaturated (so the derived hue would be ambiguous) or when you want the field's gradient to stay anchored to a brand hue while the handle picks a tint.
The field reads its dimensions from the --neo-color-field-width and --neo-color-field-height custom properties, so any inline style or scoped CSS rule resizes the picker without changing markup.
A Datastar fat-morph can change value, hue, or disabled mid-interaction.
The host stays mounted and reconciles its handle position and disabled state in place: no re-mount, no lost focus. Autoplay cycles the states below to simulate the morphs.
The cf_morph_value signal mirrors the live color (seeded by each morph, updated on neo-color-field-input) and drives the hex readout below the field.
Initial
Different color
Disabled
DeactivateRenameDuplicateDelete
The preview routes through the in-browser server simulator. Its current Settings (network latency, a non-200 response, or an unreachable server) are in effect, so the live preview can look like it is misbehaving. Adjust them in the Settings panel.
New state Toggle autoplay
#2563eb
HTMLCSS
The selected state's markup and its scoped CSS. The CSS is wrapped in <style>@scope { ... }</style> and applies to the preview only. Edits change the preview above, applied live while Sync is on, or when you click Patch or Replace. Patch morphs the preview; Replace swaps it outright.
Signals
Datastar signals declared in the selected state's markup. Change a value to drive the preview, applied live while Sync is on, or when you click Patch.