---
title: 'custom.css'
date: 2024-03-03T03:17:42+01:00
---

Any CSS[^1] customizations are maintained in the `assets/css/custom.css` file.
The Hextra theme automatically loads this [custom.css](https://imfing.github.io/hextra/docs/advanced/customization/#custom-css).

## Colors

In the Hextra theme, the HSL[^2] representation is used to define the
[primary color](https://imfing.github.io/hextra/docs/advanced/customization/#primary-color).
However, the values are split into three variables:

- `--primary-hue`: Hue (deg) value of the primary color.
- `--primary-saturation`: Saturation (%) value of the primary color.
- `--primary-lighting`: Lightning (%) value of the primary color.

Thus, to override the default primary color with *Matisse (600)*, for example, a
conversion may be necessary. For this task, the W3Schools provides a powerful
[colors converter](https://www.w3schools.com/colors/colors_converter.asp).

[^1]: [CSS](https://en.wikipedia.org/wiki/CSS) in the Wikipedia
[^2]: [HSL and HSV](https://en.wikipedia.org/wiki/HSL_and_HSV) in the Wikipedia