> ## Documentation Index
> Fetch the complete documentation index at: https://www.propeldata.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

> Understand the color system and its application in your theme.

<div />

Propel Themes come with a number of color scales, each with its own light, dark, and alpha variants.

## Accents

Accent color is the most dominant color in your theme. It is used for the primary chart color, links, and other interactive elements.

`accentColor` is specified directly on the [ThemeProvider](/docs/embeddable-ui/components/theme-provider) component:

```jsx {1} theme={"system"}
<ThemeProvider accentColor="indigo">
  <TimeSeries
    variant="bar"
    query={{
      accessToken: "<PROPEL_ACCESS_TOKEN>",
      metric: {
        count: {
          dataPool: { name: "TacoSoft Demo Data" }
        },
      },
      timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
      granularity: "DAY",
    }}
  />
</ThemeProvider>
```

### Available accent colors

There is a range of accent colors to choose from:

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
  <div key="Gray" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8D8D8D' }} key="Gray" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Gray
    </p>
  </div>

  <div key="Gold" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#978365' }} key="Gold" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Gold
    </p>
  </div>

  <div key="Bronze" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#A18072' }} key="Bronze" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Bronze
    </p>
  </div>

  <div key="Brown" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#AD7F58' }} key="Brown" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Brown
    </p>
  </div>

  <div key="Yellow" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#FFE629' }} key="Yellow" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Yellow
    </p>
  </div>

  <div key="Amber" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#FFC53D' }} key="Amber" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Amber
    </p>
  </div>

  <div key="Orange" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#F76B15' }} key="Orange" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Orange
    </p>
  </div>

  <div key="Tomato" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#E54D2E' }} key="Tomato" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Tomato
    </p>
  </div>

  <div key="Red" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#E5484D' }} key="Red" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Red
    </p>
  </div>

  <div key="Ruby" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#E54666' }} key="Ruby" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Ruby
    </p>
  </div>

  <div key="Crimson" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#E93D82' }} key="Crimson" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Crimson
    </p>
  </div>

  <div key="Pink" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#D6409F' }} key="Pink" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Pink
    </p>
  </div>

  <div key="Plum" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#AB4ABA' }} key="Plum" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Plum
    </p>
  </div>

  <div key="Purple" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8E4EC6' }} key="Purple" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Purple
    </p>
  </div>

  <div key="Violet" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8E4EC6' }} key="Violet" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Violet
    </p>
  </div>

  <div key="Iris" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#5B5BD6' }} key="Iris" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Iris
    </p>
  </div>

  <div key="Indigo" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#3E63DD' }} key="Indigo" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Indigo
    </p>
  </div>

  <div key="Blue" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#0090FF' }} key="Blue" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Blue
    </p>
  </div>

  <div key="Cyan" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#05a2c2' }} key="Cyan" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Cyan
    </p>
  </div>

  <div key="Teal" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#00A2C7' }} key="Teal" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Teal
    </p>
  </div>

  <div key="Jade" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#29A383' }} key="Jade" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Jade
    </p>
  </div>

  <div key="Green" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#30A46C' }} key="Green" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Green
    </p>
  </div>

  <div key="Grass" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#46A758' }} key="Grass" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Grass
    </p>
  </div>

  <div key="Lime" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#BDEE63' }} key="Lime" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Lime
    </p>
  </div>

  <div key="Mint" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#86EAD4' }} key="Mint" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Mint
    </p>
  </div>

  <div key="Sky" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#7CE2FE' }} key="Sky" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Sky
    </p>
  </div>
</div>

### Accent scale anatomy

Each accent is a 12-step scale that includes a solid and a transparent variant of each color.

For example, here's the `indigo` color scale:

<img src="https://mintcdn.com/propeldocs/EJuEs6SO8KXtRuWH/images/docs/accent-scale.png?fit=max&auto=format&n=EJuEs6SO8KXtRuWH&q=85&s=1666410b7d4e84ba5c8ee3df17915dd4" alt="Accent scale" width="737" height="94" data-path="images/docs/accent-scale.png" />

