Have you ever had this problem?

What if the main color of the project is light, but the images generated randomly with MockJS are colorful and bright, causing the project to go off the rails?

As a result, the Mockjs image blinds me. The colors are nice, but they don’t match. > <~~

After a bit of research, I finally came up with a mockJS scheme to generate light-colored images for my final defense.

Look at the effect:

Principle of hexadecimal color code

To create your favorite tone, you need to know how the hexadecimal color code (#eeeeee) works.

The hexadecimal color code consists of ‘#’ and three hexadecimal digits connected together.

We know that any color can be made from the primary colors of red, green and blue in certain proportions.

The three hexadecimal numbers of the hexadecimal color code correspond to the intensity of red, the intensity of green, and the intensity of blue.

practice

(Demo using decimal)

Based on the above rule, we can deduce that if we want a set of pictures with red tones, we should make the value of the first hexadecimal number greater than the other two.

We can set this to: # (150~200) (70-110) (70-110)

Mockjs:

Let’s say I want a set of light blue-green tones, and I want the green and blue to be strong enough, similar, and stronger than the red.

For example: : # (110~170) (200-225) (200-225)

Mockjs:

If you want only a set of light colors with a large enough span of colors, you should make all three colors strong enough (for example, greater than 100) and have a large range of random numbers.

For example: # (180-225) (140-255) (120-255)

Mockjs demo:

Mockjs code implementation

Mock.mock('/api/data', (req, res) => { const data = [] for (let i = 0; i < 16; I++) {// use the mockjs Random to generate numbers and convert them to hexadecimal, concatenation. const a = '#' + Random.integer(180, 255).toString(16) + Random.integer(140, 255).toString(16) + Random.integer(120, 220).toString(16) data.push({ image: Random.image('140x140', a, ' IMAGE ') }) } return data })Copy the code

Heart feeling

Until I came up with this method, I couldn’t find any blogs on mockJS to tweak the colors on mockJS images, so this might be the first tutorial on the web (hee hee). If you think it will help you, please give it a like