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.
The Ultimate Guide to Hex Colors
The Ultimate Guide to Hex Colors 2022-08-11 2023-07-20 https://wp-mktg.prod.getty1.net/istockcontentredesign/wp-content/uploads/sites/5/2019/08/is_logo_white_tm.png iStock Blog https://wp-mktg.prod.getty1.net/istockcontentredesign/wp-content/uploads/sites/5/2021/03/2021_iStock_Hexcolors_Hero.jpg.jpeg 200px 200px
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.
What is a hex color 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.
- 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.
What are hex color codes?
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.
Popular hex color codes
| Color | RGB | Hex Color Code |
| Black | (0, 0, 0) | #000000 |
| Blue | (0, 0, 255) | #0000FF |
| Gray | (128, 128, 128) | #808080 |
| Green | (0, 128, 0) | #008000 |
| Purple | (128, 0, 128) | #800080 |
| Red | (255, 0, 0) | #FF0000 |
| White | (255, 255, 255) | #FFFFFF |
Unique hex color codes
| Color | RGB | Hex Color Code | Use |
| AliceBlue | (240, 248, 255) | #F0F8FF | Subtle background for an eCommerce or corporate page |
| Coral | (255, 127, 80) | #FF7F50 | Calm accent color |
| FireBrick | (178, 34, 34) | #B22222 | Aggressive accent color |
| HotPink | (255, 105, 180) | #FF69B4 | Playful accent color |
| LemonChiffon | (255, 250, 205) | #FFFACD | Romantic background for a wedding or other personal page |
What Does Hexadecimal Mean?
First, let’s look at the “hex” part of the term “hex color code”. Hex, in this context, stands for “hexadecimal”, a number system in which there are 16 basic numerals, rather than the more familiar 10.
This is the number system used by HTML, and many other programming languages for that matter, and so it is the way in which colors are recorded in the language.
Hexadecimal, as the name suggests, is a way of encoding a base 16 number system. Decimal, our regular number system you’re already familiar with, is base 10. Hexadecimal uses the same numerals as the regular system for the first 10 numbers (so 0 – 9) and then swaps to letters, so the numbers 10 – 15 are encoded using the letters A – F.
As an interesting aside, the primary reason that hexadecimal is used is because it possesses a natural link to the binary system that is used by your computer at a more basic level.
Binary numbers are commonly expressed as a power of 2, and 16 is 2^4. This makes it easy to convert between hexadecimal and binary (though we won’t be doing that today).
You don’t need to know this to use hex color codes, but it might come in handy the next time you want to impress someone.
What Components Make Up a Color?
How do we use the hexadecimal system to encode colors in RGB?
Colors that are displayed on a computer screen are made up of three components, which correspond to the three colors that are present in each pixel of your screen. If you look really, really closely (or you have an ancient screen) you’ll be able to see them – red, green, and blue.
As a consequence, the way that we encode colors is to specify how much light each of the red, green, and blue (RGB) parts of your pixels should give out. So, for instance, an RGB value (a type of value used in many different software systems) might look like this: RGB (255, 0, 0).
255 is the maximum value for a component, and so this value indicates that the first component (red, or R) should be at maximum, and the other two should be at minimum. And that will give us (you’ve guessed it) pure red.
(Incidentally, the reason that 255 is the maximum value is also related to the ease of using this value [or, actually, 256 including 0] in binary. 256 is 2^8. But that’s another factoid you really don’t need to know.)
The observant readers among you will already have spotted that, even at this stage, it’s pretty simple to work with colors in this form. Black, as an RGB value, is RGB (0,0,0), and white is RGB (255,255,255). Green? That’s right, RGB (0,255,0).
How Hex Colors Work
Now that we know how colors work, we can look at a real hex color code. Take, for example, #ff0000, and let’s combine our knowledge from above to work out what it means.
Take a look at your hexadecimal table, and you’ll see that “FF” translates to “255” in standard, base-10 encoding.
One is that it’s easier to keep track of which colors you are using. When designing using a color picker, it’s easy to accidentally use a color that is very close, and therefore all but indistinguishable, from the one you actually want.
This means that before you know it, your pages are in two similar but distinct shades of red. Using a hex code means you’ll get the same color every time.
Secondly, using hex codes allows you a fine level of control over your colors that is not possible with a color picker.
No color picker can contain all 16 million colors available to you when using HTML, but by writing your own color codes you can increment the shades that are available to you one value at a time.
Third, an understanding of the way that colors work on a computer screen is invaluable when it comes to designing web pages, or in fact any piece of software. With just a little insight into the way that your devices interpret code and displays colors, you can begin using hex codes to mix colors, and also ensure that the color you want to display is the one that actually appears on your users’ screens.
