ColorSwatch

A ColorSwatch displays a preview of a selected color.

Example#

<ColorSwatch color="#f00" />

<ColorSwatch color="#f00" />

<ColorSwatch color="#f00" />

Value#

ColorSwatch accepts a value via the color prop. The value should be a color string or Color object.

In the example below, the parseColor function is used to parse the initial color from an HSL string. This is passed to the value prop of a ColorSlider, and the color prop of a ColorSwatch to show a preview of the selected color.

import {parseColor, ColorSlider} from '@react-spectrum/color';

function Example() {
  let [color, setColor] = React.useState(parseColor('hsl(0, 100%, 50%)'));
  return (
    <Flex direction="column" gap="size-100">
      <ColorSlider value={color} onChange={setColor} channel="hue" />
      <ColorSwatch color={color} />
    </Flex>
  );
}

import {
  ColorSlider,
  parseColor
} from '@react-spectrum/color';

function Example() {
  let [color, setColor] = React.useState(
    parseColor('hsl(0, 100%, 50%)')
  );
  return (
    <Flex direction="column" gap="size-100">
      <ColorSlider
        value={color}
        onChange={setColor}
        channel="hue"
      />
      <ColorSwatch color={color} />
    </Flex>
  );
}

import {
  ColorSlider,
  parseColor
} from '@react-spectrum/color';

function Example() {
  let [color, setColor] =
    React.useState(
      parseColor(
        'hsl(0, 100%, 50%)'
      )
    );
  return (
    <Flex
      direction="column"
      gap="size-100"
    >
      <ColorSlider
        value={color}
        onChange={setColor}
        channel="hue"
      />
      <ColorSwatch
        color={color}
      />
    </Flex>
  );
}

No value#

When no color prop is provided, the value is null, or the color is transparent, ColorSwatch displays a red slash across the swatch.

<ColorSwatch color={null} />

<ColorSwatch color={null} />

<ColorSwatch
  color={null}
/>

Labeling#

By default, ColorSwatch includes a localized color description for screen reader users (e.g. "dark vibrant blue") as an aria-label. If you have a more specific color name (e.g. Pantone colors), the automatically generated color description can be overridden via the colorName prop. An additional label describing the context of the color swatch (e.g. "Background color") can also be provided via the aria-label or aria-labelledby props.

In the example below, the full accessible name of the color swatch will be "Fire truck red, Background color".

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

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

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

Props#

Visual options#

Size#

View guidelines

<Flex gap="size-100">
  <ColorSwatch color="#ff0" size="XS" />
  <ColorSwatch color="#ff0" size="S" />
  <ColorSwatch color="#ff0" size="M" />
  <ColorSwatch color="#ff0" size="L" />
</Flex>

<Flex gap="size-100">
  <ColorSwatch color="#ff0" size="XS" />
  <ColorSwatch color="#ff0" size="S" />
  <ColorSwatch color="#ff0" size="M" />
  <ColorSwatch color="#ff0" size="L" />
</Flex>

<Flex gap="size-100">
  <ColorSwatch
    color="#ff0"
    size="XS"
  />
  <ColorSwatch
    color="#ff0"
    size="S"
  />
  <ColorSwatch
    color="#ff0"
    size="M"
  />
  <ColorSwatch
    color="#ff0"
    size="L"
  />
</Flex>

Rounding#

View guidelines

<Flex gap="size-100">
  <ColorSwatch color="#0ff" rounding="none" />
  <ColorSwatch color="#0ff" rounding="default" />
  <ColorSwatch color="#0ff" rounding="full" />
</Flex>

<Flex gap="size-100">
  <ColorSwatch color="#0ff" rounding="none" />
  <ColorSwatch color="#0ff" rounding="default" />
  <ColorSwatch color="#0ff" rounding="full" />
</Flex>

<Flex gap="size-100">
  <ColorSwatch
    color="#0ff"
    rounding="none"
  />
  <ColorSwatch
    color="#0ff"
    rounding="default"
  />
  <ColorSwatch
    color="#0ff"
    rounding="full"
  />
</Flex>

Custom width#

View guidelines

<ColorSwatch color="#00f" width="size-1000" />

<ColorSwatch color="#00f" width="size-1000" />

<ColorSwatch
  color="#00f"
  width="size-1000"
/>