---
url: https://developer.youcan.shop/themes/objects/color.md
---

# `color` object

Information about a color.

When the liquid engine encounters an invalid Hex6 or Hex8 (RGBA) color value, it defaults to `#000000FF`.

### Properties

***

| Name          |               Type               | Description                                                                      |
| ------------- | :------------------------------: | :------------------------------------------------------------------------------- |
| `hex`         | [string](/themes/basics/types#string) | Color Hex                                                                        |
| `red`         | [number](/themes/basics/types#number) | The red component of the color, which is a number between 0 and 255.             |
| `green`       | [number](/themes/basics/types#number) | The green component of the color, which is a number between 0 and 255.           |
| `blue`        | [number](/themes/basics/types#number) | The blue component of the color, which is a number between 0 and 255.            |
| `alpha`       | [number](/themes/basics/types#number) | The alpha component of the color, which is a decimal number between 0.0 and 1.0. |
| `hue`         |            [number](/themes/basics/types#number)            | The hue component of the color, which is a number between 0 and 360.             |
| `saturation`  |            [number](/themes/basics/types#number)            | The saturation component of the color, which is a number between 0 and 100.      |
| `lightness`   |            [number](/themes/basics/types#number)            | The lightness component of the color, which is a number between 0 and 100.       |
| `oklch_hue`   | [number](/themes/basics/types#number) | The hue of the color in the OKLCH color space, which is a decimal number between 0 and 360. |
| `chroma`      | [number](/themes/basics/types#number) | The chroma of the color in the OKLCH color space, which is a decimal number from 0. |

```liquid
{% assign color = settings.accent_color %}
--accent-rgb: {{ color.red }}, {{ color.green }}, {{ color.blue }};
--accent-hsl: {{ color.hue }}, {{ color.saturation }}%, {{ color.lightness }}%;
--accent-oklch: 70% {{ color.chroma }} {{ color.oklch_hue }};
```

::: tip Output

```css
--accent-rgb: 122, 181, 92;
--accent-hsl: 99, 37%, 53%;
--accent-oklch: 70% 0.135657 135.9957;
```

:::