True color with an explainer on bits and bytes

In this article I’m going to talk about what it means when a terminal can render true color. We’re going to be diving into bits and bytes and how they support RGB.

BUT I SEE YOUR TRUE COLORS, SHINING THROU… ahum oh wait I was gonna talk about render…


This content originally appeared on DEV Community and was authored by Karin

In this article I'm going to talk about what it means when a terminal can render true color. We're going to be diving into bits and bytes and how they support RGB.

BUT I SEE YOUR TRUE COLORS, SHINING THROU... ahum oh wait I was gonna talk about rendering true colors... Not the hit song True Colors by Cyndi Lauper. As I dive into my journey of using LazyVim, I decided to take it a bit further and investigate some of the technologies that support it, LazyVim recommends using a "terminal that supports true color". Let's dive in.

Bits and Bytes

I want to talk about bits and bytes. If we understand how those work, we might be able to thoroughly understand true color as well.

Bit

A Bit stands for Binary Digit. It is the smallest unit available in computer science. It represents either 0 as off, or 1 as on. It acts like a little switch, like a light switch. The switch is either on or off. This means that a bit can represent only two things.

Bits help a computer keep track of things.

Byte

A byte consists of 8 bits. And because one bit can have two values (0 or 1) you can make a lot of combinations. In fact, you can make 256 combinations! How does that work?

Imagine you have two light switches, they allow four different combinations:

  • 00 (both off)
  • 01 (first off, second on)
  • 10 (first on, second off)
  • 11 (both on)

We can represent this as 2^2! Meaning 2 x 2.

If we had three light switches, we would get 8 possible combinations.

  • 000 (all off)
  • 001 (only the last one on)
  • 010 (middle one on)
  • 011 (middle and last on)
  • 100 (first one on)
  • 101 (first and last on)
  • 110 (first and middle on)
  • 111 (all on)

This would be represented as 2^3. Which is 2 x 2 x 2.
With bits, every time we add a bit, we double the amount of possible combinations. Because the amount of combinations multiplies by a constant factor we can conclude that we are talking about exponential growth.

Big deep breath. Ok we got there.

True color can render RGB

True color means being able to display a huge range of colors. In fact, it means that something can display more than 16 million colors. In order to support that amount of colors our computer needs to keep track of 24 bits because 2^24 equals:

2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2×2

So 2^24 = 16,777,216, which gives us over 16 million possible colors!

This means that we use 3 bytes (24/8 = 3) to represent one pixel of color. And this is where we get to RGB!

RGB

RGB is short for Red, Green and Blue. When we use RGB in programming we use 8 bits for each color. We define exactly how much Red, Green or Blue we want to see in each pixel.

  • Red: an intensity of 0 (completely off) to 255 (completely on)
  • Green: an intensity of 0 (completely off) to 255 (completely on)
  • Blue: an intensity of 0 (completely off) to 255 (completely on)

They work together very similar to how we perceive colors in the real world. It mixes the three primary colors that we have in light to create a wide range of options.

Let's look at it with an example of css:

  • Black: RGB(0, 0, 0) – No red, green, or blue (total absence of light).
  • White: RGB(255, 255, 255) – Maximum red, green, and blue (full intensity of all channels).
  • Pure Red: RGB(255, 0, 0) – Full red, no green or blue.
  • Pure Green: RGB(0, 255, 0) – Full green, no red or blue.
  • Pure Blue: RGB(0, 0, 255) – Full blue, no red or green.
  • Gray: RGB(128, 128, 128) – Equal intensity of red, green, and blue.

Pretty nifty right!

Conclusion

So... when something asks for a terminal that supports true color, it means that we need a terminal that is capable of using 24 bits for each pixel. This will allow for a larger range of colors than terminals that support only 8-bit (256 colors) or even fewer colors.


This content originally appeared on DEV Community and was authored by Karin


Print Share Comment Cite Upload Translate Updates
APA

Karin | Sciencx (2024-10-24T19:52:18+00:00) True color with an explainer on bits and bytes. Retrieved from https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/

MLA
" » True color with an explainer on bits and bytes." Karin | Sciencx - Thursday October 24, 2024, https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/
HARVARD
Karin | Sciencx Thursday October 24, 2024 » True color with an explainer on bits and bytes., viewed ,<https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/>
VANCOUVER
Karin | Sciencx - » True color with an explainer on bits and bytes. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/
CHICAGO
" » True color with an explainer on bits and bytes." Karin | Sciencx - Accessed . https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/
IEEE
" » True color with an explainer on bits and bytes." Karin | Sciencx [Online]. Available: https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/. [Accessed: ]
rf:citation
» True color with an explainer on bits and bytes | Karin | Sciencx | https://www.scien.cx/2024/10/24/true-color-with-an-explainer-on-bits-and-bytes/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts