In CSS there are two main ways of selecting colors. The first is to simply use the color name, like this:
background-color: blue;
Obviously this is limited. A computer can display millions of different colors, and remembering the names of every single one of them is impossible. And spare a thought for that poor guy whose job it is to come up with the names!
This is why CSS uses hex codes, like this:
background-color: #DDEEFF;
You’ve probably used hex codes before. You probably use a hex color pickerto generate your codes. But it’s likely you have no idea what a hex code means or how it’s generated. Learning this is surprisingly easy and satisfying, and once you’ve got your head around it you’ll be able to write your own hex codes without the need for a color picker.
Hex Codes Represent Red, Green and Blue
A computer screen displays a color by combining red light, green light and blue light. 100% red, 100% green and 100% blue produces white. Zero red, zero green and zero blue produces black. In fact, equal levels of red, green and blue, whatever that level may be, will always produce a shade of gray.
The six digits of a hex code are in fact three two-digit numbers, each representing the level of red, green and blue. So #000100 is zero red, the darkest possible shade of green without being totally black, and zero blue. #010101, because the three values are all equal, is the darkest possible shade of grey, and #020202 is the second darkest. And of course #000000 is black. But what about #FFFFFF for white – what do the letters mean?
Hex Codes Use The Hexadecimal System to Minimize Length
There are 256 possible shades each of red, green and blue (0 through 255). If we wanted to produce white (the brightest levels of all three colors combined), we’d need to write #255255255. That’s nine digits long.
Hex codes use the hexadecimal number system to make it possible for 256 numbers to be represented with only two digits. Instead of counting 0 through 10 like our regular decimal number system, it counts 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F and then 10, followed by 11, 12, 13, 14, 15, 16, 17, 18, 19, 1A, 1B, 1C, 1D, 1E, 1F and then 20. Make sense?
This means that 256 numbers can be represented using only two digits, instead of the 100 that are possible with our decimal number system (0 through 99). So the highest possible two digit number is not 99 but FF (equal to 255). This is why white is #FFFFFF, pure red is #FF0000, pure green #00FF00 and pure blue #0000FF.
Learn more about hexadecimal and its relationship with binary…
Hex Codes Can Be Abbreviated
You may have seen hex codes like #FFF, #000, #0F0 or even #ABC that only use three digits. This is just a shorthand of writing a code which is three pairs of identical digits: #FFFFFF, #000000, #00FF00 or #AABBCC.
Come Up With Your Own Hex Codes
So now you know how a hex code is generated, it becomes possible to write your own without the need for a color picker. Of course, a color picker is still the easier option for more obscure colors, but for simple combinations like magenta (blue + red, #F0F), cyan (blue + green, #0FF) or any shade of grey (examples are #222, #555 or #CCC), knowing how hex codes work will save you a lot of time.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.
FAQs
Hex Codes Represent Red, Green and Blue
How do you read HEX color codes? ›
Hex color codes start with a pound sign or hashtag (#) and are followed by six letters and/or numbers. The first two letters/numbers refer to red, the next two refer to green, and the last two refer to blue. The color values are defined in values between 00 and FF (instead of from 0 to 255 in RGB).
How do you decode hex color code? ›
Color codes chart
| Color name | Hex | (H,S,L) |
|---|
| White | #FFFFFF | (0°,0%,100%) |
| Red | #FF0000 | (0°,100%,50%) |
| Lime | #00FF00 | (120°,100%,50%) |
| Blue | #0000FF | (240°,100%,50%) |
12 more rowsThe first 2 digits tell us how much Red is used, the next two digits tell us how much Green there is, and you guessed it, the last 2 digits relate to how much Blue is in the mix. With this in mind, let's look at a quick example to visualize this before moving on: #000000 Is a well-known HEX code that shows as Black.
What color is FFFF00 in hex? ›
The hex code for yellow is #FFFF00. The color of sunshine and sunflowers, yellow is optimistic, playful, and happy. It can also be associated with mental clarity and intellect. Yellow comes in a variety of colors—from sunshine yellow to golden yellow—and works well with its complementary color, purple.
How to understand hexadecimal? ›
The first nine numbers (0 to 9) are the same ones commonly used in the decimal system. The next six two-digit numbers (10 to 15) are represented by the letters A through F. This is how the hex system uses the numbers from 0 to 9 and the capital letters A to F to represent the equivalent decimal number.
What do hex color values mean? ›
Hexadecimal code is a system by which any specific color can be described accurately to a computer, ensuring consistency and accuracy in an electronic display. A hexadecimal color value is a six-digit code preceded by a # sign; it defines a color that is used in a website or a computer program.
How to decipher a hex code? ›
They are always a six-digit code, which contains three pieces of information:
- The first two digits provide information about the amount of Red in a color.
- The second two digits provide information about the amount of Green.
- The last two digits provide information about the amount of Blue.
RGB is a color gamut of light using red, green, and blue to render colors onscreen. When designing for web, digital, or TV the RGB color system is used. HEX, which stands for Hexadecimal, is also used onscreen and is basically a short code for RGB color. A HEX color is a six-digit combination of letters and numbers.
How do you describe the color of a hex code? ›
Hex Codes Represent Red, Green and Blue
Zero red, zero green and zero blue produces black. In fact, equal levels of red, green and blue, whatever that level may be, will always produce a shade of gray. The six digits of a hex code are in fact three two-digit numbers, each representing the level of red, green and blue.
In a Hex value the Regex it would look something like /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ . To break it down: [A-Fa-f0-9]{6} - Will search for a hex value with letters between a-f, A-F and digits from 0-9 stretching 6 character spaces (ex: abc123)
What is an example of a hex code? ›
HEX Color Values
For example, #ff0000 is displayed as red, because red is set to its highest value (ff), and the other two (green and blue) are set to 00. Another example, #00ff00 is displayed as green, because green is set to its highest value (ff), and the other two (red and blue) are set to 00.
How many hex codes are there? ›
How Many Hexadecimal Colours are Available? There are total 256³ or 16,777,216 colour combination available in standard #RRGGBB notation. It is because each colour values RR, GG, BB can include 256 different colour values ranging from 00 to FF. Hence the total number of colour combinations are 256³ or 16,777,216.
Are hex color codes universal? ›
Internationally recognized, these codes provide a universal language of color, ensuring that the specific shade you're referring to is crystal clear, no matter who you're communicating with. The structure of a hex code starts with a hash symbol (#), followed by six alphanumeric characters.
What is the pattern of 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. 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.
What are the 3 characters in hex color? ›
The 3-digit hex code is a shorthand for some 6-digit hex codes. Where r, g, and b represent the red, green, and blue components with values between 0 and f. The 3-digit hex code can only be used when both the values (RR, GG, and BB) are the same for each component.
What is the format of 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. 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.
What are the digits of the hex color code? ›
HEX Value. Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00). To display black, set all values to 00, like this: #000000.
How do you read a hex address? ›
Memory addresses are displayed as two hex numbers. An example is C800:5. The part to the left of the colon (C800) is called the segment address, and the part to the right of the colon (5) is called the offset. The offset value can have as many as four hex digits.
