Color Picker — cinder playground

Overview

Full-featured input for selecting a color via hue, saturation, lightness, and hex entry.

<script lang="ts">
  import ColorPicker from '@lostgradient/cinder/color-picker';
</script>

<ColorPicker />

Live preview

Use when

Avoid when

Constraining selection to a fixed brand palette — use color-swatch-picker instead.

Alpha slider enabled: emits an 8-character hex value. The footer row shows the full #rrggbbaa string.

A color picker with preset swatches where the selected swatch shows a persistent check indicator without looking keyboard-focused.

Omitting the swatches prop renders only the gradient, sliders, and footer row — useful when a freeform pick without preset guidance is needed.

Props for color-picker
Name	Type	Default	Bindable	Description
`value`	`text`	`''`	bind	Bindable value. Reading the value yields a hex string (`#rrggbb`, or `#rrggbbaa` when `alpha` is true). Setting the value accepts hex, `rgb()`, `rgba()`, `hsl()`, or `hsla()` input; invalid input is normalized to `''`.
`alpha`	`boolean`	`false`		Enable the alpha slider and emit `#rrggbbaa`. Default `false`.
`name`	`text`			Form field name. When set, a hidden input mirrors the current value for form submission.
`swatches`	`string[]`			Optional palette of preset colors rendered below the picker.
`disabled`	`boolean`	`false`		Disable interaction across the picker.
`label`	`text`	`'Color picker'`		Accessible label for the picker. Default `'Color picker'`.
`onchange`	`(color: string) => void`			Fired on commit (pointer up, swatch click, slider key).
`oninput`	`(color: string) => void`			Fired on every intermediate update (drag, slider key, swatch click).