> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/ui-elements/colors.md).

# 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](/files/-LUEpJ_lY71r984PvyD-)

### Gray Shades

![gray colors from gray-100 to gray-900](/files/-LUEpmbtxtIZe5qdxvt3)

### 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 %}

![](/files/-LUErCDXQfwgYg4U96eq)