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.
Color Names
Hex Value Equivalents
White
#FFFFFF
Red
#FF0000
Orange
#FFA500
Yellow
#FFFF00
Green
#008000
Blue
#0000FF
Purple
#800080
Black
#000000
Alice Blue
#FOF8FF
Antique White
#FAEBD7
Aqua
#00FFFF
Aquamarine
#7FFFD4
Azure
#F0FFFF
Beige
#F5F5DC
Bisque
#FFE4C4
Blanched Almond
#FFEBCD
Blue Violet
#8A2BE2
Brown
#A52A2A
Burly Wood
#DEB887
Cadet Blue
#5F9EA0
Chartreuse
#7FFF00
Chocolate
#D2691E
Coral
#FF7F50
Corn Flower Blue
#6495ED
Corn Silk
#FFF8DC
Crimson
#DC143C
Cyan
#00FFFF
Dark Blue
#00008B
Dark Cyan
#008B8B
Dark Goldenrod
#B8860B
Dark Gray
#A9A9A9
Dark Green
#006400
Dark Khaki
#BDB76B
Dark Magenta
#BD008B
Dark Olive Green
#556B2F
Dark Orange
#FF8C00
Dark Orchid
#9932CC
Dark Red
#8B0000
Dark Salmon
#E9967A
Dark Sea Green
#8FBC8F
Dark Slate Blue
#483D8B
Dark Slate Gray
#2F4F4F
Dark Turquoise
#00CED1
Dark Violet
#9400D3
Deep Pink
#FF1493
Deep Sky Blue
#00BFFF
Dim Gray
#696969
Dodger Blue
#1E90FF
Fire Brick
#B22222
Floral White
#FFFAF0
Forest Green
#228B22
Fuschia
#FF00FF
Gainsboro
#DCDCDC
Ghost White
#F8F8FF
Gold
#FFD700
Goldenrod
#DAA520
Gray
#808080
Green Yellow
#ADFF2F
Honeydew
#F0FFF0
Hot Pink
#FF69B4
Indian Red
#CD5C5C
Indigo
#4B0082
Ivory
#FFFFF0
Khaki
#F0E68C
Lavender
#E6E6FA
Lavender Blush
#FFF0F5
Lemon Chiffon
#FFFACD
Light Blue
#ADD8E6
Light Coral
#F08080
Light Cyan
#E0FFFF
Light Goldenrod Yellow
#FAFAD2
Light Green
#90EE90
Light Grey
#D3D3D3
Light Pink
#FFB6C1
Light Salmon
#FFA07A
Light Sea Green
#20B2AA
Light Sky Blue
#87CEFA
Light Slate Gray
#778899
Light Steel Blue
#B0C4DE
Light Yellow
#FFFFE0
Lime
#00FF00
Lime Green
#32CD32
Linen
#FAF0E6
Magenta
#FF00FF
Maroon
#800000
Medium Aquamarine
#66CDAA
Medium Blue
#0000CD
Medium Orchid
#BA55D3
Medium Purple
#9370DB
Medium Sea Green
#3CB371
Medium Slate Blue
#7B68EE
Medium Spring Green
#00FA9A
Medium Turquoise
#48D1CC
Medium Violet Red
#C71585
Midnight Blue
#191970
Mint Cream
#F5FFFA
Misty Rose
#FFE4E1
Navajo White
#FFDEAD
Navy
#000080
Old Lace
#FDF5E6
Olive
#808000
Olive Drab
#6B8E23
Orange Red
#FF4500
Orchid
#DA70D6
Pale Goldenrod
#EEE8AA
Pale Green
#98FB98
Pale Turquoise
#AFEEEE
Pale Violet Red
#DB7093
Papaya Whip
#FFEFD5
Peach Puff
#FFDAB9
Peru
#CD853F
Pink
#FFC0CB
Plum
#DDA0DD
Powder Blue
#B0E0E6
Rosy Brown
#BC8F8F
Royal Blue
#4169E1
Saddle Brown
#8B4513
Sea Green
#2E8B57
Sea Shell
#FFF5EE
Sienna
#A0522D
Silver
#C0C0C0
Sky Blue
#87CEEB
Slate Blue
#6A5ACD
Slate Gray
#708090
Snow
#FFFAFA
Spring Green
#00FF7F
Steel Blue
#4682B4
Tan
#D2B486
Teal
#008080
Thistle
#D8BFDB
Tomato
#FF6347
Turquoise
#40E0D0
Violet
#EE82EE
Wheat
#F5DEB3
White Smoke
#F5F5F5
Yellow Green
#9ACD32

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?

  1. 1.
    Within your Shopify admin, go to Online StoreThemesCustomize.
  2. 2.
    Click Theme Settings icon, indicated as a paintbrush symbol on the left of the dashboard, then click Product swatches towards 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.
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.
Learn how to create products on Shopify here