# Colors

### Site Colors

Every color used throughout the theme has been generated by using color variables defined  at `_variables.scss` . you can customize the colors by changing the values of variables.

![site colors](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEoae0LGv4oz-ex593%2F-LUEpJ_lY71r984PvyD-%2Fimage.png?alt=media\&token=0c1361c6-6388-4754-954c-b38b99b8a1e3)

### Gray Shades

![gray colors from gray-100 to gray-900](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEpTZSrsyX2MnLhHro%2F-LUEpmbtxtIZe5qdxvt3%2Fimage.png?alt=media\&token=6fdc7769-5117-4838-bfb2-c4dc1e55a0bb)

### Chart Colors

Atmos comes with preselected chart colors 

```javascript
 window.colors = [
        "#687ae8",
        "#12bfbb",
        "#ffb058",
        "#2991cf",
        "#87b8d4",
        "#109693",
        "#f29494",
        "#527cf9",
        "#7140d1",
        "#e79e4e",
        "#52b4ee",
        "#6ed7e0",
        "#8fa6b4",
        "#ffcfcf",
        "#28304e",
        "#95aac9",
        "#f2545b",
        "#f7bc06",
        "#00cc99",
        "#19b5fe",
        "#E3EBF6"
    ];
```

{% hint style="info" %}
Chart colors are stored in color array in `atmos.js` file located in `assets/js` folder
{% endhint %}

![](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEqwyPn3eAo68Vcktk%2F-LUErCDXQfwgYg4U96eq%2Fimage.png?alt=media\&token=2b042350-253e-45df-b7fd-964716d2bc4f)