Quaff
Make it your color
Type a color or open the swatch to explore.
info QColorPicker API Source
interface QColorPickerProps extends Pick<Omit<HTMLInputAttributes, "value" | "disabled">, "id" | "name" | "tabindex" | "aria-label" | "aria-describedby">
alpha
?: boolean = falseEnables opacity editing and includes alpha in emitted colors.
class
?: HTMLAttributes<HTMLDivElement>["class"] = undefined
Classes applied to the field wrapper.
dense
?: boolean = falseMakes the input component more compact.
disabled
?: boolean = falsePrevents interaction and removes the controls from keyboard navigation.
error
?: boolean = falseIndicates an error state for the input.
errorMessage
?: string = undefinedMessage to display when the input is in an error state. Overrides the hint prop when the input is in an error state.
fillMask
?: QInputFillMask = undefined
Fills empty mask token positions with underscores, or with the first character of the provided string.
filled
?: boolean = falseApplies a filled background style to the input.
format
?: QColorFormat = "hex"
Format emitted by the picker. The editor can switch between HEX and RGB independently.
hint
?: string = undefinedHelper text displayed below the input. When the input is in an error state, the helper text will be overwritten by the error message.
inline
?: boolean = falseShows the picker directly, without a field or popup. Changes apply immediately.
The hint, error, errorMessage, mask, fillMask, dense, filled, outlined, rounded and tabindex props apply only to the text field in popup mode.
label
?: string = undefinedThe text to be displayed in the component.
When applicable, will overwrite the children snippet content.
labels
?: Partial<QColorPickerLabels> = undefined
Overrides the translated control labels and validation message.
mask
?: string = undefinedHEX mask for the popup mode's text field, independent of the emitted format.
Use six HEX positions (for example, \#XXXXXX), or eight to edit opacity with alpha enabled.
A six-position mask preserves the current opacity. All positions must be filled to commit.
open
?: boolean = $bindable(false)
Popup visibility. This property is bindable.
outlined
?: boolean = falseApplies an outlined style to the input.
readonly
?: boolean = falseDisplays the color without allowing edits.
rounded
?: boolean = falseMakes the sides of the input round.
style
?: HTMLAttributes<HTMLDivElement>["style"] = undefined
Styles applied to the field wrapper.
value
?: string | null = $bindable(undefined)
Selected HEX or RGB color. Only valid edits update this bindable value.
Usage
Editable field
Type a HEX or RGB value and press Enter or leave the field to commit it. Open the swatch
for a popup: Apply saves its draft; Cancel, Escape, or clicking outside discards it.
Invalid input keeps the last valid value.
Saved value: #387C69
format="hex" is the default output format. Set format="rgb" to emit RGB instead. Switching the editor's HEX/RGB tabs does not change that choice. Both input
formats are accepted; named colors, HSL, and CSS variables are not.
Filled mask
Use
fillMask with mask to keep empty positions visible while
editing. Masked fields use HEX even with format="rgb". Fill all six positions
to commit; with alpha, use eight positions to edit opacity or six to preserve
it.Enter six HEX digits (0–9 or A–F).
Saved value: No color selected
Inline editor
Use
inline for immediate updates without Apply or Cancel. Give this cycling
club's next poster a new accent; the artwork changes while its text keeps a fixed,
readable color. The hint, error, errorMessage,
masks, and field styles apply only to the text field in popup mode.Hue
Sunday cycle club · No. 07
Long way.
Good company.
09:00 Sunday
Riverside coffee stop
32 km
All paces welcome
Poster accent #E4653D
The color field exposes separate native range controls for Saturation and Brightness. Tab to either axis, then use the arrow keys, Shift + Arrow for steps of 10, and Home or End for its limits. Hue and optional opacity also support keyboard editing.
Opacity
Enable
alpha to edit opacity. HEX output includes an alpha byte; RGB output
uses rgba(). Try a translucent highlight over the photo below.Hue
Opacity
Selected regionrgba(255, 196, 0, 0.35)States and customization
Use familiar field props such as
filled, outlined, rounded, dense, and hint. Use mask for
fixed-format entry, as in the six-digit HEX example below. Override translations with labels.Enter six HEX digits (0–9 or A–F).
Localization
Picker labels, actions, and validation messages follow Quaff's language. Switch languages
below, or see language configuration and available locales. In right-to-left layouts, the surrounding interface follows the document direction; the
color field and its numeric axes stay left-to-right.
Hue
Opacity