IColorPicker ​

A saturation/brightness plane, a hue ramp, an optional opacity ramp, a hex field and optional presets.

<script setup lang="ts">
const brand = ref('#16a372')
</script>

<template>
  <IColorPicker v-model="brand" />
</template>

The model is a hex string ​

#16a372, or eight digits with alpha — the form that goes straight into a stylesheet, a database column or a design token.

const brand = ref('#16a372') //     six digits
const overlay = ref('#3b82f6cc') // eight, with alpha

Opacity ​

alpha adds an opacity ramp and two more hex digits. The ramp sits on a chequerboard so the transparent end is readable.

<IColorPicker v-model="overlay" alpha />

Presets ​

swatches offers a set of ready colours under the picker. Pair it with hide-field when the spectrum is not the point and you only want the presets.

<IColorPicker
  v-model="colour"
  :swatches="['#16a372', '#3b82f6', '#8b5cf6', '#ff5733', '#f59e0b', '#64748b']"
/>

For a handful of named options — "Red", "Green", "Blue" — use IRadioGroup instead.

Props ​

Events ​

Styling ​

The saturation plane and each channel ramp are painted as inline backgrounds. Style their geometry, radius and rings through ui, but leave area, track and swatch without a background of your own — it covers the colour being picked.

Accessibility ​

The plane is a two-dimensional slider: arrow keys move it in both axes, and it announces each channel by name and value. Each ramp is a slider with its own label, so hue and opacity can be set from the keyboard.