:::tip Looking for a quicker way to try it out yourself? Checkout the examples folder in GitHub. There's an example with Vite and a vanilla example without a build step.
There's a codepen as well. :::
In it's most basic form the color picker can be used as below.
<<< @/.vitepress/components/examples/Basic.vue{2,6,11,14-17}
The basic example assumes only the most saturated colors and uses the default values for saturation, luminosity and alpha, but we're not limitted to them. Here's an example with a less aggressive saturation and luminosity:
<<< @/.vitepress/components/examples/NonPrimary.vue{2,6,11-17,19-22}
If you only need to react to @change or @select events you can skip hue + @input. Here's an example
<<< @/.vitepress/components/examples/Uncontrolled.vue
It's not always convenient to show the picker in a modal window that is shown/hidden on demand. That's why the color picker has an inline mode where interacting with the color well in the middle will not collapse the palette and the picker will stay opened.
<<< @/.vitepress/components/examples/NonCollapsingMode.vue{2}
The color picker already has built-in screen reader support, but if you wish to customize it further you're free to do so! In fact, if you're app has internationalization (e.g. it's translated in Spanish) you should also translate the aria-label, aria-roledescription, aria-valuetext, and aria-label-color-well. The following example highlights how to tweak the aria-valuetext since it's a dynamic value.
<<< @/.vitepress/components/examples/Accessibility.vue{2,8,19-26,30}
<style> .rcp { margin: 32px auto; } </style>