---
title: Color system best practices
description: >-
  Apply color system best practices to ensure that the theme is usable,
  accessible, and easy to customize.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/design/color-system
  md: >-
    https://shopify.dev/docs/storefronts/themes/best-practices/design/color-system.md
api_name: liquid
---

# 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.

***

## Color palettes

A [`color_palette`](https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#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.

### When 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.

### Palette 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`](https://shopify.dev/docs/storefronts/themes/architecture/settings/input-settings#color_palette).

***

## Local 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:

## sections/hero-banner.liquid

```liquid
{% if section.settings.heading_color != blank %}
  --heading-color: {{ section.settings.heading_color }};
{% endif %}
```

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

***

## Hardcoded colors

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

![Hardcoded color risk example](https://shopify.dev/assets/assets/images/themes/color-scheme/hardcoded-colors-OgvIBroW.png)

![Hardcoded color risk example continued](https://shopify.dev/assets/assets/images/themes/color-scheme/hardcoded-colors2-CMFwsYIw.png)

***