Because the author recently in the development of visual platform, so the dynamic editor this piece of research for a period of time, found that there is a small module of knowledge points more interesting, so here to share.

As a front-end engineer, we usually in the docking design draft, is not often involved in the conversion of color values? For example, conversion from HEX value to RGB value, or conversion from RGB value to HEX value, which is very common in PhotoShop and other design software, and is often used in the design of ides such as sketchpad. Another scenario is that, in order to meet the boss’s requirements for high special effects, We want to make the animation show different colors at different times and have a transition effect (although transiton can do this), like this:

Therefore, the author will share the principle and algorithm of HEX and RGB conversion, and realize the function of randomly generating HEX value and randomly generating RGB value. Finally, we will take you to deeply understand and master the application of color field.

1 Abstract

  • HEX and hexadecimal
  • HEX to RGB algorithm
  • RGB to HEX algorithm
  • Application scenarios

2 HEX

The Hexadecimal system (Hexadecimal) is a representation of data in a computer. It’s not the way we normally write it. It consists of 0-9, A-F, and is case insensitive. The corresponding relation with base 10 is: 0-9 corresponds to 0-9; A-f corresponds to 10-15; N-base numbers can be expressed as numbers from 0 to (n-1), and above 9 by the letters A-f.

The above concepts are very important and are key to our conversion to RGB. The other thing we need to know is base conversion. In computer science, we all know how to convert a binary to a decimal. The way to convert a base 10 to a base 16 is similar to the way to convert a base 2. The only change is that the divisor is changed from 2 to 16. For example, let’s take 140:

dividend The calculation process shang remainder
140 140/16 8 12
8 8/16 0 8

So 140 is converted to hexadecimal, which is 8C.

This is the core knowledge of HEX and RGB conversion. Next, let’s take a look at the implementation of the conversion algorithm.

3 HEX to RGB algorithm

Converting a HEX color value to an RGB color value is essentially the first HEX digit times 16 plus the second digit. For example: convert the HEX value of color #1821DD to RGB value.

#1821DD ----------> rgb:

18----> r: the value of r is1 * 16 + 8 = 24

21----> g: the value of g is:2 * 16 + 1 = 33DD ----> b:13 * 16 + 13 = 221
Copy the code

The above conversion result is RGB: (24, 33, 221), how about, is not very simple? Next, let’s look at the specific algorithm implementation:

const hex2rgb = (hex: string = ' ') :string= > {
  // For hex that is passed in incorrectly, i.e., not 7 or not 4
  if(! [4.7].includes(hex.length)) {
    throw new Error('Formatting error')}let result = hex.slice(1)

  // If it is a color stack value, convert it to a 6-bit color value
  if(result.length === 3) {
    result = result.split(' ').map(a= > `${a}${a}`).join(' ')}const rgb:number[] = []

  // Calculate the hex value
  for(let i=0, len = result.length; i< len; i+=2) {
    rgb[i / 2] = getHexVal(result[i]) * 16 + getHexVal(result[i+1])}function getHexVal(letter:string) :number {
    let num:number = -1;
    switch(letter.toUpperCase()) {
      case "A":
        num = 10
        break;
      case "B":
        num = 11
        break;
      case "C":
        num = 12
        break;
      case "D":
        num = 13
        break;
      case "E":
        num = 14
        break;
      case "F":
        num = 15
        break;
    }

    if(num < 0) {
      num = Number(letter)
    }

    return num
  }

  return `rgb(${rgb[0]}.${rgb[1]}.${rgb[2]}) `
}
Copy the code

Of course, there are other ways to convert REX to RGB, you can explore for yourself.

4 RGB to HEX algorithm

For RGB to HEX, the method is similar, but equivalent to the above method of inverse operation, the author implemented a train of thought, you can refer to learn:

const rgb2hex = (rgb: string) :string= > {
  let str = rgb.replace(/rgb\((.*)\)/g.'$1')
  let strArr = str.split(', ').map(t= > t.trim())

  let result:string[] = []

  for(let i:number = 0.len:number = strArr.length; i < len; i++) {
    let curVal = Number(strArr[i])
    let left = getHexStr(String(Math.floor(curVal / 16)))
    let right = getHexStr(String(Math.floor(curVal % 16)))
    result[i] = left  + right
  }

  function getHexStr(v:string) :string {
    let str:string = ' ';
    switch(v) {
      case '10':
        str = "A"
        break;
      case '11':
        str = "B"
        break;
      case '12':
        str = "C"
        break;
      case '13':
        str = "D"
        break;
      case '14':
        str = "E"
        break;
      case '15':
        str = "F"
        break;
    }

    if(! str) { str = v }return str
  }

  return ` #${result.join(' ')}`
}
Copy the code

So that’s the inversion algorithm. You got it? Now let’s talk about how it can be used.

5 Application Scenarios

In fact, color unit exchange is applied in many fields, the author first lists a few practical scenarios:

  • Unit conversion tool

  • WEB IDE palette

  • The dynamic background

In fact, there are many applications, you can play by yourself, today’s learning is over here, excuse me, today you learned again?