Use custom colors
Variant swatches
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.
Watch video tutorial
Find color hex codes
To find the hex code for the color you want, you can use a HTML color picker like this one. When you choose your color, select and copy the six-character hex code, including the hashtag symbol.
![](https://help.fluorescent.co/~gitbook/image?url=https%3A%2F%2F475958657-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252Fyt3Wwaqhge0XvrXmVj7D%252Fuploads%252Fgit-blob-a56d9abce25b92a4550e5b370b261778b8829020%252Fswatches-html-hexcodes.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=d490b217&sv=1)
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.
Note 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.
Related links Enable swatches Use default color swatches Upload custom image swatches Change swatch styles Show swatches on product cards Enable dynamic option availability
Last updated