# 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](https://help.fluorescent.co/spark/product-pages/variant-options/variant-swatches/use-custom-images) 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.

![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-20e4caae2b36ee7b9d87009cb98863f872cbf484%2Fswatches-html-hexcodes.jpeg?alt=media)

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

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-065af7e34a50899e1952e2ef9be849be523cc6d2%2Fsibling-custom-color.jpeg?alt=media)

   > For **sibling products**, use the **Option name** added to the metafield you created. See the [sibling product swatches guide](https://help.fluorescent.co/spark/product-pages/variant-options/sibling-product-swatches) 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.

   ![](https://1721436993-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3iiuvh8UrcOxEOQkY2iO%2Fuploads%2Fgit-blob-695d87dadb86e9cffd8154a56b58f56b1ce10cdb%2Fswatch-custom-language.jpeg?alt=media)
4. Click **Save**.

</details>

<br>

***

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