ColorSwatch

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

Preview

Source code

import { useState } from "react";
import { Color } from "internationalized-color";
import "internationalized-color/css";
import { ColorSwatch } from "@urcolor/react";

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)")!,
];

export default function ColorSwatchBasic() {
  const [selected, setSelected] = useState(0);

  return (
    <div className="flex items-center gap-3">
      {colors.map((color, i) => (
        <ColorSwatch.Root
          key={i}
          value={color}
          alpha
          className="flex size-10 cursor-pointer items-center justify-center rounded-lg"
          onClick={() => setSelected(i)}
        >
          <svg
            className={`size-5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] transition-opacity duration-150 ${selected === i ? "opacity-100" : "opacity-0"}`}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </ColorSwatch.Root>
      ))}
    </div>
  );
}

Anatomy

<ColorSwatch.Root />

Examples

Basic

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

Source code

import { useState } from "react";
import { Color } from "internationalized-color";
import "internationalized-color/css";
import { ColorSwatch } from "@urcolor/react";

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)")!,
];

export default function ColorSwatchBasic() {
  const [selected, setSelected] = useState(0);

  return (
    <div className="flex items-center gap-3">
      {colors.map((color, i) => (
        <ColorSwatch.Root
          key={i}
          value={color}
          alpha
          className="flex size-10 cursor-pointer items-center justify-center rounded-lg"
          onClick={() => setSelected(i)}
        >
          <svg
            className={`size-5 text-white drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)] transition-opacity duration-150 ${selected === i ? "opacity-100" : "opacity-0"}`}
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            strokeWidth={2}
            strokeLinecap="round"
            strokeLinejoin="round"
          >
            <polyline points="20 6 9 17 4 12" />
          </svg>
        </ColorSwatch.Root>
      ))}
    </div>
  );
}

API Reference

ColorSwatch.Root

Renders a color preview with an automatic checkerboard background.

Prop	Type	Default	Description
value	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.