HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Color PickerView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorPicks a color, from a square and two ramps.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/color-picker'import'@fusion.dev/helix-headless/color-picker'Preview
API ReferenceRoothelix-color-pickerPicks a color, from a square and two ramps.
PropTypeDefaultDescriptionalphabooleanfalseWhether the color carries an alpha channel.autocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.formatColorFormatThe syntax the value is written in: `hex`, `rgb` or `hsl`.invalidbooleanfalseWhether the current selection fails validation.namestring""Name submitted with the form.noEyedropperbooleanfalseWhether the eyedropper is offered where the browser has one.noFormatbooleanfalseWhether the reader may change the format.noValuebooleanfalseWhether to leave the value out, for a picker whose value is stated elsewhere.swatchesstring""Colors offered under the picker, as a comma-separated list.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptioncolorColorWhere the picker stands: what was moved, or what the value says, or the start.formHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptioneyedropper-iconThe glyph on the screen-sampling control, usually a dropper.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the color changes. Cancelable: refusing it takes the decision and nothing moves.helix-copyHelixCopyEventFired when the color is put on the clipboard.helix-sample-endHelixSampleEndEventThe eyedropper has closed, whether or not a color was taken.helix-sample-startHelixSampleStartEventThe eyedropper is opening, so anything covering the page should get out of the way.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the keyboard on the square, which is the control a reader wants.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionactionsThe group holding the eyedropper and the syntax toggle.channelOne ramp.channel-controlThe range input.channel-feedbackWhat is wrong with it.channel-fieldThe row: the control and its readout.channel-hintHelp under the track, while nothing is wrong.channel-labelThe question, over the track.channel-markerOne mark.channel-marker-labelThe value a mark stands at, when `marker-labels` is set.channel-markersThe row of marks along the track.channel-outputThe current value, shown beside it.channelsThe ramps beside it.controlsThe row under the square.eyedropperThe control that samples a color from the screen.eyedropper-buttonThe inner control.footerThe row holding the value and the tools.formatThe control that changes the syntax the value is written in.format-buttonThe inner control.gridThe saturation and brightness square.grid-brightnessThe range input for its vertical axis.grid-handleThe mark showing where in the square the color sits.grid-saturationThe range input for the square's horizontal axis.sampleThe chip of the current color, which copies it when pressed.swatchOne preset.swatchesThe row of presets.valueThe color as text, which can be typed or pasted.
CSS PropertyDescription--color-picker-brightnessThe chosen brightness, 0 to 100, as a percentage.--color-picker-grid-radiusCorner radius of the square.--color-picker-grid-ratioAspect ratio of the square.--color-picker-hueThe chosen hue, 0 to 360, unitless.--color-picker-paddingInset of the rows under the square, and the bottom.--color-picker-sample-sizeEdge length of the chip that copies the value.--color-picker-saturationThe chosen saturation, 0 to 100, as a percentage.--color-picker-swatchA color to paint: the current one on the sample, a preset's on each preset.--color-picker-swatch-sizeEdge length of one preset.
Roothelix-headless-color-pickerPicks a color, from a square and two ramps.
PropTypeDefaultDescriptionalphabooleanfalseWhether the color carries an alpha channel.autocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.formatColorFormatThe syntax the value is written in: `hex`, `rgb` or `hsl`.invalidbooleanfalseWhether the current selection fails validation.namestring""Name submitted with the form.noEyedropperbooleanfalseWhether the eyedropper is offered where the browser has one.noFormatbooleanfalseWhether the reader may change the format.noValuebooleanfalseWhether to leave the value out, for a picker whose value is stated elsewhere.swatchesstring""Colors offered under the picker, as a comma-separated list.valuestringWhat the control holds now, and what its form submits.
ReadTypeDescriptioncolorColorWhere the picker stands: what was moved, or what the value says, or the start.formHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptioneyedropper-iconThe glyph on the screen-sampling control, usually a dropper.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the color changes. Cancelable: refusing it takes the decision and nothing moves.helix-copyHelixCopyEventFired when the color is put on the clipboard.helix-sample-endHelixSampleEndEventThe eyedropper has closed, whether or not a color was taken.helix-sample-startHelixSampleStartEventThe eyedropper is opening, so anything covering the page should get out of the way.inputEventAnnounced once the value has moved.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the keyboard on the square, which is the control a reader wants.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.
PartDescriptionactionsThe group holding the eyedropper and the syntax toggle.channelOne ramp.channel-controlThe range input.channel-feedbackWhat is wrong with it.channel-fieldThe row: the control and its readout.channel-hintHelp under the track, while nothing is wrong.channel-labelThe question, over the track.channel-markerOne mark.channel-marker-labelThe value a mark stands at, when `marker-labels` is set.channel-markersThe row of marks along the track.channel-outputThe current value, shown beside it.channelsThe ramps beside it.controlsThe row under the square.eyedropperThe control that samples a color from the screen.eyedropper-buttonThe inner control.footerThe row holding the value and the tools.formatThe control that changes the syntax the value is written in.format-buttonThe inner control.gridThe saturation and brightness square.grid-brightnessThe range input for its vertical axis.grid-handleThe mark showing where in the square the color sits.grid-saturationThe range input for the square's horizontal axis.sampleThe chip of the current color, which copies it when pressed.swatchOne preset.swatchesThe row of presets.valueThe color as text, which can be typed or pasted.
CSS PropertyDescription--color-picker-brightnessThe chosen brightness, 0 to 100, as a percentage.--color-picker-hueThe chosen hue, 0 to 360, unitless.--color-picker-saturationThe chosen saturation, 0 to 100, as a percentage.--color-picker-swatchA color to paint: the current one on the sample, a preset's on each preset.
ExamplesNameDescriptionBareThe picker with no syntax control, for where the format is decided already.DisabledDisabled, which is a picker that shows a color and does not move.EventsA value moving, a color taken off the screen, and one put on the clipboard.InvalidThe picker reporting a value it cannot use.Pared BackWithout the readout and without the eyedropper, for a picker beside its own preview.PreviewThe area, the hue rail, and the value in a field.PreviewThe area, the hue rail, and the value in a field.SwatchesPrepared colors under the picker, with opacity on.SyntaxesThe same color written in each syntax the picker speaks.