ColorSwatchPicker

A swatch picker offers the colours somebody has already decided on — a brand palette, a set of label colours. That is the whole difference from the rest of the colour components: a ColorArea or a ColorSlider lets the reader reach any colour, and this one deliberately does not.

import {
  ColorSwatchPicker,
  ColorSwatchPickerIndicator,
  ColorSwatchPickerItem,
  ColorSwatchPickerSwatch,
} from "ropav";

Each ColorSwatchPickerItem carries a color and holds two parts: ColorSwatchPickerSwatch paints it, and ColorSwatchPickerIndicator marks the selected one.

variant

size

layout

template

<ColorSwatchPicker aria-label="Brand colour" default-value="#3b82f6">
  <ColorSwatchPickerItem color="#f43f5e">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#8b5cf6">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#3b82f6">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
  <ColorSwatchPickerItem color="#10b981">
    <ColorSwatchPickerSwatch />
    <ColorSwatchPickerIndicator />
  </ColorSwatchPickerItem>
</ColorSwatchPicker>

A palette

variant is the shape of a swatch and layout is how they are arranged — grid wraps into rows, stack runs down a column.

color-swatch-picker-presets.vue

vue

<script setup lang="ts">
import {
  ColorSwatchPicker,
  ColorSwatchPickerIndicator,
  ColorSwatchPickerItem,
  ColorSwatchPickerSwatch,
} from "ropav";

const presets = ["#f43f5e", "#d946ef", "#8b5cf6", "#3b82f6", "#06b6d4", "#10b981", "#84cc16"];
</script>

<template>
  <ColorSwatchPicker aria-label="Brand colour" default-value="#3b82f6" variant="square">
    <ColorSwatchPickerItem v-for="preset in presets" :key="preset" :color="preset">
      <ColorSwatchPickerSwatch />
      <ColorSwatchPickerIndicator />
    </ColorSwatchPickerItem>
  </ColorSwatchPicker>
</template>

layout picks the modifier and nothing else: the keyboard stays two-dimensional either way, so the arrow keys work the same in a column as in a grid.

Inside a ColorPicker the picker reads and writes the shared colour, which is how a palette sits beside a slider and the two stay in step.

Accessibility

Each swatch is a role="img" announced by the colour's own name — "vibrant red", not #f43f5e — generated from the value, so a palette is usable without seeing it.
color-name on a swatch replaces that generated name where your own is better. A brand name belongs there: "Ocean" says more than "medium blue" to somebody choosing from your palette.
The picker names itself if nothing else does, so aria-label is what says which colour on the page is being chosen — the swatches only say what they are, not what they are for.

API