Product swatches
Color Names Supported by All Browsers
All modern browsers support the following 140 color names, represented as a color name, or a equivalent hex value.
What is a HEX color?
A HEX color is expressed as a six-digit combination of numbers and letters defined by its mix of red, green and blue (RGB)
Hex colors are a way of representing colors from various color models through hexadecimal values. A hexadecimal color follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the color.
A simple example of this is #FF0000. This color is pure red, because the red component is at its max value of FF and the green and blue components are at their lowest of 00.
Why Use Hex Colors?
Using hex color codes to represent different colors is an easy way to differentiate between colors. Once you understand how they work, you can easily change the red, blue, or green values to create a different shade.
This is convenient given that your products may have a wide range of color options with hex color codes, which guarantees color exactness.
You can use this HEX Color code generator to get started in defining and matching the right color combinations.
How to assign colors in the Erickson theme?
Within your Shopify admin, go to
Online Store→Themes→Customize.Click
Theme Settingsicon, indicated as a paintbrush symbol on the left of the dashboard, then clickProduct swatchestowards the bottom of the panel.
First make sure you tick the Enable colors checkbox, then use the Enter colors text bo to start.
Here are some examples and how it works
white:white;
black:black;
red:#FE3B12;
matte black:#545454
Above you will see 4 color examples, using a combination of HEX values and default browser colors.
The text before the colon, highligted in blue, should match the exact name given to your product option when setting up your colors in Shopify, see screenshot below.
If the color has two words, i.e matte black, make sure to include the space in the theme editor.
The text added after the colon, highligted in green, should be the color you want customers to see on your Shopify store, which can be represented as a hex color or one of the suitable Color names in the table above.
We recomend using HEX Colors as color swatch values.
Always remember to add the # symbol at the beginning of every hex value used for the colors to work correctly when viewing the website.
Also keep in mind that when you add new colors to your store, always updates the Product swatches theme setting.
Learn how to create products on Shopify here
Last updated
