# Color

Sipster's color system includes 12 base colors, which are each complemented by 5 tints/shades. Combined, this creates a full 11-swatch color ramp for each of those 12 base colors. These color ramps are named on a simple scale ranging from `05` to `100` , with the base color serving as the value of `50`.

{% hint style="warning" %}
These color ramps are programmatically generated using the variables and maps inside the `_colors.scss` partial. It is ***strongly*** recommended to not edit or otherwise manipulate this core color system unless you are a member of the 2600Hz Design Systems team.
{% endhint %}

{% @figma/embed fileId="ZSso4UZT4gnT1uXBUxkZQw" nodeId="147:8814" url="<https://www.figma.com/file/ZSso4UZT4gnT1uXBUxkZQw/%F0%9F%94%B7-SDS-Core?mode=design&node-id=147:8814&t=Ihu5OxtXiMgxx5Gk-1&type=design>" %}

***

## Applying Color

{% hint style="info" %}
Sipster has a flexible and unique approach to theming, white-labeling, and how color is applied throughout interfaces. Theming is how the majority of style customization for projects should take place. [Learn more about themes](https://2600hz.gitbook.io/sds/sds-3.0/sds-themes).
{% endhint %}

Whether you're building components and patterns for Sipster or exploring theme customization in a project, you will be referencing the raw color palette at some point.

### Design: Figma Library

The SDS Components Figma library will contain all the Theme color 'tokens' (style hooks using CSS Custom Properties), and this will be the majority of how color is applied throughout design projects. However, those theme and component tokens derive their initial values from the SDS Core color palette, so understanding how color works within the SDS Core Figma library is still important.

The SDS Core color palette is provided as Figma variables, mapping directly to the color ramps shown above.

<figure><img src="https://1631530894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3Lcw1cy2vsA9bEz125dK%2Fuploads%2Fvp8ZvCM3r0IucbWZdGAi%2Fimage.png?alt=media&#x26;token=ebce8190-c85c-415a-a050-58400b633ef3" alt="SDS Core color variables in figma" width="563"><figcaption></figcaption></figure>

These Core color variables are already assigned as 'alias' values in the SDS Components Figma library, ensuring that components and themes are always using the correct colors. They are also  available to be used throughout designs if/when a theme token doesn't provide the desired style or outcome.

<figure><img src="https://1631530894-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3Lcw1cy2vsA9bEz125dK%2Fuploads%2FpvxrnJwoYwC1otDWcIio%2Fimage.png?alt=media&#x26;token=a14f971b-64e8-40a8-8840-9c7c7d80a50e" alt="" width="237"><figcaption></figcaption></figure>

###

### Development: SCSS Color Function

Just like in design, the preferred method for adding color styles to projects will be through [theming](https://2600hz.gitbook.io/sds/sds-3.0/sds-themes) and tokens (style hooks).

However, whether you're building components and patterns for Sipster or exploring theme customization in a project, you will still be referencing the raw color palette at some point. To facilitate this, Sipster provides a custom color function: `sds-color()`.&#x20;

This function allows you to pass the desired color (required) and scale value (optional) parameters in order to easily add any color from the approved palette. As noted, the scale `$value` is an optional parameter that will default to the 'base', or `50` value if not specified.

```scss
sds-color($color, $value);
```

The `sds-color()` function can be implemented in any CSS property that accepts a color value (all colors currently resolve to a hex code).&#x20;

#### Example:

```scss
// HTML elements and CSS selectors 

h1 {
  color: sds-color(blue);
  border-bottom: 1px solid sds-color(neutral, 30);
}

.myCustomClass {
  background: sds-color(white);
  color: sds-color(neutral, 100);
}


// Scoped to CSS Custom Properties ('Tokens') 

:root {
  --sds_theme_color_primary: #{sds-color(blue, 60)};
  --sds_theme_color_primary_interactive: #{sds-color(blue, 70)};
}
```

#### Compiled CSS:

```css
/* HTML elements and CSS selectors */

h1 {
  color: #3579F5;
  border-bottom: 1px solid #AAAAAA;
}

.myCustomClass {
  background: #FFFFFF;
  color: #141414;
}


/* Scoped to CSS Custom Properties ('Tokens') */

:root {
  --sds_theme_color_primary: #0C5BEC;
  --sds_theme_color_primary_interactive: #0947B9;
}
```

{% hint style="warning" %}
Notice in the example above where the sds-color function is used to assign a value to a CSS Custom Property. Any Sass related syntax such as variables or functions need to be interpolated `#{}` when being assigned to Custom Properties. [Learn more](https://sass-lang.com/documentation/interpolation/) about Sass Interpolation.
{% endhint %}