All Articles by Atari

760 Articles

Western Union: “Newlyweds” (circa 1988)

Remember back when parents paid for weddings? Yeah, that would’ve been great….

Westside Toyota Atlanta Braves Season Ticket Promotion (circa 1992)

Do car dealerships still have promotions like this? I feel this is another relic of a bygone era along with new cars costing well under $10k!

How Hex Color Codes Work

Where does one person’s interpretation of a color end and another person’s begin? How do we universally define colors displayed on modern screens? What is the equivalent of Pantone for digital documents? In this video, we’ll explore how color is displayed on modern LCD/LED screens before going into depth on how hexadecimal color codes work as a technological standard to convey color information.

Get the Arduino code, bill of materials, and more on element14.com/presents

Check out the rest of Project ColorTyme here

This video is part of a project for the element14 community. The electronics and engineering community where you can connect and collaborate with top engineers from around the world. Join now at element14 dot com, link in the doobly-doo!

Firebrick5 [#8E2323]

Picasso Blue [#0276FD]

Viridianlight [#6EFF70]

These are all very specific colors defined by very specific wavelengths of light, or–more accurately–by very specific ratios of three different specific wavelengths of light: red, blue, and green.

By varying the ratios of these three colors, we can create any color in the visible spectrum, but how do we tell all the millions of possible colors apart? We have definitive names for a few of them, sure, but when does one person’s interpretation of pumice [#78A489] end and blue fern [#759B84] begin?

We need some kind of universal language for defining colors. One that doesn’t leave any colors up to ambiguous interpretation. One that every modern device could conceivably understand and replicate. What we need are hex codes.

Greetings, Programs. Atari here, you there, and if you like learning about technology while building goofy projects around the shop, then go ahead and subscribe to this channel. Tally-ho!

Before we start talking about replicating colors, we should probably start by talking about how colors on a modern display are created. Most modern screens are made up of tiny picture elements–pixels–which are actually each made up of 3 color elements (or subpixels) that are each individually addressable.

Note that this is not the case when it comes to CRT displays. They employ an entirely different technology that we won’t be exploring in this video. If you want to learn about how CRT images are formed, Technology Connections has a fantastic piece all about it!

Anyway, pixels are each made up of 3 subpixels–one for each of the primary colors of light. By changing the intensity of each color’s respective subpixel, we can change the color of the pixel as observed by the human eye.

From red

To blue

To green

Or somewhere in between

Of course, if we turn everything up to full intensity, we’ll get white. Take everything down and we get black.

This is known as “additive color”: By adding more of a component color, we change the hue toward that component color.

Yes, this is a very rudimentary explanation of how additive color works, and I’m purposefully not going too in-depth because a discussion on color theory is really outside of the scope of this video. If you’re interested in that topic, leave me a note in the doobly-doo, and I’ll see what I can do. For now, I just want to provide a little context to facilitate the topic at hand.

Now, that brings me to the next point in this discussion. When we describe the capacity of a display to reproduce color information, we use a concept known as color depth. Color depth, or bit depth, is the number of bits used to indicate the color of a single pixel. As of 2018, nearly every display being manufactured is capable of displaying what’s known as “True Color” or 24-bit color. This means that every color the display is capable of reproducing can be defined by 24 bits or 3 bytes of information.

Are you still with me? Because this is where it all comes together.

Remember in the last video where we talked about how hexadecimal numbers work and why we use them in computing? You can watch the video up in the corner if you missed it.

Hexadecimal numbers work really well for computers because each digit holds 4 bits of information. If we put 2 hexadecimal digits together, we have a complete byte of information. That brings me back to these so-called “hex codes” for colors.

You may have noticed that hex codes are always six digits long. Six digits in hexadecimal is 3 bytes or 24 bits of information. So what do these codes mean? Let’s go back to 24-bit color.

We know that with 24 bit color, we have 3 bytes of color information. We also know that there are 3 primary colors of light represented by 3 subpixels in each pixel of the display. Are you starting to see a connection?

Now, you may–at some point–have seen a color indicated by an RGB value, a set of three numbers in parenthesis. This is a mathematical array that contains the respective intensities of the red, blue, and green subpixels. Each color’s intensity is represented by a decimal number between 0 and 255.

Why 255? Because it’s the largest decimal number that can be represented by 8 bits. That RGB value is actually a 24-bit number that’s written in an extremely clunky notation, but in engineering, we’re always looking for a way to make things more efficient. As such, we can fairly easily convert these three decimal numbers into three hexadecimal couplets and save quite a lot of typing down the road!

So in a hex code, each subpixel’s color is represented by a hexadecimal couplet: the first two digits are red, the next are blue, and the last two are green. By manipulating each couplet from double zero (zero intensity) to zero F (half intensity) to double F (full intensity), we can instruct a display to reproduce any of the 16 million 7 hundred 77 thousand 2 hundred 16 possible 24-bit colors.

Now for a fun fact: our squishy human eyes can only distinguish about 10 million different colors, so modern displays will actually reproduce more colors than we can possibly perceive, but those colors aren’t always evenly distributed across our perception space so some people will notice a phenomenon known as color banding at the transition between two adjacent colors. Light and perception is weird, man!

That, in a nutshell, is how hexadecimal codes work. Over the next several videos, I’ll be putting this information together with some electronics to build a rather interesting gadget, so be sure to subscribe and click the bell so you don’t miss out!

Connect with me on the social media and get sneak-peeks of projects in progress. Links are in the doobly-doo.

Up here is a video that YouTube thinks you’ll probably enjoy.

And the show notes for this episode are somewhere around here.

My name is Atari and until next time remember: It’s okay. It’s just a prototype.

Tally-ho, y’all!

Whiskas “No More Birds” (circa 1993)

So many riffs on George H.W. Bush’s famous “Read My Lips” speech. This one is among the oddest.

White House “Sip ‘n Snack” (circa 1992)

Perfect for suburban kids’ sport practices or homework sessions, it’s a packaged combination of White House apple juice and Cheetos-style snacks. With a catchy jingle that touts the product’s supposed healthful qualities, it’s close to the pinnacle of pre-9/11 American society.

How To Read Hexadecimal Numbers

Hexadecimal notation may look daunting, but with a little know-how and the right perspective, it can become extremely easy to learn how to read hex numbers. In this video, we’ll learn how to read hexadecimal numbers, how to count hexadecimal numbers, how to write hexadecimal numbers, and how to convert hexadecimal numbers.

Get the Arduino code, bill of materials, and more on element14.com/presents

Check out the rest of Project ColorTyme here

The Real Yellow Pages “Same Day Service” (circa 1989)

Once upon a time, children, we didn’t have the collected knowledge of all mankind available on demand from tiny computers in our pockets. If we needed to find information about a local business, we had to look them up. In a book.

Light ‘n’ Lively Yogurt: “Ask The Experts” (circa 1992)

Nothing sells products better than kids reciting scripted responses to a celebrity swimsuit model!

How To Train A Custom Wake Word For Google Assistant Using Snowboy

Following up to my primer on using Snowboy for custom Google Assistant wake words, in this video, I’ll walk you through using Snowboy’s “Hotword As A Service” to train your own wake words.

PARTS/TOOLS:

Google AIY Voice Kit

Raspberry Pi 3B+ (with appropriate SD card and power supply)

RESOURCES:

Snowboy

3D Printed Arduino Logo Wall Tile

Inspired by scouting merit badges, Atari decides to start a tile wall to celebrate his achievements. To celebrate building his first online course (Arduino For Kooks), he’s going to design a tile based on the Arduino Community Logo–a frenetic jumble of multicolored shapes forming the Arduino “infinity” logo. Since his 3D printer only has one extruder, he decides to paint and assemble the differently colored pieces for a nice, lo-fi aesthetic.

Download the STL files

Bill of materials:

Inland 2.85mm Silver PLA 3D Printer Filament

Craft Smart Acrylic Paint Value Set