> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Categorical Color Palette

> Our solution for visualizations with 5+ variables.

**Utilize these colors in the order shown below.** For example, the first 3
variables in your data set must use blue, cyan, and purple, for visual
consistency across the experience.

Accessibility requirement: when using this palette, you must include a direct
labeling option on your visualization.

#### Light Mode

![categorical light mode](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-light-mode.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=ee6181ce4bf3e08e213c11d4e2b372b8)

#### Dark mode

![categorical dark mode](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-dark-mode.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=eca73757fff3222098038c5d9d27e025)

![bar chart using categorical color
palette](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-example.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=ca0e6e500ca8b29c43823d8a92faf524)

### How to Use

![donut chart using 4 variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-do-4-variables.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=d67eb4deda6882496a9a34b59458bc10)

**Do**
keep your data visualizations to 4 variables max

![donut chart with 9 variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-do-9-categories.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=6bda62a1916352fd55ba2d8ec00551b5)

**Do**
use the categorical color palette to clearly show up to 9 categories, grouping extras into an “Other” category and avoiding repeated colors to maintain clarity and consistency.

![donut chart with 9+ variables](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-dont-9-plus.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=f618d79ae2bced23a06a18e0c8412526)

**Don’t**
use more than 9 variables. Try to rework it to use fewer.

### How to Use

![bar chart using 3 variables for each bar](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-do-consistent-stack.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=8505169c3681c93c3adddfde0f9a57b9)

**Do**
use a single, consistent color in stacked bar charts to represent the same category across intervals, apply a stroke to the lightest shade and pattern for accessibility, and use 4px spacing for visibility.

![bar chart with 3 variables using categorical palette](https://mintcdn.com/servicetitan/mzb8vUC8QRJt2y_W/images/docs/web/data-visualization/categorical-color-palette/categorical-dont-less-5.png?fit=max\&auto=format\&n=mzb8vUC8QRJt2y_W\&q=85\&s=290a075087b7e1118dce8a89b2646282)

**Don’t**
do not use colors from our categorical palette on charts with less than 5 variables.

### Real Example showing a donut chart with 8 variables

![categorical dark mode](https://mintcdn.com/servicetitan/UjzR2VvA6ZE_Niqw/images/docs/web/data-visualization/categorical-color-palette/categorical-allocated-annual-budget.png?fit=max\&auto=format\&n=UjzR2VvA6ZE_Niqw\&q=85\&s=f855ae70f69ffde07861438d83015629)

> **[Questions? Challenges?](https://servicetitan.enterprise.slack.com/archives/C0881LFTGDR)**
>
> Contact the Visual Design team on the #ask-vizd channel


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.