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 ATOM theme?

Within your Shopify admin, go to Online Store → Themes → Customize.
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.

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

PreviousCurrency NextCheckout

Last updated 1 year ago