1. Basic knowledge
If you give a keyword "color", what can you think of? Is it a colorful rainbow, or a red sun, or a yellow wheat field? When we were young, we all learned that light has wave-particle duality. From the point of view of waves, different frequencies of light (electromagnetic waves) correspond to different colors. In fact, color is not an attribute of light, but parameters such as frequency, amplitude, phase, and polarization direction of the wave. Many cone cells in the human eye can sense certain frequencies of light. In order not to confuse these different frequencies of light, we distinguish them into different colors.
The frequency of light is continuous, and the frequency of visible light is between 380nm and 750nm, so theoretically the color of light is infinite. It is impossible to display all visible light from hardware implementation, so what strategy does the display follow to achieve color display? When I was a child, I learned that the three primary colors R, G, and B can be superimposed to produce various colors. This superposition principle is also applied to the display. If you use a magnifying glass to carefully observe the screens of mobile phones, computers, etc., you may be able to see that the screen is composed of three different light-emitting diodes (LEDs) of red, green, and blue. Maybe these LEDs are arranged differently, but they all have these 3 colors of LEDs.
Now we know that the color of the display screen is composed of RGB, so how many R, G, B is a pixel composed of? This involves a professional term called color depth . In the field of computer graphics, color depth represents the number of bits used to store the color of 1 pixel in a bitmap or video frame buffer. It is also called bits per pixel (bpp). , bits per pixel). The 1.8-inch LCD screen I purchased on Taobao has 128*160=20480 pixels, each pixel is composed of 5 R lights, 6 G lights, and 5 B lights, and the displayed color depth is only 5+6+5 =16 bits, so it can only display: kinds of colors.
Now most display devices are true color , and the color depth is at least 24 bits, of which R, G, and B each occupy 8 bits, so that all colors can be displayed. Of course there are screens with 32-bit color depth because it adds an 8-bit alpha channel that can be used to control transparency. The higher the color depth, the more colors are available.
2. Color matching
Generally, when we need to use color adaptation, we already know what this color looks like, or we have debugged this color. For example, when doing a graduation project, if you want to display the school flag and school motto on the full screen , it is no problem to simply convert the whole picture into an image file composed of RGB565, but it takes up too much memory space. RGB565 occupies 2 bytes of memory space, 128*160*2=40KByte. If you simply store 2 pictures, it takes 80KB of storage space, which seems to be unworkable for the STM32F103C8T6 with only 64K Flash.
But the method is always more difficult. If the two pictures are reduced to 1/4 of the original, and each picture is directly reduced from 40Kb to 10Kb, I can still accept it. In addition, the SD card reading and writing interface of SPI interface is reserved behind the LCD display screen, but it is not used in the design, but the IIC type AT24C256 (EEPROM) is used as the storage medium of the picture. After the image is reduced, it cannot fill the full screen, so I thought of filling the edge of the image, which is why I wrote this color adaptation. Results as shown below:
Sampling the color of the edge of the picture requires the use of color recognition tools. Photoshop and some online websites can complete this work. We have found a web version tool for you . This article takes Photoshop's color picker as an example. The steps are as follows:
- Open the picture, use the color picker to pick the edge color of the picture: 0x0067aa, the color depth of the picture recognition is 24-bit RGB888, it can be deduced that R=0, G=103, B=170
- Convert RGB to binary, that is, R=0B 00000 000, G=0B 011001 11, B=0B 10101 010
- Since the RGB565 LCD used is not a true color screen, we can only discard the accuracy of the low bits of the color (the true color cannot be restored, but there is no way), we take the high 5, 6, and 5 bits of RGB, and fill the low bits with 0
- Get RGB=0B 00000 011001 10101 =0x0335 //The blue background of the school flag
If you don't know the color at first, and you want to replace a specific position of a specific picture with your favorite color, I recommend an online color palette called ColorSpace .
