--- title: 'Liquid objects: color' description: >- A color from a [`color` setting](/themes/architecture/settings/input-settings#color). api_name: liquid source_url: html: 'https://shopify.dev/docs/api/liquid/objects/color' md: 'https://shopify.dev/docs/api/liquid/objects/color.md' --- # color A color from a [`color` setting](https://shopify.dev/themes/architecture/settings/input-settings#color). *** Tip Use [color filters](https://shopify.dev/docs/api/liquid/filters/color-filters) to modify or extract properties of a `color` object. *** ## Properties * * alpha [number](https://shopify.dev/docs/api/liquid/basics#number) * The alpha component of the color, which is a decimal number between 0.0 and 1.0. * blue [number](https://shopify.dev/docs/api/liquid/basics#number) * The blue component of the color, which is a number between 0 and 255. * chroma [number](https://shopify.dev/docs/api/liquid/basics#number) * The chroma component of the color, which is a decimal number between 0.0 and 0.5. * color\_​space [string](https://shopify.dev/docs/api/liquid/basics#string) * The color space of the color. Returns 'srgb' or 'oklch' * green [number](https://shopify.dev/docs/api/liquid/basics#number) * The green component of the color, which is a number between 0 and 255. * hue [number](https://shopify.dev/docs/api/liquid/basics#number) * The hue component of the color, which is a number between 0 and 360. * lightness [number](https://shopify.dev/docs/api/liquid/basics#number) * The lightness component of the color, which is a number between 0 and 100. * oklch [string](https://shopify.dev/docs/api/liquid/basics#string) * The lightness, chroma, and hue values of the color, represented as a space-separated string. * oklcha [string](https://shopify.dev/docs/api/liquid/basics#string) * The lightness, chroma, hue and alpha values of the color, represented as a space-separated string, with a slash before the alpha channel. * red [number](https://shopify.dev/docs/api/liquid/basics#number) * The red component of the color, which is a number between 0 and 255. * rgb [string](https://shopify.dev/docs/api/liquid/basics#string) * The red, green, and blue values of the color, represented as a space-separated string. * rgba [string](https://shopify.dev/docs/api/liquid/basics#string) * The red, green, blue, and alpha values of the color, represented as a space-separated string, with a slash before the alpha channel. * saturation [number](https://shopify.dev/docs/api/liquid/basics#number) * The saturation component of the color, which is a number between 0 and 100. ```json { "alpha": 1, "blue": 180, "chroma": 0.16, "color_space": "srgb", "green": 79, "hue": 227, "lightness": 45, "oklch": "47% 0.16 268", "oklcha": "47% 0.16 268 / 1.0", "red": 51, "rgb": "51 79 180", "rgba": "51 79 180 / 1.0", "saturation": 56 } ``` ##### Example ``` { "alpha": 1, "blue": 180, "chroma": 0.16, "color_space": "srgb", "green": 79, "hue": 227, "lightness": 45, "oklch": "47% 0.16 268", "oklcha": "47% 0.16 268 / 1.0", "red": 51, "rgb": "51 79 180", "rgba": "51 79 180 / 1.0", "saturation": 56 } ``` ### Referencing color settings directly When a color setting is referenced directly, the hexidecimal color code is returned. ```liquid {{ settings.colors_accent_2 }} ``` ##### Code ``` {{ settings.colors_accent_2 }} ``` ##### Data ``` { "settings": { "colors_accent_2": "#334fb4" } } ``` ## Output ```html #334fb4 ```