---
title: Colors and Gradients
tags: Site Settings
---

# Colors and Gradients

## Swatches

[Swatches](https://www.figma.com/file/g6DJk4Yo3qR8pYkmQa4I5s/?node-id=0%3A1)

Swatches can contain solid colors, gradients and patterns (meaning in this case a repeated decorative design rather than a *pattern of components*) specific to a brand.

All Swatches set in Brand Identities Assets, are imported as a library and are used for color configurations of components, text, and webpage backgrounds.

When selecting the 2 primary and 2 Accent colors, pick brand colors or colors that compliment brand colors. These 4 colors will be used to create tints, shade, grays and gradients.

A large set of color options are generated from just 4 key colors. When assigning colors to designs always verify WCAG 2.0 contrast.

For more information on accessibility, visit the pages below:
* [WebAIM: Contrast Checker](https://webaim.org/resources/contrastchecker/)
* [Figma - Stark | The suite of integrated accessibility tools for your product design and development team](https://www.figma.com/community/plugin/732603254453395948/Stark)

### Brand Neutrals

Neutral Shades complementary to the Brand Primary colors.


#### Brand Neutrals for Cosentyx


### Solids

Primary and Accent color variations are calculated by adding white to create tints or black to create shades of a base color.

This creates a wide range of options from just one base color.

Tints and Shades naming conventions

| Tints – add white | Shades – add black |
| ------------------ | ------------------ |
| `[Base-color]_50` | `[Base-color]_500` |
| `[Base-color]_100` | `[Base-color]_600` |
| `[Base-color]_200` | `[Base-color]_700` |
| `[Base-color]_300` | `[Base-color]_800` |
| `[Base-color]_400` | `[Base-color]_900` |

This naming convention allows for the colors of components to easily swap colors across brands with the same naming patterns.

#### Primary color palette

Below are two sample Primary color palattes generated from Novartis colors.


#### Accent

Below are two sample Accent color palattes generated from Novartis colors.


### Gradients

Gradients are created with combinations of primary and accent colors, or by combining these colors with either black or white. You can see examples of various gradients below.