# Color scheme

Use **Color scheme** to choose colors for your [brand](#brand), [texts](#text), [background](#background), and [additional elements](#additional).

{% hint style="success" %}
The color scheme settings impact all elements, but you can fine-tune individual elements using the [Elements ](/branding/create-branding/elements.md)tab.
{% endhint %}

You can instantly see how your changes look in the preview on the left. It updates in real time as you adjust the color scheme.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf0H0sdMLBL7V-fsqz-y8UvmgdSk2d5NYcxQ6Y-AA6uIdtylfmmy6YGlFmikZ_3PLXpwXAjlJvgJri8ZGk68H-5vyk7OfTDNerVAwVBG9owD_Kun4W1dB2DrIFt9GY8RAMqxWD3xQ?key=qqshmpx3ASBK9AwVAE38CCWQ" alt=""><figcaption></figcaption></figure>

{% tabs %}
{% tab title="Brand" %}
Brand colors establish the visual identity of the platform, creating recognition and consistency across all components and interfaces.

<table><thead><tr><th width="134">Property</th><th>Description</th></tr></thead><tbody><tr><td>Primary</td><td>The main brand color. Applied to interactive elements, buttons, links, progress indicators, slider filled portions, active tabs, selected items, checkboxes, radio buttons, and primary call-to-action elements.</td></tr><tr><td>Secondary</td><td>Supporting brand color used for secondary actions, alternative highlights, and complementary elements with less visual emphasis than primary brand elements.</td></tr><tr><td>Hover light</td><td>Applied to interactive elements during hover states in light contexts, providing subtle feedback without overwhelming the user interface.</td></tr><tr><td>Hover accent</td><td>Used for hover states that require stronger visual emphasis. Serves as the hover state for the primary color</td></tr><tr><td>Disabled</td><td>Applied to inactive buttons, form controls, and other interactive elements that are currently unavailable, visually communicating their disabled state.</td></tr><tr><td>Neutral</td><td>Used for progress track backgrounds, unfilled portions of sliders and charts, subtle backgrounds, and non-emphasized UI elements where visual weight should be minimal.</td></tr><tr><td>Border</td><td>Applied to dividers, containers, form inputs, cards, tables, accordions, and element boundaries throughout the interface for visual structure and separation.</td></tr></tbody></table>
{% endtab %}

{% tab title="Text" %}
Text colors ensure readability and create a hierarchical structure in content, helping users scan and comprehend information effectively.

<table><thead><tr><th width="137">Property</th><th>Description</th></tr></thead><tbody><tr><td>Primary</td><td>Used for main content text, headings, labels, table content, most UI text elements, navigation items, and critical information requiring clear readability.</td></tr><tr><td>Secondary</td><td>Applied to supporting text, descriptions, captions, timestamps, less emphasized content, chapter labels, and secondary information in charts and tables.</td></tr><tr><td>Light</td><td>Used for text that appears on dark backgrounds, ensuring sufficient contrast for readability. Also applied to button text on colored backgrounds and format labels.</td></tr><tr><td>Accent</td><td>Used for interactive text elements, links, emphasized content, and to draw attention to specific information within content areas.</td></tr></tbody></table>
{% endtab %}

{% tab title="Background" %}
Background colors define content areas, establish hierarchy, and create appropriate contrast for content visibility across the interface.

<table><thead><tr><th width="120">Property</th><th>Description</th></tr></thead><tbody><tr><td>Primary</td><td>Used for main content areas, cards, modals, containers, table cells, form elements, and most UI component backgrounds. Provides a neutral foundation for content display.</td></tr><tr><td>Dark</td><td>Used for sections that require strong visual emphasis, media-rich areas, and components that require high contrast with surrounding elements</td></tr><tr><td>Light</td><td>Used for secondary content areas, alternating table rows, sidebar elements, and subtle section highlighting without pronounced visual separation</td></tr><tr><td>Accent</td><td>Used for drawing attention to specific sections using brand colors. Ideal for highlighting important sections that require strong visual emphasis, media-rich areas, and components that require high contrast with surrounding elements</td></tr></tbody></table>
{% endtab %}

{% tab title="Additional" %}
Additional colors provide clear visual feedback about system status, user actions, and important notifications.

<table><thead><tr><th width="145">Property</th><th>Description</th></tr></thead><tbody><tr><td>Information</td><td>Used for informational feedback messages and notifications that provide neutral guidance to users.</td></tr><tr><td>Warning</td><td>Used for cautionary notifications, important reminders, and situations that require user attention but aren't critical errors.</td></tr><tr><td>Success</td><td>Applied to success messaging, positive confirmations, and feedback indicating completed or correctly performed actions.</td></tr><tr><td>Error</td><td>Used for error states, incorrect responses, warnings, and feedback about problems requiring user attention.</td></tr></tbody></table>
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.parta.io/branding/create-branding/theme/color-scheme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.