iStock Blog Best Practices Design The Ultimate Guide to Hex Colors

Hexadecimal colors are the visual language of the web. When you want a web page (or web app) to display a certain color, you tell it the hex code.

A hex color code is a 6‑symbol code made of up to three 2‑symbol elements. Each of the 2‑symbol elements expresses a color value from 0 to 255.A hex color code is a 6‑symbol code made of up to three 2‑symbol elements. Each of the 2‑symbol elements expresses a color value from 0 to 255.

• Element 1: Red value
• Element 2: Green value
• Element 3: Blue value

The code is written using a formula that turns each value into a unique 2‑digit alphanumeric code. For example, the RGB code (224, 105, 16) is E06910 in hexadecimal code.

Why? It’s complicated and has to do with the base 16 numbering system. If you’re curious, here’s a good explanation. If you’re just wondering what this all means to you as a designer, there are a couple of important things to know:

• Using the hexadecimal codes, you can show more than 16 million unique colors, which is thought to be more than the human eye can perceive.
• You can use color pickers or converters to create the code for you.

Why use the hex code instead of numbers? Because if you used numbers, every red, green, or blue value from 0 to 255 could be one, two, or three possible digits. In total, the code could be as few as three digits or as many as nine. This could cause confusion for the systems reading the codes but especially among the humans doing the coding. Having every value be six symbols no matter what reduces the chance of errors.

Hex color codes are values that tell the display how much of a color to show. The values are a special code that represents color values from 0 to 255.

If red, green, and blue are all at the minimum 0 (represented as “00” in the code), the color expressed is the color black. If red, green, and blue are all at the maximum 255 (represented as “ff” in the code), the color expressed is the color white.

The hex color values can combine to show more than 16 million different colors. So, of course, most will be somewhere between. You always can use a converter to convert the RGB numeric values into hex code for you.

But it may be helpful to memorize a few of the more common hexadecimal colors. This knowledge might come in handy if you were designing with a coder on the fly.

Hex colors are based on the RGB color model that has been in use since the early days of photography.

The theory behind the model is that you can create virtually any color the eye can see by assigning different combinations of red, green, and blue color values. The RGB color model is used by televisions, digital cameras, and video projectors in addition to practically every computer and phone screen in existence.

On the web and most digital applications, a 0 to 255 color value scale is used. You (or a programmer) tells the screen how much red, blue, and green to show. That combination creates the color that a viewer sees.

You have a lot of freedom to pick the color you want. The total possible number of combinations is 16,777,216 which is more than the human eye can actually distinguish.

Hex color codes are preferred by programmers because they are predictable. They are always six digits, no matter what the color. RGB values can be as few as three digits and as many as nine.

You aren’t required to use hex codes in web design. If you are coding a page in HTML, you can also use the RGB values or even color names.

Here’s how the HTML would look if you were coding, say, an aquamarine background for a web page.

• Hex color code for aquamarine: <div style=”background‑color:#7FFFD4″></div>
• RGB color code for aquamarine: <div style=”background‑color:rgb(127, 255, 212)”></div>
• Color name code for aquamarine: <div style=”background‑color:aquamarine”></div>

Even though you can specify the name or the RGB code doesn’t mean you should. To reduce the chance of a mistake in your project, use a color hex wheel picker or converter to generate the hex code you want. That way, there’s less chance of a current or future coder trying to do the conversion themselves and turning your gorgeous web page into something unsightly.

If you’re used to working with colors in Adobe Illustrator or for print, working with hex colors on the web is a bit of an adjustment. Here are a couple of things to know to make your project go well.

With 16,777,216 potential colors, hex color codes allow you plenty of options for contrasting colors. But because every pixel must display a unique color, hex colors don’t allow you to blend between shades of different colors very well.

When web designers try to create gradients using hex colors, the results aren’t always as expected. Because the shades don’t blend, the display ends up being distinct bands of color (color banding).

Color banding is more likely to happen on older devices that aren’t able to show millions of colors. In modern CSS, you can program gradients to eliminate the color banding issue. On modern screens, color banding is most common in photos of natural gradients like skies and rainbows, where the millions of colors visible to the naked eye get compressed to save file space.

When you’re developing a unique look on the fly, selecting complementary colors from the 16 million available is a daunting task. Happily, fellow designers have done some of the work for you by creating hex color palette databases and interactive selectors.

Color‑Hex Color Palettes: Browse and search thousands of community‑created hex color combinations at Color‑Hex Color Palettes.

Browsing? Go page‑by‑page through the named palettes. Every palette has a name to give you a sense of its style and identifies all six hex colors. Click the designer’s name to see other color palettes they’ve done.

Color‑Hex Color Palettes is a fantastic resource for hex color inspiration.

Coolors: The hex color resource Coolors combines inspiration with functionality to help speed up the design process.

You can browse trending color palettes to see what got other designers’ attention. Each trending palette can be saved to a personal favorites box if you sign up for an account.

Or use their lightning‑fast palette generator to create palettes based on the colors you want to use. One time‑saving feature of Coolors is the ability to “lock” a color (or colors), then generate additional complementary colors with a tap of your spacebar. New looks fly by at near warp speed. Just wait for the one that catches your eye.

Coolors is also available as an iOS app or Adobe extension.

If you’re designing for an existing site, or have other elements you want to match, you need to know which hex colors you’re working with on the site. This is where a good color picker is invaluable, especially when creating eye‑catching marketing materials. With ImageColorPicker, you can upload any image and see which hex colors are represented.

Another good resource is the ColorPick Eyedropper, a Google Chrome web browser extension that lets you see the hex color for any element of a web page. If you find yourself admiring a color on a certain site, use the Eyedropper to see what it is.

If you’re the one picking the imagery and other elements for the site, you’ll want an easy way to identify assets that match your hex color palette. On iStock, you can add a hex color as a filter to any search. Enter the code, or select from their color picker, then type your search keywords. The site will return related images that closely match the color you entered.

Are you ready to start finding the ideal images for your hex color scheme? Find assets that will complement your project today.