ColorSwatch

A colour swatch shows a colour and says what it is. It is not a control — there is nothing to press and nothing to change — which is what makes it usable anywhere a colour needs to appear: as a picker's trigger, a legend, a preview beside a hex value.

import { ColorSwatch } from "ropav";

shape

 circlesquare

size

 xssmmdlgxl

<ColorSwatch color="#0485f7" />

color takes a Color or a string to parse — hex, rgb(), hsl(), hsb(). Inside a ColorPicker it can be left off entirely, and the swatch shows whatever colour the picker is holding.

Transparency

A checkerboard is painted behind every swatch, so alpha reads as alpha rather than as a lighter shade of the same hue.

color-swatch-transparency.vue

<script setup lang="ts">
import { ColorSwatch } from "ropav";

const alphas = [1, 0.75, 0.5, 0.25, 0];
</script>

<template>
  <ColorSwatch
    v-for="alpha in alphas"
    :key="alpha"
    :color="`rgba(4, 133, 247, ${alpha})`"
    shape="square"
    size="lg"
  />
</template>

No colour at all means a fully transparent swatch rather than an error — the checkerboard on its own, announced as "transparent" rather than by a hue that would mean nothing.

Accessibility

• The swatch is a role="img" with a role description of "color swatch", named after the colour it is showing — "vibrant cyan blue", in the reader's language.
• color-name replaces that generated name for a colour that has one of its own: a Pantone number, a brand colour, a name from your own palette.
• aria-label is appended to the colour name rather than replacing it, so a swatch labelled "Brand" still announces which colour brand is.
• Forced Colors Mode is turned off for the swatch alone. Everywhere else the mode repainting a fill is the point; here it would repaint the one thing the component exists to show.

API

Prop	Type	Default	Description
ariaLabel	string	—	Labels the swatch in addition to the colour's own name, which is kept.
ariaLabelledby	string	—	Id of an element labelling the swatch, appended after the swatch's own id.
color	string | Color	"#fff0"	The colour to show. A string is parsed. Absent means a fully transparent swatch, which is announced as "transparent" rather than by hue.
colorName	string	—	A localized accessible name for the colour, replacing the generated one. For a colour that has a name of its own — a Pantone number, a brand colour — that a hue description cannot give.
id	string	—	Id override for the swatch element.
shape	"circle" | "square"	"circle"
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"

The default slot receives:

Slot prop	Type
color	Color