On the Web, colors are commonly expressed using what are called hexadecimal, or, for short, hex, codes. So named because they contained six characters, hexadecimal are a standard way to indicate the amount of red, green and blue light that should be used to, when combined, create a specific color. In hex codes, two characters are assigned to the red value, two for green and two for blue.
Hex codes can only consist of the numbers 0 to 9 and letters A to F, with 0 being the lowest value and F being the highest.
In hex codes, black is denoted as #000000. A handy way to remember this is that, scientifically speaking, black is the absence of reflected light, so therefore having all zeros is rather appropriate. Conversely, white is full saturation of all colors being reflected to our eyes and is denoted using #FFFFFF. An easy way to remember this notation is to think “F” stands for the “full amount of light.”
Hex codes always begin with a pound sign (Shift + 3 on your keyboard).
In the vast majority of cases, hex codes are not case sensitive when it comes to letters; so #ffffff is the same as #FFFFFF.
You’ll also sometimes see three digit hex codes; this is considered shorthand and, while it is widely supported, it’s always a good idea to test that it does work. Three digit hex codes require that both characters used for red, green and blue, respectively, be identical. For example, the shortcode #FA3 is equivalent to #FFAA33. To translate a shorthand hex code to the full version, simply repeat each character immediately following its first use.
The Out of the Sandbox color pickers automatically add the pound sign before color codes and support lowercase and uppercase letters and will also automatically convert shorthand hex codes to the full, six character version.
When working with Shopify themes, there are many locations where you can either enter hex codes or use a color picker. Color pickers, such as the ones included in Out of the Sandbox themes, are a great way to find the color you want without knowing its exact code. To use, simply click in the space to expand the color picker menu and use the vertical slider on the right to move through the full spectrum. Then, in the larger area to the left, you can click to select exade shade you’d like; with lighter colors being in the upper left, more pure colors to the upper right and darker shades at the bottom. You’ll also notice that, below the swatch, the hex code is automatically updated.
If, however, you know a specific color code you’d like to use in your Shopify theme, you can also type or paste in the exact hex code from your source into the box in the lower right of the color picker and the theme will automatically update to that exact shade.
