C&C Docs
Log in

cnc-color-picker

A swatch that opens a full colour picker: a saturation and lightness grid, a hue slider, an optional alpha slider, a text field that accepts any common colour notation, a one-click copy, and a palette of presets. It emits hex, rgb, or hsl, and carries alpha when opacity is enabled.

Quick start

Give it a value and it renders as that colour; leave the value empty and the trigger shows a swatch icon instead. Click it to open the picker. Every edit emits change.

#3b82f6 
<div x-data="{ color: '#3b82f6' }">
  <cnc-color-picker
    name="brand"
    $value="color"
  ></cnc-color-picker>
</div>

Usage guidance

Use the picker when any colour is a legitimate answer — theming, annotation, drawing. When only a handful of colours are valid, offer those directly as swatches or radios instead; a full spectrum implies a freedom the design does not actually have. Match format to whatever consumes the value so nothing has to re-parse it downstream, and enable opacity only where a translucent result is genuinely usable.

← Back to Widgets