Colour picker

VColorPicker chooses a colour with a saturation and brightness area, a hue track and a text field that accepts hex, rgb(), hsl() and oklch(). Its tracks are native ranges, so assistive technology adjusts each channel on its own.

Usage

vue

#3b82f6

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('#3b82f6')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Examples

Formats

format decides how the value is written: hex, rgb, hsl or oklch. The menu beside the field changes only what the field shows. The picker works in sRGB and clips an oklch() colour outside it.

vue

oklch(62.3% 0.188 259.8)

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('oklch(62.3% 0.188 259.8)')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" format="oklch" />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Opacity

alpha adds an opacity track. The alpha is written into the value only below 1.

vue

rgb(59 130 246 / 0.6)

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'

const color = ref<string | null>('rgb(59 130 246 / 0.6)')
</script>

<template>
  <div class="row">
    <VColorPicker v-model="color" format="rgb" alpha />
    <code>{{ color }}</code>
  </div>
</template>

<style scoped>
.row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--vectis-space-4);
}
</style>

Swatches

swatches offers preset colours as native radios. Give { color, label } to name a swatch for screen readers.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { VColorPicker } from 'vectis-ui'
import type { ColorSwatch } from 'vectis-ui'

const color = ref<string | null>('#0ea5e9')
const swatches: ColorSwatch[] = [
  { color: '#0ea5e9', label: 'Ocean' },
  { color: '#16a34a', label: 'Forest' },
  { color: '#f59e0b', label: 'Sun' },
  '#e11d48',
  '#7c3aed',
  '#0f172a',
]
</script>

<template>
  <VColorPicker v-model="color" :swatches="swatches" label="Brand colours" />
</template>

API

Props

Prop	Type	Default
`format`	`ColorFormat'hex' \| 'rgb' \| 'hsl' \| 'oklch'`	`'hex'`
How the value is written. The text field accepts all four formats.
`alpha`	`boolean`	`false`
Adds an opacity track and writes the alpha below 1.
`swatches`	`ColorSwatch[]`	none
Preset colours: a colour string or `{ color, label }`.
`hideInput`	`boolean`	`false`
Hides the text field and its format menu.
`hideEyeDropper`	`boolean`	`false`
Hides the eyedropper button, otherwise shown where the browser supports the `EyeDropper` API.
`disabled`	`boolean`	`false`
Disables every control.
`label`	`string`	none
Accessible name of the picker. Defaults to the library dictionary.
`name`	`string`	none
Field name in form submissions, through a hidden input.
`v-model`	`string \| null`	`null`
Colour written in `format`, or `null` before one is chosen.

Types

Types used in the API tables. Import exported types from vectis-ui.

export type ColorSwatch = string | { color: string; label: string }

CSS variables

Token	Value
`--vectis-control-size-color-picker-width`	`16rem`
`--vectis-control-size-color-picker-area`	`10rem`
`--vectis-control-size-color-picker-track`	`0.75rem`
`--vectis-control-size-color-picker-thumb`	`1rem`
`--vectis-control-size-color-picker-preview`	`2rem`
`--vectis-control-size-color-picker-swatch`	`1.5rem`
`--vectis-control-size-color-picker-checker`	`0.5rem`