Color system best practices

One of the most important components of designing a visually appealing, functional, and accessible theme is color. A well-designed color system reinforces a merchant's branding and directs the user's experience.

When designing the color system for your theme, consider both the overall look and feel, and the interplay between elements. There should be an established hierarchy between elements. For example, emphasize a call-to-action, and provide adequate color contrast between foreground and background elements. This sets merchants up for success by providing accessible experiences for their customers.

Anchor to Color palettesColor palettes

A color_palette is a global set of named colors defined once in settings_schema.json. Merchants see these colors in a grid in the theme editor and can pick from them when adjusting any color or color_background setting. You can define between 2 and 20 colors.

Palettes work well when you want merchants to stay within a defined brand color set. Instead of typing hex values into individual pickers, merchants choose from the colors you've defined. The palette is available everywhere in the theme: sections, blocks, and global settings alike.

Anchor to When to use a paletteWhen to use a palette

Use a color palette when your theme has a small set of brand colors that should be consistent across the store. Sections and blocks can reference palette colors as their defaults using the {{ settings.colors.key }} syntax. When a merchant updates a palette color, every setting that references it updates automatically. A palette gives merchants a single place to manage their brand colors and removes the need to understand how grouped color relationships work.

Anchor to Palette design tipsPalette design tips

• Start with a small palette. Include only the colors your theme needs rather than a large set of generic options. Merchants can add their own colors in the editor.
• Choose key names that reflect usage, not appearance. Names like primary, accent, and text are clearer than blue or dark, because the actual color values will change.
• Use palette references for section and block color defaults. This ties individual settings to the palette, so a single change propagates across the theme.

For the schema reference, see color_palette.

Anchor to Local color overridesLocal color overrides

A color setting without a default value lets merchants set a one-off color for a specific section or block. When unset, the setting returns blank in Liquid and the editor shows a Clear option. Use this pattern when you want merchants to deviate from the palette for individual elements without changing the overall theme.

Example: A hero banner section might offer a heading_color override with no default. The theme's CSS or Liquid handles the fallback:

This approach pairs well with palettes. The palette sets the baseline, and local overrides let merchants make targeted adjustments.

Anchor to Color schemes (legacy)Color schemes (legacy)

Color schemes are a theme setting that groups elements and their respective colors in a visually representative way. They're defined using the color_scheme_group setting in settings_schema.json, and sections reference individual schemes with the color_scheme setting.

If your existing theme uses color schemes and you're not planning a major update, there's no need to migrate. Schemes remain fully functional. If you're building a new theme or doing a major version update, palettes with local overrides let merchants manage brand colors in one place while still overriding individual elements.

For the full schema reference for color schemes, see deprecated settings.

Anchor to Hardcoded colorsHardcoded colors

You can use hardcoded colors, but you shouldn't apply hardcoded colors to elements that require an accessible contrast ratio.