ColorSwatch

A ColorSwatch displays a preview of a selected color.

size

rounding

import {ColorSwatch} from '@react-spectrum/s2';

<ColorSwatch color="rgb(255, 100, 50)" />

Value

A ColorSwatch displays a color value passed via the color prop. The value can be a string or Color object. When no color is provided or the color is transparent, a red slash will be displayed.

import {ColorSwatch} from '@react-spectrum/s2';

<div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
  <ColorSwatch color="#ff6600" />
  <ColorSwatch color="rgb(255, 0, 255)" />
  <ColorSwatch color="hsl(120, 100%, 42%)" />
  <ColorSwatch color="rgba(0, 150, 255, 0.5)" />
  <ColorSwatch />
</div>

Custom sizing

ColorSwatch can be resized using the styles prop.

import {ColorSwatch} from '@react-spectrum/s2';
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

<ColorSwatch
  color="#10b981"
  styles={style({width: 80, height: 40})} />

Accessibility

By default, ColorSwatch includes a localized color description for screen reader users (e.g. "dark vibrant blue"). Use the colorName prop to override this. Set an aria-label to provide additional context. In this example, a screen reader will announce "Fire truck red, Background color".

import {ColorSwatch} from '@react-spectrum/s2';

<ColorSwatch
  color="#f00"
  aria-label="Background color"
  colorName="Fire truck red" />

API

Name	Type	Default
`size`	`'XS' \| 'S' \| 'M' \| 'L'`	Default: `'M'`
The size of the ColorSwatch.
`rounding`	`'default' \| 'none' \| 'full'`	Default: `'default'`
The corner rounding of the ColorSwatch.
`styles`	`StylesPropWithHeight`	Default: —
Spectrum-defined styles, returned by the `style()` macro.
`color`	`string \| Color`	Default: —
The color value to display in the swatch.
`colorName`	`string`	Default: —
A localized accessible name for the color. By default, a description is generated from the color value, but this can be overridden if you have a more specific color name (e.g. Pantone colors).