Color Picker

The QColor component provides a method to input colors.


For handling colors, also check out Quasar Color Utils.


// quasar.conf.js

return {
  framework: {
    components: [




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.

Custom behavior

You can choose if you don’t want to render the header and/or footer, like in example below:

No header/footer

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 default view

Dark mode

Dark version

Default value

Default value

Lazy update

Lazy model

Disable and readonly

Disable and readonly

QColor API