{"id":14207,"date":"2023-03-31T11:07:49","date_gmt":"2023-03-31T05:37:49","guid":{"rendered":"https:\/\/fastbitlab.com\/?p=14207"},"modified":"2023-09-07T12:03:32","modified_gmt":"2023-09-07T06:33:32","slug":"stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats","status":"publish","type":"post","link":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/","title":{"rendered":"STM32-LTDC, LCD-TFT, LVGL (MCU3) Lecture 8| Important pixel formats"},"content":{"rendered":"<div class=\"boldgrid-section\" style=\"background-image: linear-gradient(to left, #eeeeee, #eeeeee);\" data-bg-color-1=\"#EEEEEE\" data-bg-color-2=\"#EEEEEE\" data-bg-direction=\"to left\">\n<div class=\"container\">\n<div class=\"row\" style=\"padding-top: 35px; padding-bottom: 0px; background-image: linear-gradient(to left, #eeeeee, #eeeeee);\" data-bg-color-1=\"#EEEEEE\" data-bg-color-2=\"#EEEEEE\" data-bg-direction=\"to left\">\n<div class=\"col-md-1 col-sm-12 col-xs-12 col-lg-1\">\n<div class=\"boldgrid-shortcode\" data-imhwpb-draggable=\"true\">\n\n<\/div>\n<p class=\"\">&nbsp;<\/p>\n<\/div>\n<div class=\"col-md-10 col-sm-12 col-xs-12 col-lg-10\">\n<h1 class=\"\" style=\"text-align: center; font-size: 35px; border-width: 0px; line-height: 50px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><strong><span style=\"color: #000080;\">Important pixel formats<\/span><\/strong><\/h1>\n<div class=\"row bg-editor-hr-wrap\" style=\"border-width: 0px; margin-top: 0px;\">\n<div class=\"col-lg-12 col-md-12 col-xs-12 col-sm-12\">\n<div>\n<div class=\"bg-hr bg-hr-10 color2-color\" style=\"border-style: solid; border-width: 0px 0px 3px;\"><\/div>\n<p>&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<h2 class=\"\" style=\"border-width: 0px; font-size: 25px; font-family: 'Roboto Slab'; font-weight: 400; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\"><span style=\"text-decoration: underline; color: #333399;\"><b>pixel formats(color formats)<\/b><\/span><\/h2>\n<p class=\"\" style=\"border-width: 0px; font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\"> <span style=\"font-weight: 400;\">The different pixel formats are shown in Figure 1.&nbsp; <\/span><\/span><\/p>\n<figure id=\"attachment_14210\" aria-describedby=\"caption-attachment-14210\" style=\"width: 456px\" class=\"wp-caption aligncenter\"><img fetchpriority=\"high\" decoding=\"async\" class=\"wp-image-14210 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/03\/Figure-1-8-1024x547.png\" alt=\"Figure 1. Important pixel formats(color formats)\" width=\"456\" height=\"244\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8-1024x547.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8-300x160.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8-768x411.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8-600x321.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8-1536x821.png 1536w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-1-8.png 1835w\" sizes=\"(max-width: 456px) 100vw, 456px\" \/><figcaption id=\"caption-attachment-14210\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 1. Important pixel formats(color formats)<\/span><\/figcaption><\/figure>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">&nbsp;<\/p>\n<p class=\"color-4-text-contrast color4-background-color\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 25px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #3439ba;\"><b>ARGB8888<\/b><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">ARGB8888 is a color encoding system that is commonly used in computer graphics and digital imaging.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">If an image is represented in ARGB8888 pixel format, that means each pixel of that image consumes 32 bits (32bpp) in memory, and each pixel has 4 components.<\/span><\/p>\n<ol class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Alpha(opacity) component of 8bits&nbsp;<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Red color component of 8bits<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Green color component of 8bits<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400; color: #000000;\">Blue color component of 8bits<\/span><\/li>\n<\/ol>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Each component can take on values between 0 and 255, representing the intensity of that color channel. The alpha channel ranges from 0 (fully transparent) to 255 (fully opaque). When combined, these four components can create over 16 million different color variations.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #ff0000;\"><strong>What is the alpha component?<\/strong><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">The alpha component controls the opacity level. Opacity means the capability to see through,&nbsp; see through what? see through the background. If the opacity level is 255, then the color is fully opaque to the background. The background will not be visible.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">So, if you want the background to be visible slightly or if you want to achieve see-through, you can vary this alpha component.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><strong><span style=\"color: #ff0000;\">What is opacity, and how is it represented in ARGB and hex formats?<\/span><\/strong><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">For example, the opacity is set to 255, the red component to 255, the green component to 0, and the blue component to 0. <\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">This results in the hex format 0xFFFF0000, with<span style=\"color: #ff6600;\"> &#8216;<strong>A&#8217;<\/strong><\/span> representing opacity, <strong><span style=\"color: #ff6600;\">&#8216;R&#8217;<\/span><\/strong> representing red, <span style=\"color: #ff6600;\"><strong>&#8216;G&#8217;<\/strong><\/span> representing green, and <span style=\"color: #ff6600;\">&#8216;<strong>B&#8217;<\/strong><\/span> representing blue. <\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">ARGB8888 means there are three color components and one opacity component, each of which is 8 bits. <\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In this example, the green and blue component is absent, and only the red component is present. When this value is sent to a display module, it should produce the color red. The alpha component controls the opacity level, with an opacity of 255 being fully opaque to the background. To achieve transparency, the alpha component can be adjusted.<\/span><\/p>\n<figure id=\"attachment_14211\" aria-describedby=\"caption-attachment-14211\" style=\"width: 675px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-14211\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/03\/Figure-2-7-1024x547.png\" alt=\"Important pixel formats- Figure 2. Opacity\" width=\"675\" height=\"361\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7-1024x547.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7-300x160.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7-768x410.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7-600x320.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7-1536x820.png 1536w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-2-7.png 1862w\" sizes=\"(max-width: 675px) 100vw, 675px\" \/><figcaption id=\"caption-attachment-14211\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 2. Opacity<\/span><\/figcaption><\/figure>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">ARGB8888 is commonly used in graphics applications, such as video games and image editors, where precise control over colors and transparency is important. It is also used as a color format for storing and transmitting images and videos over the internet.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 25px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #3439ba;\"><b>RGB888<\/b><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">RGB888 is a color encoding system that represents colors using a combination of red, green, and blue components, each of which has 8 bits of information. This means that there are 256 possible values for each component, resulting in a total of 16,777,216 possible color combinations.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">There is no opacity level. That means the pixel doesn&#8217;t contain the opacity component or the alpha component.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">This consumes only 3 bytes. You can save 1 byte here for every pixel. <\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">That&#8217;s why selecting different pixel formats also depends on how much memory you want to spare. If you have very limited memory in your microcontroller, then you should think about selecting the appropriate pixel format. You cannot randomly select any pixel format.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">RGB888 is also sometimes referred to as a 24-bit color because the total number of bits used to represent a single color is 24 (8 bits for red, 8 bits for green, and 8 bits for blue). This encoding system is commonly used in digital imaging and computer graphics and is supported by many display devices and software applications.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 25px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #3439ba;\"><b>RGB565<\/b><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">For most of the microcontroller-based Embedded graphics applications, RGB565 would suffice actually.&nbsp;&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">RGB565 is a color encoding format that represents colors using 16 bits. It is often used in computer graphics, video games, and mobile devices.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">The &#8220;RGB&#8221; in RGB565 stands for &#8220;Red Green Blue&#8221;, and the &#8220;565&#8221; refers to the number of bits assigned to each color channel. Specifically, the format allocates 5 bits for red, 6 bits for green, and 5 bits for blue.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Because the green channel has an extra bit compared to red and blue, it can represent a wider range of colors than those two channels. However, the color accuracy of RGB565 is not as high as other formats that use more bits per channel, such as RGB888 or ARGB8888.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 25px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #3439ba;\"><b>L8 Formats<\/b><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">It represents the colors of the image by a color lookup table(CLUT). In L8 format, 8-bit index value is used to look for the color value in the predefined color lookup table.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Your application will have one predefined color lookup table, which you can also call a color value array.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Here you can see that there is one array of 24 bits and each array element stores one color value.&nbsp;<\/span><\/p>\n<figure id=\"attachment_14212\" aria-describedby=\"caption-attachment-14212\" style=\"width: 614px\" class=\"wp-caption aligncenter\"><img decoding=\"async\" class=\"wp-image-14212\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/03\/Figure-3-5.png\" alt=\"Important pixel formats- Figure 3. L8 format\" width=\"614\" height=\"310\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5.png 1804w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5-300x151.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5-1024x517.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5-768x387.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5-600x303.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-3-5-1536x775.png 1536w\" sizes=\"(max-width: 614px) 100vw, 614px\" \/><figcaption id=\"caption-attachment-14212\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 3. L8 format<\/span><\/figcaption><\/figure>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Let&#8217;s say your application demands only 50 different colors, then you can just create an array of 50 elements (each element is of 3 bytes or&nbsp; 4 bytes), and you can store the corresponding color values.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">There will be one index register. When you load the index value to that index register, the corresponding color value will be fetched and it will be sent to the display module. If you use this method, then you can significantly reduce the memory consumption of the frame buffer.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Let&#8217;s compare. Let&#8217;s say your frame buffer resolution is 480&#215;270. So, if you consider the pixel format RGB888, then the total memory consumed is 480x270x3. So, this gives you a number of pixels and each pixel consumes 3 bytes. 3805KiB is the total memory consumed.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">But, RGB888 pixel format gives you 2 to the power 24 different color variations. But sometimes that many color variations are not required for an application. You just need 50 color variations or 256 color variations, which means 256 different colors.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In that case, you can use the L8_RGB888 format. So, in this case, there will be an array of 256 elements and each element consumes three bytes. And your frame buffer will hold a 1-byte index value.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">The pixel value is nothing but it&#8217;s an index value. It&#8217;s just a 1-byte index value. That&#8217;s how you can significantly reduce the memory consumption of the frame buffer. At the same time, you can have your desired colors for the application.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">Actually, the STM32 microcontroller supports such pixel formats.&nbsp; In hardware itself, you can create such an array and it provides you the index register and everything works at the hardware level.<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 25px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"text-decoration: underline; color: #3439ba;\"><b>Grayscale and BW pixel format<\/b><\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">There is also another pixel format just for the grayscale images and for the black and white images.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">BW pixel format just means that there will be only one bit for the color component. The black and white image is shown in Figure 4.&nbsp; There are only two colors: black and white. That&#8217;s why you just need only one bit to represent the color.<\/span><\/p>\n<figure id=\"attachment_14213\" aria-describedby=\"caption-attachment-14213\" style=\"width: 611px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14213\" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/03\/Figure-4-4.png\" alt=\"Important pixel formats- Figure 4. Grayscale and Black&amp;White images\" width=\"611\" height=\"344\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png 1859w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-300x169.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-1024x576.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-768x432.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-600x337.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-1536x863.png 1536w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4-800x450.png 800w\" sizes=\"(max-width: 611px) 100vw, 611px\" \/><figcaption id=\"caption-attachment-14213\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 4. Grayscale and Black&amp;White images<\/span><\/figcaption><\/figure>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">But the grayscale is different. The grayscale or a gray color means, when R=G=B, the Gray color is produced.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">That&#8217;s why, if you consider GRAY8, that means, there is one byte to represent the Gray intensity. By using such pixel format, you can represent an image in grayscale format. The intensity of the color varies while moving from black to white. So, you just need&nbsp; 1 byte here.&nbsp;<\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<figure id=\"attachment_14214\" aria-describedby=\"caption-attachment-14214\" style=\"width: 530px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14214 \" src=\"https:\/\/fastbitlab.com\/wp-content\/uploads\/2023\/03\/Figure-5-4.png\" alt=\"Figure 5. GRAY8\" width=\"530\" height=\"272\" srcset=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4.png 1782w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4-300x154.png 300w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4-1024x525.png 1024w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4-768x394.png 768w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4-600x308.png 600w, https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-5-4-1536x788.png 1536w\" sizes=\"(max-width: 530px) 100vw, 530px\" \/><figcaption id=\"caption-attachment-14214\" class=\"wp-caption-text\"><span style=\"color: #000000;\">Figure 5. GRAY8<\/span><\/figcaption><\/figure>\n<p class=\"\">&nbsp;<\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">If 1 byte = 0, then that means black. If 1 byte = 255, then it is fully white. And any in-between value will produce a Gray color with different intensity.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">So, if your application just wants to show the image as a grayscale image, then you can get rid of all these memory-consuming pixel formats you can just go for&nbsp; GRAY4 or GRAY2, or GRAY8.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">That would save a lot of memory, but there will not be any color. So, there is only gray color with varying intensity.&nbsp;<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; font-size: 17px; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"font-weight: 400; color: #000000;\">In the following article, we will understand some more terminologies like PPI, Resolution, etc.<\/span><\/p>\n<p class=\"\" style=\"border-width: 0px;\">&nbsp;<\/p>\n<p class=\"\" style=\"font-size: 17px; line-height: 30px; font-family: 'Roboto Slab'; font-weight: 400;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #800080;\"><b>Get the Full Course on STM32-LTDC, LCD-TFT, LVGL (MCU3)<\/b><\/span><span style=\"color: #3366ff;\"><a style=\"color: #3366ff;\" href=\"https:\/\/www.udemy.com\/course\/mastering-microcontroller-stm32-ltdc-lcd-tft-lvgl\/\"> <b>Here<\/b><\/a><\/span><\/p>\n<p class=\"\" style=\"font-size: 23px; border-width: 0px; font-family: 'Roboto Slab'; font-weight: 400; line-height: 30px;\" data-font-family=\"Roboto Slab\" data-font-weight=\"400\" data-font-style=\"\"><span style=\"color: #000080;\"><b>FastBit Embedded Brain Academy Courses<\/b><\/span><\/p>\n<p class=\"\" style=\"font-size: 17px; border-width: 0px;\"><span style=\"color: #000000;\">C<span style=\"font-weight: 400;\"><span style=\"color: #000000;\">lick here:<\/span><span style=\"color: #0000ff;\">&nbsp;<\/span><\/span><\/span><span style=\"color: #0000ff;\"><a style=\"color: #0000ff; text-decoration: underline;\" href=\"http:\/\/fastbitlab.com\/course1\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">https:\/\/fastbitlab.com\/course1<\/span><\/a><\/span><\/p>\n<p class=\"\">&nbsp;<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>&nbsp; Important pixel formats &nbsp; pixel formats(color formats) The different pixel formats are shown in Figure 1.&nbsp; &nbsp; ARGB8888 ARGB8888 is a color encoding system that is commonly used in computer graphics and digital imaging. If an image is represented in ARGB8888 pixel format, that means each pixel of that image consumes 32 bits (32bpp) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":14213,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"ocean_post_layout":"","ocean_both_sidebars_style":"","ocean_both_sidebars_content_width":0,"ocean_both_sidebars_sidebars_width":0,"ocean_sidebar":"0","ocean_second_sidebar":"0","ocean_disable_margins":"enable","ocean_add_body_class":"","ocean_shortcode_before_top_bar":"","ocean_shortcode_after_top_bar":"","ocean_shortcode_before_header":"","ocean_shortcode_after_header":"","ocean_has_shortcode":"","ocean_shortcode_after_title":"","ocean_shortcode_before_footer_widgets":"","ocean_shortcode_after_footer_widgets":"","ocean_shortcode_before_footer_bottom":"","ocean_shortcode_after_footer_bottom":"","ocean_display_top_bar":"default","ocean_display_header":"default","ocean_header_style":"","ocean_center_header_left_menu":"0","ocean_custom_header_template":"0","ocean_custom_logo":0,"ocean_custom_retina_logo":0,"ocean_custom_logo_max_width":0,"ocean_custom_logo_tablet_max_width":0,"ocean_custom_logo_mobile_max_width":0,"ocean_custom_logo_max_height":0,"ocean_custom_logo_tablet_max_height":0,"ocean_custom_logo_mobile_max_height":0,"ocean_header_custom_menu":"0","ocean_menu_typo_font_family":"0","ocean_menu_typo_font_subset":"","ocean_menu_typo_font_size":0,"ocean_menu_typo_font_size_tablet":0,"ocean_menu_typo_font_size_mobile":0,"ocean_menu_typo_font_size_unit":"px","ocean_menu_typo_font_weight":"","ocean_menu_typo_font_weight_tablet":"","ocean_menu_typo_font_weight_mobile":"","ocean_menu_typo_transform":"","ocean_menu_typo_transform_tablet":"","ocean_menu_typo_transform_mobile":"","ocean_menu_typo_line_height":0,"ocean_menu_typo_line_height_tablet":0,"ocean_menu_typo_line_height_mobile":0,"ocean_menu_typo_line_height_unit":"","ocean_menu_typo_spacing":0,"ocean_menu_typo_spacing_tablet":0,"ocean_menu_typo_spacing_mobile":0,"ocean_menu_typo_spacing_unit":"","ocean_menu_link_color":"","ocean_menu_link_color_hover":"","ocean_menu_link_color_active":"","ocean_menu_link_background":"","ocean_menu_link_hover_background":"","ocean_menu_link_active_background":"","ocean_menu_social_links_bg":"","ocean_menu_social_hover_links_bg":"","ocean_menu_social_links_color":"","ocean_menu_social_hover_links_color":"","ocean_disable_title":"enable","ocean_disable_heading":"default","ocean_post_title":"Important pixel formats","ocean_post_subheading":"","ocean_post_title_style":"solid-color","ocean_post_title_background_color":"#11549b","ocean_post_title_background":0,"ocean_post_title_bg_image_position":"","ocean_post_title_bg_image_attachment":"","ocean_post_title_bg_image_repeat":"","ocean_post_title_bg_image_size":"","ocean_post_title_height":0,"ocean_post_title_bg_overlay":0.5,"ocean_post_title_bg_overlay_color":"","ocean_disable_breadcrumbs":"off","ocean_breadcrumbs_color":"","ocean_breadcrumbs_separator_color":"","ocean_breadcrumbs_links_color":"","ocean_breadcrumbs_links_hover_color":"","ocean_display_footer_widgets":"default","ocean_display_footer_bottom":"default","ocean_custom_footer_template":"0","ocean_post_oembed":"","ocean_post_self_hosted_media":"","ocean_post_video_embed":"","ocean_link_format":"","ocean_link_format_target":"self","ocean_quote_format":"","ocean_quote_format_link":"post","ocean_gallery_link_images":"off","ocean_gallery_id":[],"footnotes":""},"categories":[8],"tags":[],"class_list":["post-14207","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","entry","has-media"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW<\/title>\n<meta name=\"description\" content=\"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW\" \/>\n<meta property=\"og:description\" content=\"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/\" \/>\n<meta property=\"og:site_name\" content=\"FastBit EBA\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/fastbiteba\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-03-31T05:37:49+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-07T06:33:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1859\" \/>\n\t<meta property=\"og:image:height\" content=\"1045\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"FastBitLab\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:site\" content=\"@fastbiteba\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"FastBitLab\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/\"},\"author\":{\"name\":\"FastBitLab\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\"},\"headline\":\"STM32-LTDC, LCD-TFT, LVGL (MCU3) Lecture 8| Important pixel formats\",\"datePublished\":\"2023-03-31T05:37:49+00:00\",\"dateModified\":\"2023-09-07T06:33:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/\"},\"wordCount\":1360,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Figure-4-4.png\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/\",\"name\":\"Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Figure-4-4.png\",\"datePublished\":\"2023-03-31T05:37:49+00:00\",\"dateModified\":\"2023-09-07T06:33:32+00:00\",\"description\":\"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#primaryimage\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Figure-4-4.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/03\\\/Figure-4-4.png\",\"width\":1859,\"height\":1045,\"caption\":\"Figure 4. Grayscale and Black&White images\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"STM32-LTDC, LCD-TFT, LVGL (MCU3) Lecture 8| Important pixel formats\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"name\":\"FastBit EBA\",\"description\":\"Your Online Academy of Embedded Systems\",\"publisher\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#organization\",\"name\":\"FastBit EBA\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"contentUrl\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/logo-EzNrEnyr.png\",\"width\":640,\"height\":640,\"caption\":\"FastBit EBA\"},\"image\":{\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/fastbiteba\\\/\",\"https:\\\/\\\/x.com\\\/fastbiteba\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/fastbit-embedded-brain-academy-b3167b124\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCa1REBV9hyrzGp2mjJCagBg\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/fastbitlab.com\\\/blog\\\/#\\\/schema\\\/person\\\/e32b38e733a0d76ffa7e6bc998652e5d\",\"name\":\"FastBitLab\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g\",\"caption\":\"FastBitLab\"},\"description\":\"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries.\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW","description":"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/","og_locale":"en_US","og_type":"article","og_title":"Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW","og_description":"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,","og_url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/","og_site_name":"FastBit EBA","article_publisher":"https:\/\/www.facebook.com\/fastbiteba\/","article_published_time":"2023-03-31T05:37:49+00:00","article_modified_time":"2023-09-07T06:33:32+00:00","og_image":[{"width":1859,"height":1045,"url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png","type":"image\/png"}],"author":"FastBitLab","twitter_card":"summary_large_image","twitter_creator":"@fastbiteba","twitter_site":"@fastbiteba","twitter_misc":{"Written by":"FastBitLab","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#article","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/"},"author":{"name":"FastBitLab","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d"},"headline":"STM32-LTDC, LCD-TFT, LVGL (MCU3) Lecture 8| Important pixel formats","datePublished":"2023-03-31T05:37:49+00:00","dateModified":"2023-09-07T06:33:32+00:00","mainEntityOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/"},"wordCount":1360,"commentCount":0,"publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png","articleSection":["Blog"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/","url":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/","name":"Important Pixel Formats: ARGB8888, RGB888, RGB565, L8, Grayscale, and BW","isPartOf":{"@id":"https:\/\/fastbitlab.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#primaryimage"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#primaryimage"},"thumbnailUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png","datePublished":"2023-03-31T05:37:49+00:00","dateModified":"2023-09-07T06:33:32+00:00","description":"Dive into the world of pixel formats including ARGB8888, RGB888, RGB565, L8, Grayscale. Learn how each format impacts color representation,","breadcrumb":{"@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#primaryimage","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2023\/03\/Figure-4-4.png","width":1859,"height":1045,"caption":"Figure 4. Grayscale and Black&White images"},{"@type":"BreadcrumbList","@id":"https:\/\/fastbitlab.com\/blog\/stm32-ltdc-lcd-tft-lvgl-mcu3-lecture-8-important-pixel-formats\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/fastbitlab.com\/blog\/"},{"@type":"ListItem","position":2,"name":"STM32-LTDC, LCD-TFT, LVGL (MCU3) Lecture 8| Important pixel formats"}]},{"@type":"WebSite","@id":"https:\/\/fastbitlab.com\/blog\/#website","url":"https:\/\/fastbitlab.com\/blog\/","name":"FastBit EBA","description":"Your Online Academy of Embedded Systems","publisher":{"@id":"https:\/\/fastbitlab.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fastbitlab.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/fastbitlab.com\/blog\/#organization","name":"FastBit EBA","url":"https:\/\/fastbitlab.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","contentUrl":"https:\/\/fastbitlab.com\/blog\/wp-content\/uploads\/2026\/04\/logo-EzNrEnyr.png","width":640,"height":640,"caption":"FastBit EBA"},"image":{"@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/fastbiteba\/","https:\/\/x.com\/fastbiteba","https:\/\/www.linkedin.com\/in\/fastbit-embedded-brain-academy-b3167b124\/","https:\/\/www.youtube.com\/channel\/UCa1REBV9hyrzGp2mjJCagBg"]},{"@type":"Person","@id":"https:\/\/fastbitlab.com\/blog\/#\/schema\/person\/e32b38e733a0d76ffa7e6bc998652e5d","name":"FastBitLab","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9230d0f9bdef28b63a01e7ca274ee7b2e8ed9abe932ee564af8809caaf52a0c8?s=96&d=mm&r=g","caption":"FastBitLab"},"description":"The FastBit Embedded Brain Academy uses the power of internet to bring the online courses related to the field of embedded system programming, Real time operating system, Embedded Linux systems, etc at your finger tip with very low cost. Backed with strong experience of industry, we have produced lots of courses with the customer enrolment over 3000+ across 100+ countries."}]}},"_links":{"self":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/14207","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/comments?post=14207"}],"version-history":[{"count":5,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/14207\/revisions"}],"predecessor-version":[{"id":15842,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/posts\/14207\/revisions\/15842"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media\/14213"}],"wp:attachment":[{"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/media?parent=14207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/categories?post=14207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fastbitlab.com\/blog\/wp-json\/wp\/v2\/tags?post=14207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}