Get started →

    Color

    The <Color> component displays a color swatch with its value and an optional name. Click to copy the color value to your clipboard.

    Basic

    Code

    import { Color } from '@theme'

<Color value="#d97706" />
<Color value="#2563eb" />
<Color value="#059669" />

    Output

    With names

    Code

    <Color value="#d97706" name="Brand Cider" />
<Color value="#2563eb" name="Info Blue" />
<Color value="#059669" name="Success Green" />
<Color value="#dc2626" name="Error Red" />
<Color value="#d97706" name="Warning Amber" />

    Output

    In a grid

    Code

    import { Color, Columns, Column } from '@theme'

<Columns cols={3}>
  <Column>
    <Color value="#d97706" name="Brand" />
  </Column>
  <Column>
    <Color value="#2563eb" name="Info" />
  </Column>
  <Column>
    <Color value="#059669" name="Success" />
  </Column>
</Columns>

    Output

    Props

    PropTypeRequiredDefaultDescription
    valuestringyes—Color value (hex, rgb, hsl)
    namestringno—Display name for the color