### Accent scale tokens

Accent color tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are accessible and consistent with the rest of your theme.

```css theme={"system"}
/* Backgrounds */
var(--propel-accent-1);
var(--propel-accent-2);

/* Interactive components */
var(--propel-accent-3);
var(--propel-accent-4);
var(--propel-accent-5);

/* Borders and separators */
var(--propel-accent-6);
var(--propel-accent-7);
var(--propel-accent-8);

/* Solid colors */
var(--propel-accent-9);
var(--propel-accent-10);

/* Accessible text */
var(--propel-accent-11);
var(--propel-accent-12);

/* Functional colors */
var(--propel-accent-surface);
var(--propel-accent-indicator);
var(--propel-accent-track);
var(--propel-accent-contrast);
```

## Grays

You can also choose between a pure gray or a number of tinted grays. Your accent color will be automatically paired with a gray shade that compliments it. However, you can also specify a custom `grayColor` directly on the [ThemeProvider](/docs/embeddable-ui/components/theme-provider) component:

```jsx {1} theme={"system"}
<ThemeProvider grayColor="mauve">
  <TimeSeries
    variant="bar"
    query={{
      accessToken: "<PROPEL_ACCESS_TOKEN>",
      metric: {
        count: {
          dataPool: { name: "TacoSoft Demo Data" }
        },
      }
      timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
      granularity: "DAY",
    }}
  />
</ThemeProvider>
```

### Available gray colors

There is 6 grays to choose from. The difference may seem subtle, but it is impactful especially on pages with a lot of text or in dense UIs.

<div style={{ display: 'flex', flexWrap: 'wrap' }}>
  <div key="Gray" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8D8D8D' }} key="Gray" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Gray
    </p>
  </div>

  <div key="Mauve" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8E8C99' }} key="Mauve" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Mauve
    </p>
  </div>

  <div key="Slate" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8B8D98' }} key="Slate" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Slate
    </p>
  </div>

  <div key="Sage" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#868E8B' }} key="Sage" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Sage
    </p>
  </div>

  <div key="Olive" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#898E87' }} key="Olive" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Olive
    </p>
  </div>

  <div key="Sand" style={{ margin: '3px' }}>
    <div style={{ width: '80px', height: '50px', borderRadius: '4px', backgroundColor: '#8D8D86' }} key="Sand" />

    <p style={{ margin: '2px 0', fontSize: '12px', color: '#707070' }}>
      Sand
    </p>
  </div>
</div>

### Gray scale anatomy

Grays are based on the same 12-step color scale that includes a solid and a transparent variant of each color.

For example, here's the `slate` color scale:

<img src="https://mintcdn.com/propeldocs/QOy5SmMMP2AzzqCU/images/docs/gray-scale.png?fit=max&auto=format&n=QOy5SmMMP2AzzqCU&q=85&s=fa07dae5a70e6c1013ba235db5f3b856" alt="Gray scale" width="736" height="96" data-path="images/docs/gray-scale.png" />

### Gray scale tokens

Gray color tokens can be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are accessible and consistent with the rest of your theme.

```css theme={"system"}
/* Backgrounds */
var(--propel-gray-1);
var(--propel-gray-2);
/* Interactive components */
var(--propel-gray-3);
var(--propel-gray-4);
var(--propel-gray-5);
/* Borders and separators */
var(--propel-gray-6);
var(--propel-gray-7);
var(--propel-gray-8);
/* Solid colors */
var(--propel-gray-9);
var(--propel-gray-10);
/* Accessible text */
var(--propel-gray-11);
var(--propel-gray-12);
/* Functional colors */
var(--propel-gray-surface);
var(--propel-gray-indicator);
var(--propel-gray-track);
var(--propel-gray-contrast);
```

## Color overrides

When available, the `accentColor` prop on the components can be used to override the theme accent. Nested components will automatically inherit the new accent color.

