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 | Color Hex |
red | number | The red component of the color, which is a number between 0 and 255. |
green | number | The green component of the color, which is a number between 0 and 255. |
blue | number | The blue component of the color, which is a number between 0 and 255. |
alpha | number | The alpha component of the color, which is a decimal number between 0.0 and 1.0. |
hue | number | The hue component of the color, which is a number between 0 and 360. |
saturation | number | The saturation component of the color, which is a number between 0 and 100. |
lightness | number | The lightness component of the color, which is a number between 0 and 100. |
oklch_hue | number | The hue of the color in the OKLCH color space, which is a decimal number between 0 and 360. |
chroma | 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 }};Output
css
--accent-rgb: 122, 181, 92;
--accent-hsl: 99, 37%, 53%;
--accent-oklch: 70% 0.135657 135.9957;