Color Picker     

The ColorPicker component provides a method to input colors. There is also one more version available: Color Input.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.
You might also want to check Color Utils.


Edit /quasar.conf.js:

framework: {
components: ['QColorPicker']

Basic Usage

<q-color-picker v-model="modelHex" />

export default {
data: () => ({
modelHex: '#C7044B',

// and the other types of models:
modelHexa: '#F0FF1CBF',
modelRgb: { r: 112, g: 204, b: 55 },
modelRgba: { r: 138, g: 36, b: 138, a: 64 }

Vue Properties

Supports v-model which must be a String, Number or Date Object.

Vue PropertyTypeDescription
darkBooleanIs component rendered on a dark background?
default-valueString/ObjectDefault color hex/rgb for picker when model is not yet set.
format-modelStringData type of model (useful especially when starting out with undefined or null). One of ‘auto’, ‘hex’, ‘rgb’, ‘hexa’, ‘rgba’.
readonlyBooleanIf set to true, component is displayed as read-only.
disableBooleanIf set to true, component is disabled and the user cannot change model.
no-parent-fieldBooleanAvoid trying to connect to a parent QField.

Lazy Input

Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:

@change="val => { model = val }"

Vue Methods

Vue MethodDescription
clear()Sets model to empty string (removes current value).

Vue Events

Vue EventDescription
@input(newVal)Triggered on immediate model value change.
@change(newVal)Triggered on lazy model value change.

More Examples


Use the color and inverted/inverted-light props to control the color.

float-label="Float Label"

float-label="Float Label"

Also, if QColor is displayed on a dark background, add the dark property.

<q-color-picker dark color="secondary" />