Examples

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.

Basic

In it's most basic form the color picker can be used as below.

<template>
    <ColorPicker :hue="hue" @input="updateColor" />
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'example-basic',
        setup() {
            const hue = ref(50);

            return {
                hue,
                updateColor(value) {
                    hue.value = value;
                },
            };
        },
    };
</script>

Working with non-primary colors

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:

<template>
    <ColorPicker v-bind="color" @input="updateColor" />
</template>

<script>
    import { reactive } from 'vue';

    export default {
        name: 'example-non-primary',
        setup() {
            const color = reactive({
                hue: 338,
                saturation: 91,
                luminosity: 57,
                alpha: 0.95,
            });

            return {
                color,
                updateColor(value) {
                    color.hue = value;
                },
            };
        },
    };
</script>

Uncontrolled component

If you only need to react to @change or @select events you can skip hue + @input. Here's an example

<template>
    <ColorPicker @select="onColorSelect" />
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'example-uncontrolled',
        setup() {
            const color = ref('hsl(0, 100%, 50%)');

            return {
                onColorSelect(hue) {
                    color.value = `hsl(${hue}, 100%, 50%)`;
                },
            };
        },
    };
</script>

Persistent mode

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.

<template>
    <ColorPicker variant="persistent" :hue="hue" @input="updateColor" />
</template>

<script>
    import { ref } from 'vue';

    export default {
        name: 'example-non-collapsing-mode',
        setup() {
            const hue = ref(50);

            return {
                hue,
                updateColor(value) {
                    hue.value = value;
                },
            };
        },
    };
</script>

Accessibility

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.

<template>
    <ColorPicker v-bind="color" @input="onInput" :aria-valuetext="valuetext" />
</template>

<script>
    import { reactive, computed } from 'vue';

    const colors = ['red', 'yellow', 'green', 'cyan', 'blue', 'magenta', 'red'];

    export default {
        name: 'example-accessibility',
        setup() {
            const color = reactive({
                hue: 141,
                saturation: 60,
                luminosity: 75,
            });

            const valuetext = computed(() => {
                // Note: you don't have to cut corners.
                // Use regular switch/if-else if it makes more sense
                const index = Math.round(color.hue / 60);
                const value = colors[index];

                return `light ${value}`;
            });

            return {
                color,
                valuetext,
                onInput(hue) {
                    color.hue = hue;
                },
            };
        },
    };
</script>