How Hexadecimal color mode works, the logic explained?

Hexadecimal color mode is a way of representing colors in computing, particularly in web design and graphic design. The term “hexadecimal” refers to the base-16 numbering system, which uses the digits 0-9 and the letters A-F to represent values. In the context of color, hexadecimal values are commonly used to define the RGB (Red, Green, Blue) color model.

RGB Color Model:

The RGB color model is based on the additive color theory, where colors are created by combining varying intensities of red, green, and blue light. Each of these color channels is represented by an 8-bit value, resulting in a total of 256 possible intensity levels for each color (0 to 255). The combination of these three color channels produces a wide range of colors.

Hexadecimal Representation:

To represent the intensity levels in hexadecimal, each 8-bit value is converted into a two-digit hexadecimal number. The hexadecimal digits use the numbers 0-9 and the letters A-F, where A represents 10, B represents 11, and so on up to F, which represents 15.

Here’s how it works:

• 0 to 255 in Decimal: In the RGB model, each color channel can have values ranging from 0 to 255 (8 bits). For example:
  • 0 represents no intensity (minimum).
  • 255 represents maximum intensity.
• Conversion to Hexadecimal: To represent these values in hexadecimal, you divide the decimal number by 16 and note the quotient and remainder. The quotient becomes the first digit, and the remainder becomes the second digit.
  • Example: Decimal 187 to Hexadecimal
    • 187÷16=11 (quotient), 11 (remainder)187÷16=11(quotient),11(remainder)
    • So, 187 in decimal is represented as BB in hexadecimal.
• Combining RGB Values: In the RGB color model, each color channel is represented by a two-digit hexadecimal number. The three color channels are then combined to form a six-digit hexadecimal color code.
  • Example: RGB(120, 200, 50)
    • Red: 120÷16=7 (quotient), 8 (remainder)120÷16=7(quotient),8(remainder) → Red channel: 78 in hexadecimal
    • Green: 200÷16=12 (quotient), 8 (remainder)200÷16=12(quotient),8(remainder) → Green channel: C8 in hexadecimal
    • Blue: 50÷16=3 (quotient), 2 (remainder)50÷16=3(quotient),2(remainder) → Blue channel: 32 in hexadecimal
    • Combined Hexadecimal Color Code: #78C832

Use in CSS and HTML:

In web development, hexadecimal color codes are commonly used in CSS to define colors for styling HTML elements. For example:

/* CSS */
body {
  background-color: #78C832; /* Hexadecimal color code for the background */
}