Color pickers

The v-color-picker allows you to select a color using a variety of input methods.



v-color-pickerPrimary component



Customizing the look of the picker

There are a number of props available to help you customize the component by hiding or showing the various parts of the picker. You can independently hide the canvas, the sliders, and the inputs. You can also show a collection of swatches.


Adjust the elevation of the v-color-picker component using the elevation or flat prop. The flat is equivalent to setting elevation to 0.


You can specify which input modes are available to your users with the modes prop. If you only set a single mode, then the mode toggle will automatically be hidden. You can also control the current mode with the mode v-model.


The v-color-picker uses the v-model prop to control the color displayed. It supports hex strings such as #FF00FF and #FF00FF00, and objects representing RGBA, HSLA and HSVA values. The component will try to emit the color in the same format that was provided. If the value is null, then the v-color-picker will default to emitting hex colors.


Using the show-swatches prop you can display an array of color swatches that users can pick from. It is also possible to customize what colors are shown using the swatches prop. This prop accepts a two-dimensional array, where the first dimension defines a column, and second dimension defines the swatches from top to bottom by providing rgba hex strings. You can also set the max height of the swatches section with the swatches-max-height prop.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page onGitHub