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.
Top comments (0)