> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/use-custom-colors.md).

# Use custom colors

In ***Theme settings > Products***, you can assign custom colors to product variants using a **hex code color** (e.g. **`#00b300`**). Custom colors will override any default colors.

* In the **Custom swatch colors** field, list up to 100 variant names followed by a colon and the hex code (e.g. “Green: #00b300”).
* If your store uses **multiple languages**, add each translated variants name on a separate line with the assigned hex code.

<details>

<summary><mark style="color:blue;"><strong>Why are my swatches blank?</strong></mark></summary>

Make sure the variant names match the exact spelling from your Shopify admin. If your store uses **multiple languages**, add each translated variant name with the assigned custom hex code on separate lines.

</details>

<details>

<summary><mark style="color:blue;"><strong>Why aren’t my collection pages loading?</strong></mark></summary>

Adding more than 100 custom swatch colors can cause a ‘500’ error on your store and stop collection pages from loading. Consider using [Custom swatch images](/spark/product-pages/variant-options/variant-swatches/use-custom-images.md) for larger sets of variant swatches.

</details>

## Watch video tutorial

{% embed url="<https://youtu.be/VZrge6ecwIY>" %}

## Find color hex codes

***

To find the hex code for the color you want, you can use a [HTML color picker like this one](https://htmlcolorcodes.com/). When you choose your color, select and copy the six-character hex code, including the hashtag symbol.

![](/files/KdmT1gRiwcWQcAtgm6vB)

## Add custom colors

***

In ***Theme settings > Products***, list variant names followed by a colon and the hex code (e.g. “Green: #00b300”). If you store uses multiple languages, add each translated variant name with the custom hex code on separate lines.

{% hint style="warning" %}
Adding more than 100 custom swatch colors can cause a ‘500’ error on your store and stop collection pages from loading. Consider using Custom swatch images for larger sets of variant swatches.
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click to open the **Theme settings**, then click **Product**.
2. In the **Custom swatch colors** field add the exact name of the **Option value** (e.g. the product variant "Green") followed by a colon and your hex code color (e.g. **`Green: #00b300`**).

   > To add more than one custom color, press the 'return' key to add each color on its own line.

   ![](/files/fmPFqH0Ql4ZRO276GAEL)

   > For **sibling products**, use the **Option name** added to the metafield you created. See the [sibling product swatches guide](/spark/product-pages/variant-options/sibling-product-swatches.md) to learn more.
3. (*For multiple store languages*) Add the translated variant name for all languages, followed by a colon and the hex code.

   > For example, for stores that use English and German, add custom colors for both **`Green`** and **`Grün`** on separate lines.

   ![](/files/pGFTBP6fPcfgYA7OkhxL)
4. Click **Save**.

</details>

\\

***

> **Related links**\
> [Enable swatches](https://github.com/fluorescent/kb-spark/tree/main/product-pages/variant-options/variant-swatches/broken-reference/README.md)\
> [Use default color swatches](/spark/product-pages/variant-options/variant-swatches/use-default-colors.md)\
> [Upload custom image swatches](/spark/product-pages/variant-options/variant-swatches/use-custom-images.md)\
> [Show swatches on product cards](/spark/product-pages/variant-options/variant-swatches/show-on-product-cards.md)\
> [Enable dynamic option availability](/spark/product-pages/variant-options/variant-swatches/dynamic-option-availability.md)