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.

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

No header/footer



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



Custom palette

Custom palette



Dark mode

Dark version



Default value

Default value



Lazy update

Lazy model



Disable and readonly

Disable and readonly



QColor API