---
schema_version: "1"
id: dc87f3b11774d12774823f2742cd2ca0b62dca1d823d3e5f2b4d4f44e5c69048
title: Customize Colors with the
collection: legacydeveloper
version: current
locale: en-us
portal_url: https://docs.salesforce.com/legacydeveloper/current/en-us/service_sdk_android/android_customize_colors.md
canonical_url: https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/android_customize_colors.htm
source_site: developer.salesforce.com
content_type: documentation
content_hash: 0a2183c848461a754ad666253c563395afd1f5258b0ae0fde36917cd0f9affd2
description: You can customize the look and feel of the interface by specifying the colors used throughout the UI.
---
# Customize Colors with the

You can customize the look and feel of the interface by specifying the colors used throughout the UI.

![Important](https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/icon_note_important.png)

#### Important

The legacy chat product is scheduled for retirement on February 14, 2026, and is in maintenance mode until then. During this phase, you can continue to use chat, but we no longer recommend that you implement new chat channels. To avoid service interruptions to your customers, migrate to [Messaging for In-App and Web](https://help.salesforce.com/s/articleView?id=service.miaw_intro_landing.htm&type=5&language=en_US) before that date. Messaging offers many of the [chat features that you](https://help.salesforce.com/s/articleView?id=service.miaw_chat_vs_messaging.htm&type=5&language=en_US) love plus asynchronous conversations that can be picked back up at any time. Learn about chat retirement in [Help](https://help.salesforce.com/s/articleView?id=001790618&type=1&language=en_US).

To customize the colors, create color resource values in your project's colors.xml file that correspond to the same resource names specified in this documentation.

For example, the following resource file values customize some of the branding tokens:

<resources\>
  <color name="salesforce\_brand\_primary">#50e3c2</color\>
  <color name="salesforce\_brand\_secondary">#4a90e2</color\>
  <color name="salesforce\_contrast\_inverted">#ffffff</color\>
  <color name="salesforce\_contrast\_primary">#333333</color\>
  <color name="salesforce\_contrast\_secondary">#767676</color\>
  <color name="salesforce\_feedback\_primary">#e74c3c</color\>
</resources\>

These screenshots illustrate how the branding tokens affect the UI.

Chat UI Branding:

![Branding colors for Chat](https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding-chat-android.png)

The following branding tokens are available for customization.

<table class="featureTable sort_table" summary="">



        <thead class="thead sorted" align="left">
          <tr>
            <th class="featureTableHeader  " id="d6947e103">Token Name</th>

            <th class="featureTableHeader  " id="d6947e106">Default Value</th>

            <th class="featureTableHeader  " id="d6947e109">Description / Sample Uses</th>

          </tr>

        </thead>

        <tbody class="tbody">
          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Toolbar<p class="p"><samp class="codeph ">salesforce_toolbar</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#FAFAFA<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_FAFAFA.png" width="50" alt="Toolbar"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">The toolbar background color.</p>
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Toolbar Inverted<p class="p"><samp class="codeph ">salesforce_toolbar_inverted</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#010101<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_010101.png" width="50" alt="Toolbar inverted"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">Toolbar text and icon color.</td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Brand Primary<p class="p"><samp class="codeph ">salesforce_brand_primary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#007F7F<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_007F7F.png" width="50" alt="Brand primary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">The banner background color.</p>

              <p class="p">Chat: Line under the message you’re typing.</p>
            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Brand Secondary<p class="p"><samp class="codeph ">salesforce_brand_secondary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#2872CC<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_2872CC.png" width="50" alt="Brand secondary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Chat: User text bubbles.</p>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Brand Contrast<p class="p"><samp class="codeph ">salesforce_brand_contrast</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#FCFCFC<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_FCFCFC.png" width="50" alt="Secondary inverted"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Title text color.</p>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Contrast Primary<p class="p"><samp class="codeph ">salesforce_contrast_primary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#000000<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_000000.png" width="50" alt="Contrast primary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Primary body text color.</p>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Contrast Secondary<p class="p"><samp class="codeph ">salesforce_contrast_secondary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#6D6D6D<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_767676.png" width="50" alt="Contrast secondary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses"></td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Contrast Tertiary<p class="p"><samp class="codeph ">salesforce_contrast_tertiary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#BABABA<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_BABABA.png" width="50" alt="Contrast tertiary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses"></td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Contrast Quaternary<p class="p"><samp class="codeph ">salesforce_contrast_quaternary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#F1F1F1<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_F1F1F1.png" width="50" alt="Contrast quaternary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">Chat: Background color for the chat feed screen.</td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Contrast Inverted<p class="p"><samp class="codeph ">salesforce_contrast_inverted</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#FFFFFF<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_FFFFFF.png" width="50" alt="Contrast inverted"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Page background, navigation bar, table cell background.</p>

              <p class="p">Chat: Color of the close button on the minimized view. Client message text.
                Background color at the bottom of the input bar on the chat feed UI.</p>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Feedback Primary<p class="p"><samp class="codeph ">salesforce_feedback_primary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#E74C3C<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_E74C3C.png" width="50" alt="Feedback primary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Text color for error messages. </p>

            </td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Feedback Secondary<p class="p"><samp class="codeph ">salesforce_feedback_secondary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#2ECC71<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_2ECC71.png" width="50" alt="Feedback secondary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses"></td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Feedback Tertiary<p class="p"><samp class="codeph ">salesforce_feedback_tertiary</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#F5A623<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_F5A623.png" width="50" alt="Feedback tertiary"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses"></td>

          </tr>

          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Title Color<p class="p"><samp class="codeph ">salesforce_title_color</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#FBFBFB<p class="p"><img class="image" src="https://developer.salesforce.com/docs/atlas.en-us.service_sdk_android.meta/service_sdk_android/images/branding_color_FBFBFB.png" width="50" alt="Primary inverted"></p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses">
              <p class="p">Text as it appears in titles throughout the UI. Text on areas where a brand color is used
                for the background.</p>

              <p class="p">Chat: Agent text bubbles.</p>

            </td>

          </tr>


          <tr>
            <td class="entry" headers="d6947e103" data-title="Token Name">Overlay<p class="p"><samp class="codeph ">salesforce_overlay</samp></p>
            </td>

            <td class="entry" headers="d6947e106" data-title="Default Value">#000000<p class="p">(40% alpha)</p>
            </td>

            <td class="entry" headers="d6947e109" data-title="Description / Sample Uses"></td>

          </tr>

        </tbody>

      </table>