# Color

The `color` object represents a color value in the store, providing access to different color formats.

## Usage Example

```liquid
{%- comment -%} Show color swatch and values {%- endcomment -%}
<div style="display: flex; align-items: center; gap: 1em;">
  <span style="display:inline-block;width:1.5em;height:1.5em;border-radius:50%;background:{{ color.color }};border:1px solid #ccc;"></span>
  <span>HEX: {{ color.color }}</span>
  <span>RGB: {{ color.rgb }}</span>
  <span>HSL: {{ color.hsl }}</span>
</div>
```

## Properties

### color

Returns the color as a HEX string (e.g., #RRGGBB).

### rgb

Returns the color as an RGB string (e.g., rgb(255, 255, 255)).

### hsl

Returns the color as an HSL string (e.g., hsl(0, 0%, 100%)).