• Adobe Illustrator (18)
  • Adobe InDesign (7)
  • Adobe Photoshop (17)
  • Custom Labels (27)
  • Custom Stickers (8)
  • Design Tutorials (19)
  • Printing Issues (2)
  • Template Information (5)
  • Uncategorized (17)

Understanding RGB Color and Hexadecimal Values

If you’re an independent handmade crafter who runs their own website, or create web graphics, understanding the concept and nature of RGB color in relation to hexadecimal numbers can make a world of difference when choosing the right colors or understanding how web colors work.  Furthermore, understanding that there is a difference between CMYK color and RGB color can help any designer prevent any potential mistakes they may make if they don’t convert to CMYK before printing.  Below is our take on understanding RGB color values, when to use them, and a basic understanding of their relationship with hexadecimal numbers.  if you have any questions, please feel free to leave a comment.

What is RGB?

RGB color is the spectrum of visible colors that are emitted by a computer monitor. In other words, RGB is a light based mode of color.  RGB color is best used for computer or digital graphics for websites, digital publications, desktop wallpapers, and icons.  Typically, RGB based images are not intended for print media as color limitations and resolution are typical culprits for bad prints when using RGB color.  Images in RGB usually have a resolution of 72 pixels per inch (ppi), where 300 is the accepted standard minimum for print media.

RGB color is also considered additive colors, meaning that more light must be added to produce a color closer to white (all light).  In order to understand the nature of additive color, let’s observe RGB color values from hexadecimal and RGB number perspectives.

Understanding Hexadecimal Numbers

Many of you are familiar with hexadecimal colors for web design and maybe some graphic design projects, but may not have a grasp of how the numbering system works or what it means.  Think of hexadecimal numbers as an extended version of the decimal system we use today.  The decimal system consists of numbers 0-9. After reaching the number 9, we start over by adding a 1 as a new digit and resetting the first digit to 0 in order to start the process over again, giving us the number 10.  Hexadecimal works in a very similar way, except the numbers extend from 0-9 to 0-F.  The decimal numbers 10-15 are replaced with letters A-F, therefore changing the values of what are commonly recognized as decimal numbers into numbers with a larger value.  Here is a list of all the numbers in the hexadecimal numerology along with their decimal equivalents:

  • 0 = 0
  • 1 = 1
  • 2 = 2
  • 3 = 3
  • 4 = 4
  • 5 = 5
  • 6 = 6
  • 7 = 7
  • 8 = 8
  • 9 = 9
  • A = 10
  • B = 11
  • C = 12
  • D = 13
  • E = 14
  • F = 15

To clarify, what looks like the decimal number 10 in hexadecimal translates to the number 16 in decimal. Again, this is because the last number in a digit in hexadecimal has a value of 15 rather than 9 in the decimal.  Below are two matrices: one depicting values 0-99 in decimal numbers in order to compare with the next matrix depicting hexadecimal numbers 0-FF (decimal = 0-255)

Decimal Matrix

Decimal matrix showing numbers 0-99

Hexadecimal Matrix

Hexadecimal matrix showing numbers 0-FF (0-255)

If you don’t have a complete grasp on the whole numbering process with hexadecimal numbers, that’s completely understandable. The most important concept to grasp is the face that it’s like an extension on decimal numbers, which will help you in the next section.

Color by Numbers

RGB color values translate well when it comes to hexadecimal values.  Hexadecimal values for color can be broken down into RGB’s respective color channels red, green, and blue.  Each color gets a pair of hexadecimal values, equaling a range of 256 colors (FF, 0-255) per channel.  If someone types a hexadecimal value of #000000, this means that no light is added to the value, thus resulting in the color black.  On the opposite end of the spectrum, a value of #FFFFFF results in the color white. Why, you ask? It’s because we’re dealing with light.  Remember, RGB values work in a similar fashion to how our eyes work.  If the value is #000000, then that means all colors are being absorbed, but by adding values (hence the term additive colors), we get closer to white (#FFFFFF), which is all color channels equally emitted at their maximum range.

Black and White

Black and white values

If we were to take a prism to #FFFFFF, this is what it would look like:

red, green, and blue values

Red, green, and blue values by channel.

Each section has its own respective channel maxed out at FF (255), meaning that the most color for each channel was applied. Decreasing the value of a channel will darken the color because less light is being emitted.  For example, this is what red would look like with #AA0000 values rather than #FF0000:

Darker red image

Red with a lesser value

By understanding these basic principles of light and color, you’ll be able to create more accurate colors for your next upcoming digital project.  For a more definitive post on CMYK color, check out our article on process and spot colors.

Be Sociable, Share!
If you enjoyed this post, make sure you subscribe to my RSS feed!

Leave a Reply

Follow Us!