--- title: 'Liquid objects: color_scheme_group' description: >- A color_scheme_group from a [`color_scheme_group` setting](/themes/architecture/settings/input-settings#color_scheme_group). api_name: liquid source_url: html: 'https://shopify.dev/docs/api/liquid/objects/color_scheme_group' md: 'https://shopify.dev/docs/api/liquid/objects/color_scheme_group.md' --- # color\_​scheme\_​group A color\_scheme\_group from a [`color_scheme_group` setting](https://shopify.dev/themes/architecture/settings/input-settings#color_scheme_group). *** Tip To learn about color schemes in themes, refer to [`color_scheme` setting](https://shopify.dev/themes/architecture/settings/input-settings#color_scheme). *** ```json {} ``` ##### Example ``` {} ``` ### Referencing color\_scheme\_group settings directly ```liquid {% for scheme in settings.color_schemes %} .color-{{ scheme.id }} { --color-background: {{ scheme.settings.background }}; --color-text: {{ scheme.settings.text }}; } {% endfor %} ``` ##### Code ``` {% for scheme in settings.color_schemes %} .color-{{ scheme.id }} { --color-background: {{ scheme.settings.background }}; --color-text: {{ scheme.settings.text }}; } {% endfor %} ``` ##### Data ``` { "settings": { "color_schemes": {} } } ``` ## Output ```html .color-background-1 { --color-background: #FFFFFF; --color-text: #121212; } .color-background-2 { --color-background: #F3F3F3; --color-text: #121212; } .color-inverse { --color-background: #121212; --color-text: #FFFFFF; } .color-accent-1 { --color-background: #121212; --color-text: #FFFFFF; } .color-accent-2 { --color-background: #334FB4; --color-text: #FFFFFF; } ```