The QColor component provides a method to input colors.
For handling colors, also check out Quasar Color Utils.
Usage
Basic
With QInput
There are helpers for QInput rules prop: full list. You can use these for convenience or write the string specifying your custom needs.
Examples: “hexColor”, “rgbOrRgbaColor”, “anyColor”.
More info: QInput.
No header or footer
You can choose if you don’t want to render the header and/or footer, like in example below:
Custom default view
You can also pick the default view, like in example below, where we also specify we don’t want to render the header and footer. The end result generates a nice color palette that the user can pick from:
Custom palette
Palette slot v2.31+
The palette slot replaces the default swatches of the palette view while keeping the Spectrum and Tune views and the view switcher. Its scope carries the colors (palette), a select(color) function and an editable flag, so you decide the layout and the labels. The default swatches are keyboard and screen reader accessible (see the Accessibility section below); keep yours that way too.
Force dark mode
Default value
Lazy update
Disable and readonly
Native form submit
When dealing with a native form which has an action and a method (eg. when using Quasar with ASP.NET controllers), you need to specify the name property on QColor, otherwise formData will not contain it (if it should):
Accessibility v2.25+
All three views are keyboard and screen reader accessible: the Tune view through its native text/number inputs plus sliders, and, since v2.31, the Spectrum view through its spectrum panel and the Palette view through its swatches.
The spectrum panel is a slider (role="slider") named by the localized colorPicker.spectrum label; since it drives two axes at once, its accessible value spells both out (colorPicker.saturation and colorPicker.brightness, e.g. “Saturation 40%, Brightness 70%”). It is a Tab stop: Left/Right change the saturation and Up/Down the brightness by one percent (ten with Shift), Home/End jump to zero/full saturation and PageUp/PageDown change the brightness by ten percent. Like the sliders next to it, the panel emits change once the key is released.
The palette swatches are buttons named by their color value, wrapped in a group carrying the localized colorPicker.palette label, and the swatch matching the current model is exposed as pressed. The palette holds a single Tab stop (the selected swatch, else the first one); the arrow keys move between swatches (Up/Down by one visual row), Home/End jump to the first/last swatch and Enter/Space pick the focused one. Swatches rendered through the palette slot are yours to make accessible.
The parts that are exposed carry localized accessible names from the Quasar Language Pack (colorPicker.*): the view tabs, the header’s color value field and the hue/opacity sliders, none of which the consumer can name from the outside.
A disabled QColor exposes aria-disabled="true" on its root element. A readonly or disabled picker also drops the spectrum panel and the swatches out of the Tab order, the way its sliders do, while the spectrum panel keeps reporting the current color with aria-readonly/aria-disabled.