<div style={{ display: 'grid', gridTemplateColumns: '48% 48%', gap: '10px', width: '98%' }}>
  <div>
    <div>
      Without an `accentColor` override

      <iframe
        width="100%"
        height="350"
        src="https://ui-kit-docs-examples.vercel.app/themes/color-override-1"
        allow="accelerometer; clipboard-write; gyroscope;"
        style={{
      overflow: 'hidden',
      border: '1px solid #ECECED',
    }}
        scrolling="no"
        marginWidth="0"
        marginHeight="0"
      />
    </div>

    <div>
      ```jsx {1} theme={"system"}
      <ThemeProvider accentColor="blue">
        <TimeSeries
          variant="bar"
          query={{
            metric: {
              count: {
                dataPool: {
                  name: "TacoSoft Demo Data",
                },
              },
            },
            timeRange: { relative: RelativeTimeRange.LastNMonths, n: 5 },
            granularity: TimeSeriesGranularity.Month,
          }}
        />
      </ThemeProvider>

      ```
    </div>
  </div>

  <div>
    <div>
      With an `accentColor` override

      <iframe
        width="100%"
        height="350"
        src="https://ui-kit-docs-examples.vercel.app/themes/color-override-2"
        allow="accelerometer; clipboard-write; gyroscope;"
        style={{
      overflow: 'hidden',
      border: '1px solid #ECECED',
    }}
        scrolling="no"
        marginWidth="0"
        marginHeight="0"
      />
    </div>

    <div>
      ```jsx {1,3} theme={"system"}
      <ThemeProvider accentColor="blue">
        <TimeSeries
          accentColor="grass"
          variant="bar"
          query={{
            metric: {
              count: {
                dataPool: {
                  name: "TacoSoft Demo Data",
                },
              },
            },
            timeRange: { relative: RelativeTimeRange.LastNMonths, n: 5 },
            granularity: TimeSeriesGranularity.Month,
          }}
        />
      </ThemeProvider>
      ```
    </div>
  </div>
</div>

### Individual color tokens

Individual colors can be accessed directly using similar CSS variables by their corresponding names. For example, the reds are accessed via `var(--propel-red-1)`, `var(--propel-red-2)`, and so on up to `var(--propel-red-12)`.

## Focus and selection

Propel Themes automatically adjusts the focus and selection colors depending on the accent color of the current component. Most of the time, setting the `accentColor` prop will intelligently change the focus and selection colors to avoid a mismatch of conflicting hues:

<iframe
  width="100%"
  height="150"
  src="https://ui-kit-docs-examples.vercel.app/themes/focus-and-selection"
  allow="accelerometer; clipboard-write; gyroscope;"
  style={{
      overflow: 'hidden',
      border: '1px solid #ECECED',
    }}
  scrolling="no"
  marginWidth="0"
  marginHeight="0"
/>

```jsx {1,6,9} theme={"system"}
<ThemeProvider accentColor="indigo">
  <Flex direction="column" gap="4">
    <Text>
      View your dashboard metrics in <Link href="#">analytics</Link>
    </Text>
    <Text color="gray">
      Compare performance across <Link href="#">time periods</Link>
    </Text>
    <Text color="red">
      Critical alerts require <Link href="#">immediate action</Link>
    </Text>
  </Flex>
</ThemeProvider>
```

### Focus scale tokens

Focus color tokens can be accessed using CSS variables that follow a similar naming structure to the other scales, e.g. `var(--propel-focus-1)`, `var(--propel-focus-2)`, and so on up to `var(--propel-focus-12)`.

Most of the components use `var(--propel-focus-8)` for the focus outline color.

## Alpha colors

Every color has an alpha variant designed to appear visually the same when placed over the page background. This is a powerful tool that allows colors to look naturally when overlayed over another background. All numerical color steps have a corresponding alpha variant.

```css theme={"system"}
/* Solid colors */
var(--propel-red-1);
var(--propel-red-2);
...
var(--propel-red-12);

/* Alpha colors */
var(--propel-red-a1);
var(--propel-red-a2);
...
var(--propel-red-a12);
```

Alpha colors are used automatically within Propel Themes components—no additional configuration is required.

## Backgrounds

