Build Color Swatches

Let's build color swatches for displaying and selecting colors step by step.

Here's what we'll end up with:

Click to view the full code

ColorSwatchGuide.tsx

import { useState } from "react";
import "internationalized-color/css";
import { Color } from "internationalized-color";
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 ColorSwatchGuide() {
  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>
  );
}

Step 1: Set up state

Start by importing the color model and defining your colors.

import { useColor } from "@urcolor/react"; 

function MySwatch() {
  const { color, setColor } = useColor("hsl(210, 80%, 50%)"); 
}

Step 2: Render a swatch

ColorSwatch.Root renders a single color as a filled element. Pass the color via value.

import { useColor, ColorSwatch } from "@urcolor/react"; 

function MySwatch() {
  const { color } = useColor("hsl(210, 80%, 50%)");

  return (
    <ColorSwatch.Root
      value={color}
      className="size-10 rounded-lg"
    />
  );
}

TIP

All components are completely unstyled — the classes above are just an example using Tailwind CSS. Use any styling approach you prefer.

Alpha transparency

Set the alpha prop to show a checkerboard pattern behind semi-transparent colors:

<ColorSwatch.Root
  value={color}
  alpha
  className="size-10 rounded-lg"
/>

Checkerboard size

Customize the checkerboard pattern size with checkerSize (in pixels):

<ColorSwatch.Root
  value={color}
  alpha
  checkerSize={8}
  className="size-10 rounded-lg"
/>

Multiple swatches

Render a palette by looping over an array of colors:

import { useState } from "react";
import { Color } from "internationalized-color";
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)")!,
];

function MyPalette() {
  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="size-10 cursor-pointer rounded-lg"
          onClick={() => setSelected(i)}
        />
      ))}
    </div>
  );
}

String colors

You can also pass a plain CSS color string instead of a Color object:

<ColorSwatch.Root
  value="oklch(0.6 0.15 210)"
  className="size-10 rounded-lg"
/>