# 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 ](https://help.parta.io/branding/create-branding/elements)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 %}