---
icon: swatchbook
---

# Colors vs Palettes

We suggest using **Colors** variables whenever possible. The names of **Colors** usually specify their roles or purposes.



## Colors 🖌

The variable groups below are the core color options for your project:

* Colors
* Colors: Extended
* Colors: Special

The Colors variables have **Base mode** (the Base mode is "Light" mode by default) and **Dark mode** setup. By using **Colors**, you can easily update the entire color scheme of your site.

You can modify, add, or rename the extended colors to align with your brand.

{% hint style="info" %}
You can remove the **Dark mode** from **Colors** completely if your website does not have light and dark modes.
{% endhint %}



## Palettes :art:

Palettes are groups or sets of colors that are essentially tint variations.

**Palettes** variables are picked by the **Colors** variables. This method provides flexibility to update colors by choosing from palette variables without disrupting the site's overall style.

The Primary, Secondary, Accent, and Neutral colors follow an 11-step tint setup (50-500-950 scale). You can use a **tint generator** to get the tints.

See S2's default Palettes on [tints.dev](https://www.tints.dev/palette/v1:cHJpbWFyeXwwMTQ1YWJ8NTAwfGx8MHwwfDE1fDEwMHxtfnNlY29uZGFyeXwwMGI0OTl8NTAwfGx8MHwwfDE1fDEwMHxtfmFjY2VudHxmM2JiMDl8NTAwfGx8MHwwfDE1fDEwMHxtfm5ldXRyYWx8N2U3ZTdlfDUwMHxsfDB8MHwwfDEwMHxt?output=hex)

{% hint style="danger" %}
Please keep the palette name **"Neutral"** and all of its **variable names** unchanged.
{% endhint %}