Color Picker

The QColor component provides a method to input colors.

TIP

For handling colors, also check out Quasar Color Utils.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QColor'
    ]
  }
}

Usage

Basic

Basic



With QInput

Input



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