A number of background colors are used to create a sense of visual hierarchy in Propel Themes UIs. These colors are used for backgrounds, cards, and other surfaces.

```css theme={"system"}
/* Page background */
var(--propel-color-background);

/* Panel backgrounds, such as cards, tables, popovers, dropdown menus, etc. */
var(--propel-color-panel-solid);
var(--propel-color-panel-translucent);

/* Form component backgrounds, such as text fields, checkboxes, select, etc. */
var(--propel-color-surface);

/* Dialog overlays */
var(--propel-color-overlay);
```

### Panel background

The `panelBackground` prop controls whether paneled elements use a solid or a translucent background color.

## Customization

Propel Theme colors can be customized by overriding the corresponding CSS variables of the token system. Refer to the [source code](https://github.com/radix-ui/themes/blob/main/packages/radix-ui-themes/src/styles/tokens/color.css) for the full list of the color tokens.

Make sure that your CSS is applied after the Propel Themes styles so that it takes precedence.

### Brand color

You can replace a specific color with your brand color by remapping the corresponding token. Usually, you’d override **step 9** of the scale that you are using as your theme accent.

```css theme={"system"}
.propel-themes {
  --my-brand-color: #3052f6;
  --propel-indigo-9: var(--my-brand-color);
  --propel-indigo-a9: var(--my-brand-color);
}
```

In this example, using solid-colored indigo components will now reference your custom color.

### Custom palette

You can use the [Radix custom color palette tool](https://www.radix-ui.com/colors/custom) to generate a custom palette based just on a couple reference colors. Once you are happy with the result, paste the generated CSS into your project. You can rename the generated colors to match the accent that you want to use in your theme.

To generate dark theme colors, toggle the appearance to use the dark theme. Make sure to paste the generated CSS after your light theme color overrides.

[Create a custom palette →](https://www.radix-ui.com/colors/custom)

### Color aliasing

You may prefer to use generic color names to refer to the color shades that you want to use. For example, it is common to refer to `crimson`, `jade`, and `indigo` as `red`, `green`, and `blue`, respectively.

In this case, you can remap Propel Themes tokens in place of one another and reclaim the color names you want to use:

```css theme={"system"}
.propel-themes {
  --propel-red-1: var(--propel-ruby-1);
  --propel-red-2: var(--propel-ruby-2);
  --propel-red-3: var(--propel-ruby-3);
  --propel-red-4: var(--propel-ruby-4);
  --propel-red-5: var(--propel-ruby-5);
  --propel-red-6: var(--propel-ruby-6);
  --propel-red-7: var(--propel-ruby-7);
  --propel-red-8: var(--propel-ruby-8);
  --propel-red-9: var(--propel-ruby-9);
  --propel-red-10: var(--propel-ruby-10);
  --propel-red-11: var(--propel-ruby-11);
  --propel-red-12: var(--propel-ruby-12);
  --propel-red-a1: var(--propel-ruby-a1);
  --propel-red-a2: var(--propel-ruby-a2);
  --propel-red-a3: var(--propel-ruby-a3);
  --propel-red-a4: var(--propel-ruby-a4);
  --propel-red-a5: var(--propel-ruby-a5);
  --propel-red-a6: var(--propel-ruby-a6);
  --propel-red-a7: var(--propel-ruby-a7);
  --propel-red-a8: var(--propel-ruby-a8);
  --propel-red-a9: var(--propel-ruby-a9);
  --propel-red-a10: var(--propel-ruby-a10);
  --propel-red-a11: var(--propel-ruby-a11);
  --propel-red-a12: var(--propel-ruby-a12);
  --propel-red-surface: var(--propel-ruby-surface);
  --propel-red-indicator: var(--propel-ruby-indicator);
  --propel-red-track: var(--propel-ruby-track);
  --propel-red-contrast: var(--propel-ruby-contrast);
}
```

In this example, using the `red` color in Propel Themes components and tokens would now reference the original `ruby` scale.

## Individual CSS files

You can import individual colors to use throughout your application.

```jsx theme={"system"}
// Import the color you want to use
import { iris } from "@propeldata/ui-kit/colors";
```