To Documents

Hex Color Codes

Hex: What and Why?

• Hexadecimal (hex) is a base-16 number system, which requires 16 digits:
  

  0 1 2 3 4 5 6 7 8 9 A B C D E F
  

• Hex is convenient for representing binary data because 16 = 2⁴ is an exact power of 2. Therefore, each hex digit is can be represented by four binary digits (bits).
   
• Here are the representations of the hex digits in base-10 (decimal) and binary.

Hex → Decimal

• To convert a two digit hex number to decimal:
   
  
  (h₁ h₂)_hex = (16 * h₁ + h₂)_dec
   
  
  
  
• Example: Convert 5D_hex to decimal:
   
  
  5D_hex = 16 * 5 + D = 16 * 5 + 13 = 80 + 13 = 93_dec

Decimal → Hex

• The % operator is called the mod operator.
   
• % computes the remainder from integer division. For example:

  5 % 3 == 2   11 % 4 == 3   18 % 9 == 0
  

• For the purpose of converting decimal to hex, / represents integer division. For example>

  5 / 3 == 1   11 % 4 == 2   18 % 9 == 3
  

• To convert a decimal number between 0 and 255 inclusive to hex:
   
  
  d_dec = (d / 16)(d % 16)_hex
   
  
• Example: Convert 43_dec to hex:
   
  
  43_dec = (43 / 16)(43 % 16)_hex = (2)(11)_hex = 2B_hex

Comparing Two-digit Hex Numbers

• (d₁ d₂) _hex > (e₁ e₂) _hex if d₁ > e₁ or if d₁ == e₁ and d₂ > e₂.
   
• Which hex number from each pair is larger?

  56 6A   B2 A8   D6 DE   23 2B
  

Decimal and Hex Color Codes

• CSS accepts decimal color codes. For example:

  body  { background-color: rgb(240,240,255);
          color:rgb(0,0,180); }
  

• Traditionally, color codes are represented in hex.

  body  { background-color:#F0F0FF; color:#0000B4; }
  

• In the hex color code #F0F0FF, F0 is the red component, F0 is the green component, and FF is the blue component.