ColorSwatch

A color preview element that displays a color with a checkerboard background for visualizing alpha transparency.

Preview

Source code

<script setup lang="ts">
import { shallowRef } from "vue";
import { Color } from "internationalized-color";
import "internationalized-color/css";
import { ColorSwatchRoot } from "@urcolor/vue";
import { Check } from "lucide-vue-next";

const colors = [
  Color.parse("hsl(210, 80%, 50%)")!,
  Color.parse("hsl(350, 90%, 60%)")!,
  Color.parse("hsl(120, 60%, 45%)")!,
  Color.parse("hsla(45, 100%, 55%, 0.5)")!,
];

const selected = shallowRef(colors[0]);
</script>

<template>
  <div class="flex items-center gap-3">
    <ColorSwatchRoot
      v-for="(color, i) in colors"
      :key="i"
      :model-value="color"
      alpha
      class="flex size-10 cursor-pointer items-center justify-center rounded-lg"
      @click="selected = color"
    >
      <Check
        class="
          size-5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]
          transition-opacity duration-150
        "
        :class="selected === color ? 'opacity-100' : 'opacity-0'"
      />
    </ColorSwatchRoot>
  </div>
</template>

Anatomy

<template>
  <ColorSwatchRoot />
</template>

Examples

Basic

A set of color swatches, including one with alpha transparency.

Source code

<script setup lang="ts">
import { shallowRef } from "vue";
import { Color } from "internationalized-color";
import "internationalized-color/css";
import { ColorSwatchRoot } from "@urcolor/vue";
import { Check } from "lucide-vue-next";

const colors = [
  Color.parse("hsl(210, 80%, 50%)")!,
  Color.parse("hsl(350, 90%, 60%)")!,
  Color.parse("hsl(120, 60%, 45%)")!,
  Color.parse("hsla(45, 100%, 55%, 0.5)")!,
];

const selected = shallowRef(colors[0]);
</script>

<template>
  <div class="flex items-center gap-3">
    <ColorSwatchRoot
      v-for="(color, i) in colors"
      :key="i"
      :model-value="color"
      alpha
      class="flex size-10 cursor-pointer items-center justify-center rounded-lg"
      @click="selected = color"
    >
      <Check
        class="
          size-5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]
          transition-opacity duration-150
        "
        :class="selected === color ? 'opacity-100' : 'opacity-0'"
      />
    </ColorSwatchRoot>
  </div>
</template>

API Reference

ColorSwatchRoot

Renders a color preview with an automatic checkerboard background.

Prop	Type	Default	Description
modelValue	Color | string | null	—	The color value to display.
alpha	boolean	false	When true, reflects the color's alpha channel. When false, displays the color as fully opaque.
checkerSize	number	16	The checkerboard tile size in pixels.

CSS Variables

The component exposes CSS custom properties on the root element for advanced styling:

Variable	Description
--swatch-color	The resolved CSS color string (with or without alpha based on the alpha prop).
--swatch-color-opaque	The color at full opacity.
--swatch-alpha	The color's alpha value (0–1).
--swatch-checkerboard	The checkerboard background gradient.

Accessibility

ColorSwatch is a purely visual element that displays a color preview.

ARIA Labels

Attribute	Description
role="img"	Identifies the swatch as a presentational image for screen readers.
aria-label	Describes the displayed color value for assistive technologies.