Vitral 0.2
Form

ColorPicker

A swatch that opens a colour panel, with a value in hex, RGB or HSB and an optional opacity slider.

WAI-ARIA tested

Import

main.ts
import { ColorPicker } from '@vitral/vue';

Inline

RGB: { "r": 16, "g": 185, "b": 129 }
<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const rgb = ref({ r: 16, g: 185, b: 129 });</script> <template>    <ColorPicker v-model="rgb" inline format="rgb" aria-label="Highlight colour" />    <small style="color: var(--vt-text-muted-color)">RGB: {{ rgb }}</small></template>

HSB, without the text box

HSB: { "h": 330, "s": 70, "b": 90 }
<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const hsb = ref({ h: 330, s: 70, b: 90 });</script> <template>    <ColorPicker v-model="hsb" format="hsb" :show-input="false" aria-label="Tint" />    <small style="color: var(--vt-text-muted-color)">HSB: {{ hsb }}</small></template>

Opacity

The value grows two hex digits. Drag the slider, or focus it and use the arrows; Shift moves in tens.

Overlay
Value: 3366994d
Tint, as RGB
Value: { "r": 16, "g": 185, "b": 129, "a": 0.35 }
<script setup lang="ts">import { ColorPicker, StackPanel } from '@vitral/vue';import { ref } from 'vue'; const overlay = ref('3366994d');const glass = ref({ r: 16, g: 185, b: 129, a: 0.35 });</script> <template>    <StackPanel orientation="horizontal" spacing="0.75rem" align="start" wrap>        <StackPanel spacing="0.375rem">            <span id="cp-overlay">Overlay</span>            <ColorPicker v-model="overlay" alpha aria-labelledby="cp-overlay" />            <small style="color: var(--vt-text-muted-color)">Value: {{ overlay }}</small>        </StackPanel>        <StackPanel spacing="0.375rem">            <span id="cp-glass">Tint, as RGB</span>            <ColorPicker v-model="glass" alpha format="rgb" aria-labelledby="cp-glass" />            <small style="color: var(--vt-text-muted-color)">Value: {{ glass }}</small>        </StackPanel>    </StackPanel></template>

Opacity, inline

The chequer is what transparent looks like: it sits under the slider's gradient, the preview and the swatch.

<script setup lang="ts">import { ColorPicker } from '@vitral/vue';import { ref } from 'vue'; const overlay = ref('3366994d');</script> <template>    <ColorPicker v-model="overlay" alpha inline aria-label="Overlay colour" /></template>

Disabled

<script setup lang="ts">import { ColorPicker } from '@vitral/vue';</script> <template>    <ColorPicker model-value="aaaaaa" disabled aria-label="Disabled colour" /></template>

API

Read from packages/vue/src/components/ColorPicker/types.ts, so it says what the component actually accepts.

Props

NameTypeDescription
inlinebooleanShow the panel in place, without a swatch to open it.
format'hex' | 'rgb' | 'hsb'What v-model holds: `'ff0000'` (the default), `{ r, g, b }` or `{ h, s, b }`.
defaultColorstringThe colour the panel starts on while the value is empty. Defaults to `'ff0000'`.
showInputbooleanShow a text box for the hex value under the area. Defaults to true.
alphabooleanOffer an opacity slider, and carry the opacity in the value: eight hex digits, or an `a` beside the channels. Off by default, so a picker that was only ever asked for a colour goes on returning one.
disabledboolean—
placementOverlayPlacement—
appendTostring`'body'` (the default), `'self'` to render in place, or a selector.

Plus pt, dt and unstyled from BaseProps, see pass-through and unstyled mode.

Emits

EventPayloadDescription
changeevent: { originalEvent: Event; value: ColorPickerValue }The colour was changed by the reader: a key, the end of a drag, or a typed hex value.
show——
hide——