# Colors

> Cherry's curated color palette with 18 predefined colors for light and dark themes.

Source: https://cherry.al/colors

> For the complete documentation index, see [llms.txt](https://cherry.al/llms.txt).

# Colors

Cherry offers a curated set of predefined colors to kickstart your interface design. Depending on your specific requirements, you can always tweak or expand this palette. However, in most scenarios, the default palette of 18 colors should suffice.

<Tabs>
  <TabContent title="Light Mode">

### Primary

<ColorSwatchGroup>
  <ColorSwatch token="primaryLight" value="#91AEC4" />
  <ColorSwatch token="primary" value="#4D6F8B" />
  <ColorSwatch token="primaryDark" value="#194569" />
</ColorSwatchGroup>

### Secondary

<ColorSwatchGroup>
  <ColorSwatch token="secondaryLight" value="#A4B17B" />
  <ColorSwatch token="secondary" value="#5C6E46" />
  <ColorSwatch token="secondaryDark" value="#354C2B" />
</ColorSwatchGroup>

### Tertiary

<ColorSwatchGroup>
  <ColorSwatch token="tertiaryLight" value="#EBCCB9" />
  <ColorSwatch token="tertiary" value="#816B5A" />
  <ColorSwatch token="tertiaryDark" value="#675445" />
</ColorSwatchGroup>

### Gray

<ColorSwatchGroup>
  <ColorSwatch token="grayLight" value="#E5E7EB" />
  <ColorSwatch token="gray" value="#9CA3AF" />
  <ColorSwatch token="grayDark" value="#4B5563" />
</ColorSwatchGroup>

### Status

<ColorSwatchGroup>
  <ColorSwatch token="success" value="#84CC16" />
  <ColorSwatch token="error" value="#EF4444" />
  <ColorSwatch token="warning" value="#EAB308" />
  <ColorSwatch token="info" value="#06B6D4" />
</ColorSwatchGroup>

### Neutrals

<ColorSwatchGroup>
  <ColorSwatch token="dark" value="#000000" />
  <ColorSwatch token="light" value="#FFFFFF" />
</ColorSwatchGroup>

  </TabContent>
  <TabContent title="Dark Mode">

In addition to the primary color palette, Cherry provides the same variables for Dark Mode. This allows seamless switching between light and dark modes with a single click in Figma.

### Primary

<ColorSwatchGroup>
  <ColorSwatch token="primaryLight" value="#79C5FF" />
  <ColorSwatch token="primary" value="#6198C6" />
  <ColorSwatch token="primaryDark" value="#339DF4" />
</ColorSwatchGroup>

### Secondary

<ColorSwatchGroup>
  <ColorSwatch token="secondaryLight" value="#A4B17B" />
  <ColorSwatch token="secondary" value="#5C6E46" />
  <ColorSwatch token="secondaryDark" value="#354C2B" />
</ColorSwatchGroup>

### Tertiary

<ColorSwatchGroup>
  <ColorSwatch token="tertiaryLight" value="#EBCCB9" />
  <ColorSwatch token="tertiary" value="#816B5A" />
  <ColorSwatch token="tertiaryDark" value="#675445" />
</ColorSwatchGroup>

### Gray (Dark Mode)

<ColorSwatchGroup>
  <ColorSwatch token="grayLight" value="#1A1A1A" />
  <ColorSwatch token="gray" value="#454444" />
  <ColorSwatch token="grayDark" value="#808080" />
</ColorSwatchGroup>

### Status

<ColorSwatchGroup>
  <ColorSwatch token="success" value="#84CC16" />
  <ColorSwatch token="error" value="#EF4444" />
  <ColorSwatch token="warning" value="#EAB308" />
  <ColorSwatch token="info" value="#06B6D4" />
</ColorSwatchGroup>

### Neutrals (Inverted)

<ColorSwatchGroup>
  <ColorSwatch token="dark" value="#FFFFFF" />
  <ColorSwatch token="light" value="#000000" />
</ColorSwatchGroup>

  </TabContent>
</Tabs>

## Using the tokens

Every color above is available as a token on the theme object, so you can reference it by name in any styled-component:

```tsx
const Title = styled.h2`
  color: ${({ theme }) => theme.colors.primary};
`;
```

## Deriving shades

When you need a variation the palette does not cover, such as a hover state or a soft tinted background, derive it from a token rather than inventing a new hex value. Cherry exports three helpers for this, each taking a color and a percentage:

```tsx
import { alpha, shade, tint } from "cherry-styled-components";

const Callout = styled.div`
  background: ${({ theme }) => tint(theme.colors.primary, 90)};
  border: solid 1px ${({ theme }) => alpha(theme.colors.primary, 40)};

  &:hover {
    border-color: ${({ theme }) => shade(theme.colors.primary, 10)};
  }
`;
```

`alpha` fades to the given opacity, `shade` darkens toward black, and `tint` lightens toward white. Because they build on native CSS `color-mix()`, the derived color tracks whatever the token resolves to, so it follows your palette into dark mode and keeps working if you white-label the theme through CSS custom properties.

<Callout type="info">
  To use these colors in code, see the [Theme](/code/theme), [Mixins](/code/mixins), and [Dark Mode](/code/dark-mode) pages.
</Callout>

<Callout type="note">
  Colors can be found in the Figma Template in the Color section of the
  Foundations page.
</Callout>

<Button href="https://www.figma.com/community/file/943862931766586094/Cherry-Design-System" icon="pen-tool" iconPosition="left">
  View in Figma
</Button>