---
sourceDocument: Australia Mobile Configuration and Navigation
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/mobile

 Release :

    - australia

ft:locale :

    - en-US

ft:publication_title :

    - Australia Mobile Configuration and Navigation

ft:clusterId :

    - mobile

bundleId :

    - mobile

workflow :

    - Development, Data and Analytics


---

# Color variable support for input descriptions

# Color variable support for input descriptions {#ariaid-title1}

* Release version: Australia
* 
* Updated March 12, 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 2 minutes to read

Learn how to use color variables to change theming in your mobile input descriptions.

|-|-|
| Use color variables in the Description field of your inputs to control text color. Use color variables in the Description field of your inputs to control text color when Description field is configured as <kbd class="ph userinput">HTML</kbd>. For example, in addition to color hex values like `#FF0000`, you may use a color variable, such as `--now-color-primary-0`. For a list of available variables see [Color theme considerations for mobile](https://servicenow-prod.fluidtopics.net/TFt~6jjcyJitnhtB7WcJcQ "Learn how to use color in your mobile applications to improve user experience. Using the right colors for your environment can help guide your users through your app and quickly identify important information."). For details on inputs, see [Configure an input form screen](https://servicenow-prod.fluidtopics.net/PVSI3Faa8_DKNk1SxKRsJQ "Configure an input parameter so that your users can see a list of records from their mobile app. To access a record from the list, a user just has to tap the record name."). |   |
[ ]

{#color-var-input-description__table_vwc_wg2_zvb}

## Input description color guide {#color-var-input-description__section_vvh_wzp_1xb}

Color variables are divided into Use the design guideline to identify the right color variable for your use case.

Alert color palette
:   Alert color palette colors highlight important statuses, states and tasks. Use alert colors to communicate a specific meaning rather than for decoration or organization.

Grouped color palette
:   Grouped color palette colors follow color conventions in a line of industry. Use these colors to show that the colored item is associated with a specific industry or line of business. The meaning of each color depends on
    context, but should remain consistent within your app.
{#color-var-input-description__table_otd_c1q_1xb__entry__3}

| Color name | Example | Color variables |
|-|-|-|
| Critical |   | Mobile variable :   `alert--critical-0` Web variable :   `--now-color_alert--critical-0` |
| High |   | Mobile variable :   `alert--high-0` Web variable :   `--now-color_alert--high-0` |
| Warning |   | Mobile variable :   `alert--warning-0` Web variable :   `--now-color_alert--warning-0` |
| Moderate |   | Mobile variable :   `alert--moderate-0` Web variable :   `--now-color_alert--moderate-0` |
| Info |   | Mobile variable :   `alert--info-0` Web variable :   `--now-color_alert--info-0` |
| Positive |   | Mobile variable :   `alert--positive-0` Web variable :   `--now-color_alert--positive-0` |
| Low |   | Mobile variable :   `alert--low-0` Web variable :   `--now-color_alert--low-0` |
| Disabled | ![Disabled alert color scheme]() | Mobile variable :   `alert-disabled-background` Web variable :   `--now-color_background--secondary` |
| Critical (Alternate) | ![Critical alert color scheme alternate]() | Mobile variable :   `alert--critical-4` Web variable :   `--now-color_alert--critical-4` |
| High (Alternate) | ![High alert color scheme alternate]() | Mobile variable :   `alert--high-4` Web variable :   `--now-color_alert--high-4` |
| Warning (Alternate) | ![Warning alert color scheme alternate]() | Mobile variable :   `alert--warning-4` Web variable :   `--now-color_alert--warning-4` |
| Moderate (Alternate) | ![Moderate alert color scheme alternate]() | Mobile variable :   `alert--moderate-4` Web variable :   `--now-color_alert--moderate-4` |
| Info (Alternate) | ![Info alert color scheme alternate]() | Mobile variable :   `alert--info-4` Web variable :   `--now-color_alert--info-4` |
| Positive (Alternate) | ![Positive alert color scheme alternate]() | Mobile variable :   `alert--positive-4` Web variable :   `--now-color_alert--positive-4` |
| Low (Alternate) | ![Low alert color scheme alternate]() | Mobile variable :   `alert--low-4` Web variable :   `--now-color_alert--low-4` |
| Disabled (Alternate) | ![Disabled alert color scheme alternate]() | Mobile variable :   `alert-disabled-text` Web variable :   `--now-color_text--tertiary` |
[Table 1. Alert color palette]

{#color-var-input-description__table_otd_c1q_1xb} {#color-var-input-description__table_f5d_c1q_1xb__entry__3}

| Color name | Example | Color options |
|-|-|-|
| Blue | ![Blue grouped color scheme]() | Web variable :   `--now-color_grouped--blue-0` |
| Brown | ![Brown grouped color scheme]() | Web variable :   `--now-color_grouped--brown-0` |
| Gray | ![Gray grouped color scheme]() | Web variable :   `--now-color_grouped--gray-0` |
| Green | ![Green grouped color scheme]() | Web variable :   `--now-color_grouped--green-0` |
| Green-Yellow | ![Green-yellow grouped color scheme]() | Web variable :   `--now-color_grouped--green-yellow-0` |
| Magenta | ![Magenta grouped color scheme]() | Web variable :   `--now-color_grouped--magenta-0` |
| Orange | ![Orange grouped color scheme]() | Web variable :   `--now-color_grouped--orange-0` |
| Pink | ![Pink grouped color scheme]() | Web variable :   `--now-color_grouped--pink-0` |
| Purple | ![Purple grouped color scheme]() | Web variable :   `--now-color_grouped--purple-0` |
| Teal | ![Teal grouped color scheme]() | Web variable :   `--now-color_grouped--teal-0` |
| Yellow | ![Yellow grouped color scheme]() | Web variable :   `--now-color_grouped--yellow-0` |
| Blue (Alternate) | ![Blue grouped color scheme alternate]() | Web variable :   `--now-color_grouped--blue-4` |
| Brown (Alternate) | ![Brown grouped color scheme alternate]() | Web variable :   `--now-color_grouped--brown-4` |
| Gray (Alternate) | ![Gray grouped color scheme alternate]() | Web variable :   `--now-color_grouped--gray-4` |
| Green (Alternate) | ![Green grouped color scheme alternate]() | Web variable :   `--now-color_grouped--green-4` |
| Green-Yellow (Alternate) | ![Green-yellow grouped color scheme alternate]() | Web variable :   `--now-color_grouped--green-yellow-4` |
| Magenta (Alternate) | ![Magenta grouped color scheme alternate]() | Web variable :   `--now-color_grouped--magenta-4` |
| Orange (Alternate) | ![Orange grouped color scheme alternate]() | Web variable :   `--now-color_grouped--orange-4` |
| Pink (Alternate) | ![Pink grouped color scheme alternate]() | Web variable :   `--now-color_grouped--pink-4` |
| Purple (Alternate) | ![Purple grouped color scheme alternate]() | Web variable :   `--now-color_grouped--purple-4` |
| Teal (Alternate) | ![Teal grouped color scheme alternate]() | Web variable :   `--now-color_grouped--teal-4` |
| Yellow (Alternate) | ![Yellow grouped color scheme alternate]() | Web variable :   `--now-color_grouped--yellow-4` |
[Table 2. Grouped color palette]

{#color-var-input-description__table_f5d_c1q_1xb}