# Source: https://stately.ai/docs/colors.mdx

# Colors (/docs/colors)
import { Info, Star } from 'lucide-react';

You can highlight your machineâs state and event nodes with colors. You can use colors however you like; some ideas include:

* Color coding groups or types of states or events
* Emphasizing success or error states
* Making your machines match your brand

<Callout>
  Colors are a premium feature of Stately Studio. [Check out the features on our Pro plan](studio-pro-plan), [Team plan](studio-team-plan), [Enterprise plan](studio-enterprise-plan) or [upgrade your existing plan](https://stately.ai/registry/billing).
</Callout>

<EmbedMachine name="Video player" embedURL="https://stately.ai/registry/editor/embed/7b5d60dc-94b0-4a1e-9ade-ea644b8cc35f?machineId=3b1987cf-4346-4a10-bb03-2c9f0c363bda" />

<Callout>
  A note on accessibility: not everyone perceives color the same way, and as many as 8% of men and 0.5% of women are [color blind](https://www.nei.nih.gov/learn-about-eye-health/eye-conditions-and-diseases/color-blindness). Ensure your statecharts are inclusive by using color to emphasize or decorate your machines and [do not use color as the only way to convey information](https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html).
</Callout>

## Change the color of a state or event

All states and events have a default color. In dark mode, the default color is grey. In light mode, the default color is white.

When you hover over the color options, a preview of the color will be shown on the selected state or event.

Colors are faded out in Simulate mode to make the current state and possible events easier to distinguish.

### On the canvas

1. Select the state or event whose color you want to change.
2. Choose the circular color swatch in the center of the Edit menu to open the **Color state** or **Color event** options.
3. Choose your desired color from the available color options.

### Use the details panel

1. Select the state or event whose color you want to change.
2. Open the <Info size={18} /> **Details** panel from the right tool menu.
3. Choose the circular color swatch in the top right of the <Info size={18} /> **Details** panel to open the **Color state** or **Color event** options.
4. Choose your desired color from the available color options.

## Available colors

<EmbedMachine name="Colors" embedURL="https://stately.ai/registry/editor/embed/7b5d60dc-94b0-4a1e-9ade-ea644b8cc35f?machineId=34da5c64-3aed-455d-883b-8b6d5ac4c9d5" />

* Default: grey in dark mode, white in light mode
* Purple
* Pink
* Red
* Orange
* Yellow
* Green
* Blue