All modern browsers support the following 140 color names, represented as a color name, or a equivalent hex value.
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.
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.
- 1.Within your Shopify admin, go to
Theme Settingsicon, indicated as a paintbrush symbol on the left of the dashboard, then click
Product swatchestowards the bottom of the panel.
First make sure you tick the
Enable colorscheckbox, then use the
Enter colorstext bo to start.
- 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.
Example of product options in Shopify
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.