Upgrade toQuasar v2and use Vue.js 3
Color Picker

The QColor component provides a method to input colors.


For handling colors, also check out Quasar Color Utils.

QColor API



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.

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

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):