هذه المقالة متوفرة أيضا باللغة العربية، اقرأها هنا.

Contents

Contents of this article:

• Contents
• Introduction
• Color Represenatation
• Converting Decimal to Hexadecimal
• Converting Hexadecimal to Decimal
• Try it Yourself

Introduction

Before we begin our article we need to know first what is decimal and what is hexadecimal.

Using decimal representation means using base-10 representation of numbers which means that every digit of the number can be one of 10 values, 0 through 9.

A good example is 195. It’s is 3 digits and every digit is between 0 and 9.

On the other hand, hexadecimal is base-16 representation which means that there are 16 of base values that every digit in the number can be one of. These base values are 0 through 9 and A through F. From 0 to 9 are the same in dec (the shorthand for decimal). A equals 10, B equals 11, C equals 12, etc.

An example is 14 (decimal). If we need to represent it in hexadecimal we can say D.

Another good example is 9 (decimal). If we need to represent it in hex (the shorthand for hexadecimal,) you can say 9 too.

Color representation

You already know that a colors consists of 3 values; RGB (Red, Green and Blue). Although, there’re times when we blend it with another value (Alpha) to make color transparent, however it is not common. So we end up with 4 values (ARGB) to represent our color. True? Every value of these four occupies a single byte in memory so every value ranges from 0 to 255.

In HTML for instance you can represent any color by its name (if it is a known color like Red) or by combining the RGB values using hexadecimal (HTML doesn’t support Alpha.) You cannot use decimal values to represent colors in HTML. So you need to know how to convert between every decimal value to its equivalent hexadecimal and vice versa.

Converting decimal to hexadecimal

You already know that decimal values from 0 to 15 have the hex counterparts 0 through 9 and A through F so conversion will be very easy in this range. For a decimal value greater than 15 you need to apply a simple formula to convert it.

1. First, divide the value by 16 (because hex is base-16), then add the hex result (e.g. A for 10) to the left.
2. Second, divide the value by 16, and then add the remainder (modulus) to the right of the last number.

Examples:

- 11 (dec)
11 = B
Result = B (hex)

- 160 (dec)
160 / 16 = 10
160 mod 16 = 0
10 = A
0 = 0
Result: A0 (hex)

- 254 (dec)
254 / 16 = 15
254 mod 16 = 14
15 = F
14 = E
Result = FE (hex)

Because every value of ARGB occupies a single byte, then the values range from 0 to 255 so in hexadecimal they range from 0 to FF!

Converting hexadecimal to decimal

For hex values from 0 through 9 and A through F, they have equivalents in decimal.

For values greater than F (15) all you need is to reverse the steps you did in converting decimal to hex.

1. First, take the left digit and convert it to decimal. Then, multiply the result by 16.
2. Second, take the right digit and convert it to decimal. Then, sum it with the result of the first step.

Examples:

- B (hex)
B = 11
Result = 11 (dec)

- A0
A = 10
0 = 0
A * 16  = 160
160 + 0 = 160
Result = 160 (dec)

- FE
F = 15
E = 14
15 * 16 = 240
240 + 14 = 254
Result = 254 (dec)

Easy, isn’t it? A color like khaki (RGB: 240, 230, 140) in hexadecimal equals FF F0 E6 8C. To represent it in HTML you can say #F0E68C.

You can use Windows Calculator (in scientific mode) to make such conversions.