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.

Installation

Edit /quasar.conf.js:

framework: {
  components: ['QColorPicker']
}

Basic Usage

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

<script>
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.

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:

<q-color-picker
  :value="model"
  @change="val => { model = val }"
/>

Vue Methods

Vue Events

More Examples

Coloring

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

<q-color-picker
  color="amber-7"
  float-label="Float Label"
  v-model="model"
/>

<q-color-picker
  inverted
  color="primary"
  float-label="Float Label"
  v-model="model"
/>

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

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