Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
Since the earliest days of web development, there have been ways to specify colors in backgrounds, borders, fonts, and other elements. Some people use supported color keywords, while other people use a more specific color system such as HSL (hue, saturation, lightness). However, today we will be talking about the two most popular color naming conventions, RGB color codes and hexadecimal (hex) color codes.
RGB color codes, sometimes referred to as RGBA color codes when they include an additional value for an alpha channel, are one of the most popular ways to define colors in webpages. They are written in the following way:
color: rgb(0, 0, 0); /* black */
color: rgb(255, 255, 255); /* white */
RGB gets its name from the primary colors; red, green, and blue. In traditional color theory, all other colors can be derived from combinations of these three, and it was thought that these three colors could not be formed by a mix of any other colors.
Hex color codes actually use the same principle as RGB color codes, as they both define colors using the RGB color mode. They are written in a slightly different way:
color: #000000; /* black */
color: #FFFFFF; /* white */
While the choice between which of these color naming conventions to use comes down to a matter of personal preference, there are several advantages to using hex color codes:
While none of these are likely to make a significant impact on the development process, you may find yourself wanting to switch to hex color codes at some point – so, how does one switch from an RGB color code to a hexadecimal color code?
RGB color code values are based on the number system we are most familiar with, the decimal number system. The decimal number system is a Base-10 system, meaning there are 10 unique characters used to define the numbers. The 10 characters used are the numbers 0 – 9.
Hex color code values, in comparison, are based on the hexadecimal number system. The hexadecimal number system is a Base-16 system, meaning there are 16 unique characters used to define the numbers. The 16 characters used are the numbers 0 – 9, and the letters A – F.
Note: This also explains why the highest value possible in the RGB system is 255. By using a hexadecimal, or 16-bit number system, the maximum number of colors that can be displayed at any one time is 16 x 16, or 256 colors. These 256 colors are represented as the values 0 – 255.
Counting is done the same way in both systems. The first number is 0, and you count all the way up to the last digit. For the decimal number system, this digit is 9. For the hexadecimal number system, this digit is F. Sometimes, a leading 0 is written in front of these values. Once you reach the last digit, you start the count over, this time with your leading digit as the next one in the system (which is 1, for both the decimal and hexadecimal number systems). Below is a chart that helps to show the difference in the two number systems:
Decimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Hexadecimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
In order to convert an RGB color code to a hex color code, you will need to convert each of the values individually. Let’s look at the color crimson as an example. The RGB color code for crimson is rgb(220, 20, 60).
So far, we have #DC____.
Adding to what we had already, we now have #DC14__.
Finally, we have our total value of #DC143C.
Despite the benefits of using hex color codes, there are times you might want to use an RGB color code instead. Some of the reasons you may choose to use an RGB color code, aside from personal preference, are:
Converting a hex color code to an RGB color code is actually a little more simple, as there is less math involved. This time, let’s look at the color orchid as an example. The hex color code for orchid is #DA70D6.
This means that 218 is the red value.
This means that 112 is the green value.
This means that 214 is the blue value, giving us our final result of rgb(218, 112, 214).
No matter which method you prefer, both RGB and hex color codes are based upon the blending and intensity of three colors to create many different colors. However, colors on the web blend together differently than you might expect if you were to mix different color paint together.
Green + Blue = Cyan
Red + Blue = Magenta
Red + Green = Yellow
You might recognize these colors from another way of defining color in design, known as CMYK, which is used for printing. Some people prefer to think of the color palette not as the combination of RGB values to create CMYK values, but the combination of the CMYK values to create RGB values.
Magenta + Yellow = Red
Cyan + Yellow = Green
Cyan + Magenta = Blue
Cyan + Magenta + Yellow = Key (Black)
Knowing this, it becomes easier to understand what the individual RGB values control and how exactly to manipulate them to get the colors you are looking for.
The sliding scale of color is what most representations of color palettes use in place of a color wheel. It goes through all the colors of the rainbow, starting at red, and continuing on through orange, yellow, green, blue, purple, and pink until it returns to red.
The red RGB value is responsible for warm color tones, such as red, pink, and orange. The higher this value is, the warmer the color will be. Red is the first color encountered on the sliding scale, with a value of rgb(255, 0, 0) or #FF0000.
As you work your way along the scale, more of the green RGB value is added to create orange, then yellow. Yellow, with a value of rgb(255, 255, 0) or #FFFF00, is the color that red and green have in common. From that point, the red value is decreased to give us different shades of green.
Eventually you will reach green on the sliding scale, with a value of rgb(0, 255, 0) or #00FF00. From there, the blue RGB value is added to eventually create cyan. Cyan, with a value of rgb(0, 255, 255) or #00FFFF, is the color that green and blue have in common. Similar to before, the green value is then decreased to create different shades of blue.
Towards the end of the sliding scale, you can start adding the red RGB value back in to create colors such as purple and pink. Once you reach Magenta, with a value of rgb(255, 00, 255) or #FF00FF, the blue value is then decreased to eventually reach the original red color you started with.
Obviously, not all colors fit perfectly onto the sliding scale. By using the sliding scale, you will always be given very vibrant versions of colors – but sometimes, you need a lighter or darker shade of one of those colors to get the kind of color tone you’re looking for.
Generally speaking, the higher the numbers, the lighter the color, and the lower the numbers, the darker the color. If you want to stick to the same shade of a color you have, this makes adjusting the brightness simple:
Note: If you are changing two values, the values will need to be adjusted evenly in order to make sure you keep the same color tone. That means if you increase or decrease one of the values by 100, you will need to also increase or decrease the other value by 100, regardless of if these numbers had the same starting value.
In conclusion, both RGB and hexadecimal values can be used to display colors on a web page. There is no right or wrong way to write color values, but each one has their advantages and disadvantages depending on the task you are trying to accomplish. Also, regardless of what color naming convention you use, you can easily manipulate your color tone by adjusting the values you’re using.
There isn’t a single technique that can give you a code for each and every color. Sometimes you need a more brilliant tone, or a cloudier one, that can’t be obtained by simply changing one or two values. Don’t be afraid to adjust all three values – the results might turn out better than what you were originally aiming for.
Now, go out and explore the color in your world!
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareDevelopIntelligence has been in the technical/software development learning and training industry for nearly 20 years. We’ve provided learning solutions to more than 48,000 engineers, across 220 organizations worldwide.
Thank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2022 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.