---
title: "ColorSwatchPicker"
description: "A palette to choose a color from, such as a service’s color in an agenda. The palette is the app’s; allowsCustomColor adds the system color chooser."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ColorSwatchPicker

## Default palette

Without names, screen readers describe each color in the locale.

```tsx
import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const DefaultExample = () => {
  const [color, setColor] = useState<string | null>(null);
  return <ColorSwatchPicker label="Tag color" onChange={setColor} value={color} />;
};

<DefaultExample />
```

## App palette with a custom color

```tsx
import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const SERVICE_COLORS = [
  { value: '#00877c', name: 'Teal' },
  { value: '#2971c6', name: 'Blue' },
  { value: '#884bc0', name: 'Violet' },
  { value: '#c63c8a', name: 'Pink' },
  { value: '#be8700', name: 'Amber' },
];

const CustomExample = () => {
  const [color, setColor] = useState<string | null>('#2971c6');
  return (
    <ColorSwatchPicker
      allowsCustomColor
      colors={SERVICE_COLORS}
      label="Color in the agenda"
      onChange={setColor}
      value={color}
    />
  );
};

<CustomExample />
```

## Palette keys drawn with theme colors

The app stores a key (blue) and each swatch shows a theme variable, so it follows light and dark mode.

```tsx
import { useState } from 'react';
import { ColorSwatchPicker } from '@arbol-ai/ui';

const PROFESSIONAL_COLORS = [
  { value: 'blue', color: 'var(--color-blue-9)', name: 'Blue' },
  { value: 'green', color: 'var(--color-green-9)', name: 'Green' },
  { value: 'amber', color: 'var(--color-amber-9)', name: 'Amber' },
  { value: 'red', color: 'var(--color-red-9)', name: 'Red' },
  { value: 'gray', color: 'var(--color-gray-9)', name: 'Gray' },
];

const KeysExample = () => {
  const [color, setColor] = useState<string | null>('blue');
  return (
    <ColorSwatchPicker
      colors={PROFESSIONAL_COLORS}
      label="Color of the professional"
      onChange={setColor}
      value={color}
    />
  );
};

<KeysExample />
```

## Source

The examples above are [`src/components/color-swatch-picker/color-swatch-picker.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/color-swatch-picker/color-swatch-picker.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/pickers/color-swatch-picker/index.mdx