# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://v2.isomer.gov.sg/configurations/sitewide-configuration/site-color.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.