Colors

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

Colors are a premium feature of Stately Studio. Check out the features on our Pro plan, Team plan, Enterprise plan or upgrade your existing plan.

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. 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.

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 Details panel from the right tool menu.
3. Choose the circular color swatch in the top right of the Details panel to open the Color state or Color event options.
4. Choose your desired color from the available color options.

Available colors

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