What the heck is a Hex Code?
https://skl.sh/josephangelotodaro2 « Sign up via my link will get two FREE months of Skillshare Premium
You know when you’re using a color picker or building a website and you see a color being expressed as a six digit code that starts with a pound sign?
Well that’s called a hex code, and a remarkable number of designers have no idea what that code is actually telling us. There’s a lot more to take from a hex code than it might seem. Let’s do a quick deep dive and see what hex codes are really made of
This video is brought to you by our friends at Skillshare
You may already be familiar with the fact that digital displays are RGB, meaning that each little pixel site is actually a tiny little Red, Green and Blue lightbulb — that work together to make the color we see in that pixel.
Imagine that each one of these tiny lightbulbs has a dimmer switch, just like some of the lights in a house.
The dimmer switch can be slid down to zero percent to turn the light all the way off, or up to 100% to turn the light all the way up to max brightness.
The position of the dimmer switch for each red, green, and blue bulb is actually exactly what a hex code is.
It’s called a hex code because there are six digits. Two for each channel.
The weird thing is that each channel doesn’t go from 0-100.
That’s because each channel actually has 256 levels of brightness from 0 to 255. That’s what 8 bit color means. A bit can be on or off, so two possibilities — multiply two possibilities per bit times 8 bits and what do you get? 256 possibilities.
But then how do we fit 256 possibilities into only 2 digits of a hex code? Easy, we dip into the alphabet when we run out of numbers.
Instead of using Base 10 to count from 0 to 9 like we normal human beings do, each digit of a hex code goes past 9 to a, then b, then c, all the way to F. That gives us 16 possibilities per digit, and we have two digits for each color. So how many possibilities total for each color? You guessed it. 16 times 16 is 256.
So again, a hex code is just three brightness values — one for red, one for green, and one for blue — each shown with two digits a piece — and each digit going from 0 to F to make 16 possibilities per digit instead of only 10.
If you found this video helpful, please give it a like to make it easy for other folks to find it and subscribe if you haven’t already.
To learn more about design from the same pro’s I learned from, check out Skillshare.
Skillshare is an online learning community with thousands of classes covering dozens of creative and entrepreneurial skills — perfect for fueling your curiosity, creativity, and especially your career.
One of my favorite dudes in the business Aaron Draplin happens to have a course called Design Like Draplin: 21 Tips for Speeding Up Your Design Workflow where he’ll walk you through his personal tricks for keeping things moving before, during, and after a design project.
Skillshare is also super affordable at less than $10 a month for an annual subscription — which gives you unlimited access, so you can join all the classes and communities that interest you.
Because Skillshare is sponsoring this video, you can sign up with the link in the description below and get a 2 month free trial.
Enjoy and I’ll see you soon.