> For the complete documentation index, see [llms.txt](https://v2.isomer.gov.sg/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://v2.isomer.gov.sg/configurations/sitewide-configuration/site-color.md).

# Site color

Each Isomer website has two main colors, a primary color and a secondary color.

![](/files/-MJZxSN5iDJ2mWMUn-2s)

The **primary** color is displayed in the following elements:

* the notifications banner in the homepage
* the hero banner button in the homepage
* font colors for headers
* underlined and highlighted text colors

The **secondary** color is displayed in the following elements:

* the key highlights buttons in the homepage
* the page banner in the inner website pages (all except the homepage)

{% hint style="info" %}
Note: If you are picking a new primary or secondary color for your Isomer website, please ensure that the color fulfills the minimum color **contrast ratio of 4.5 for accessibility.** 

Please ensure your color palette provides sufficient contrast using the [color contrast checker](https://webaim.org/resources/contrastchecker/). If you have any questions regarding this, please reach out to us via Slack or email us at <support@isomer.gov.sg>
{% endhint %}

## How to change your site colors

![](/files/-MJ_-36rL4mvleaQCPWO)

The color is set in `misc/custom.scss`. You will find these 3 values in the file: `$primary`, `$secondary`, and `$secondary-hover`. Adjust the [hex codes](https://www.color-hex.com/) for these 3 values accordingly. Note that the semicolon (`;`) is required at the end of each line.

Sample configuration:

```css
// Website brand colors
$primary: #6031b6;
$secondary: #4372d6;
$secondary-hover: darken(#4372d6, 20%);
```

To change the resource room colors, edit the `$media-color-...` values in the same file (`misc/custom.scss`):

```css
// Resources page colors
$media-color-one: #49759a;
$media-color-two: #744d9f;
$media-color-three: #00838f;
$media-color-four: #00838f;
$media-color-five: #00838f;
```

## IsomerCMS users

If you're using IsomerCMS, your color configuration will be determined on **config.yml** file.&#x20;