useColorSwatch

Provides the accessibility implementation for a color swatch component. A color swatch displays a preview of a selected color.

API#

Features#

A color swatch may seem simple to build with a <div>, but requires additional semantics and labeling for accessibility.

• Accessible – Includes a localized color description for screen reader users (e.g. "dark vibrant blue"). Uses the img role with a custom aria-roledescription of "color swatch".
• International – Accessible color description and role description are translated into over 30 languages.

Anatomy#

A color swatch consists of a color preview, which is exposed to assistive technology with a localized color description.

useColorSwatch returns props that you should spread onto the color swatch element, along with the parsed color value:

Example#

This example renders a color swatch component, with a checkerboard pattern behind partially transparent colors.

import {useColorSwatch, AriaColorSwatchProps} from '@react-aria/color';

function ColorSwatch(props: AriaColorSwatchProps) {
  let {colorSwatchProps, color} = useColorSwatch(props);

  return (
    <div 
      {...colorSwatchProps}
      style={{
        ...colorSwatchProps.style,
        width: 32,
        height: 32,
        borderRadius: 4,
        background: `linear-gradient(${color}, ${color}),
          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
      }} />
  );
}

<ColorSwatch color="#f00a" />

import {
  AriaColorSwatchProps,
  useColorSwatch
} from '@react-aria/color';

function ColorSwatch(props: AriaColorSwatchProps) {
  let { colorSwatchProps, color } = useColorSwatch(props);

  return (
    <div
      {...colorSwatchProps}
      style={{
        ...colorSwatchProps.style,
        width: 32,
        height: 32,
        borderRadius: 4,
        background: `linear-gradient(${color}, ${color}),
          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
      }}
    />
  );
}

<ColorSwatch color="#f00a" />

import {
  AriaColorSwatchProps,
  useColorSwatch
} from '@react-aria/color';

function ColorSwatch(
  props:
    AriaColorSwatchProps
) {
  let {
    colorSwatchProps,
    color
  } = useColorSwatch(
    props
  );

  return (
    <div
      {...colorSwatchProps}
      style={{
        ...colorSwatchProps
          .style,
        width: 32,
        height: 32,
        borderRadius: 4,
        background:
          `linear-gradient(${color}, ${color}),
          repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
      }}
    />
  );
}

<ColorSwatch color="#f00a" />

Usage#

The following examples show how to use the ColorSwatch component created in the above example.

Value#

ColorSwatch accepts a value via the color prop. The value should be a color string or Color object. This example uses the parseColor function to parse a color from an HSL string.

import {parseColor} from '@react-stately/color';

<ColorSwatch color={parseColor('hsl(35, 100%, 50%)')} />

import {parseColor} from '@react-stately/color';

<ColorSwatch color={parseColor('hsl(35, 100%, 50%)')} />

import {parseColor} from '@react-stately/color';

<ColorSwatch
  color={parseColor(
    'hsl(35, 100%, 50%)'
  )}
/>

Labeling#

By default, useColorSwatch 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"
/>