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

# Semantic Color Palette

> A semantic color palette is commonly applied to represent positive versus negative values, such as profit and loss, performance margins, or sentiment analysis.

## Use when:

Semantic, or status, colors show the condition of data relative to a baseline.
Red indicates danger or error, yellow signals a warning, and green represents
normal or successful performance. These colors help users quickly understand
status at a glance.

### Light mode

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

### Dark mode

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

### Application Guidance

Green = success

Yellow = warning

Red = danger

Blue/grey = default

Start with tier 1 colors for all semantic needs, if your specific instance needs more nuance use the other tiers to illustrate importance by using saturation.
See example below:

### Real Example

See the invoice chart below. Both scenarios should signal a warning state. Use the tier 3 color for the variable with lower urgency. If an additional variable needs to be introduced, apply the patterned treatment as the intermediate option to indicate moderate urgency.

Use this pattern structure for success, warning, and default.

![real example, light mode](https://mintcdn.com/servicetitan/7ob8rxQFEm423LLy/images/docs/web/data-visualization/semantic-color-palette/semantic-real-example-light.png?fit=max\&auto=format\&n=7ob8rxQFEm423LLy\&q=85\&s=05ecbe7c68725ac2a3f52e18fe000a77)

### How to Use

The following Do’s and Don’ts illustrate best practices and common mistakes to help guide effective use of the diverging color palette in data visualizations.

![bar chart using 3 variables for each bar](https://mintcdn.com/servicetitan/7ob8rxQFEm423LLy/images/docs/web/data-visualization/semantic-color-palette/semantic-do-diverging-light.png?fit=max\&auto=format\&n=7ob8rxQFEm423LLy\&q=85\&s=8c1c796c0606b5c7d73a5f76744d5ec8)

**Do**
use the diverging color palette to convey data status and direction, applying patterns for unclear states, yellow for warnings, green for success, and red for critical issues to support quick and consistent interpretation.

![bar chart with 3 variables using categorical palette](https://mintcdn.com/servicetitan/7ob8rxQFEm423LLy/images/docs/web/data-visualization/semantic-color-palette/semantic-dont-outside-diverging-light.png?fit=max\&auto=format\&n=7ob8rxQFEm423LLy\&q=85\&s=b37b06060cf194df2f4089c5ed0a7e93)

**Don’t**
use colors outside the defined diverging palette, as it introduces confusion, weakens meaning, and makes data interpretation less accurate.

![bar chart with 3 variables using categorical palette](https://mintcdn.com/servicetitan/7ob8rxQFEm423LLy/images/docs/web/data-visualization/semantic-color-palette/semantic-do-convey-message-light.png?fit=max\&auto=format\&n=7ob8rxQFEm423LLy\&q=85\&s=8bd11c0d7aad626dc8219b41348e7550)

**Do**
choose colors intentionally to convey the right message, using green for success, red for danger, yellow for warning, and patterned fills for neutral or pending states, ensuring alignment with data status to avoid misinterpretation and enhance clarity.

![bar chart with 3 variables using categorical palette](https://mintcdn.com/servicetitan/7ob8rxQFEm423LLy/images/docs/web/data-visualization/semantic-color-palette/semantic-dont-non-semantic-light.png?fit=max\&auto=format\&n=7ob8rxQFEm423LLy\&q=85\&s=ead1eaab7322c65701c3e7a0044f40bd)

**Don’t**
use the diverging color palette for data that doesn't represent a clear positive, negative, or neutral status, as it can create confusion and lead to incorrect interpretations.

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