Read color hex codes

29 Nov 2018 · by David DeSandro

I gave the following talk at dotCSS in Paris on November 8th, 2018. dotCSS is a huge event. A grand stage where the world's leading voices in web development can reveal the most cutting edge advances in the platform. Or not...

I'm colorblind. I learned how to read color hex codes out of necessity. I thought this was something all developers could do, so I was surprised to discover my ability was special. I used my opportunity on stage to share this brain-hack because I think it's something everyone should know.

dotCSS puts together a great show. Not only do they produce high-quality videos of all the talks, but they release them for free. That's rad.

Full transcript of my talk is below. Video on YouTube. Slides on Speakerdeck.


A couple years ago, I discovered I had a special ability. I can read color hex codes.

Color hex codes are the six-digit alpha-numerical codes that we developers use every day to set colors.

My ability is that I can look at a hex code and tell you what that color is.

The reason I can read color codes is not because I'm some super developer. It's the opposite.

I am colorblind. I cannot rely on my own natural color vision. When I look at a color, I cannot know for certain what it is unless I have more information. So I learned how to read hex codes out of necessity.

The wild thing is: I thought all developers could do this. My co-workers used hex codes every day. But I was surprised to learn they didn't know the meaning of the characters themselves. To most developers, color hex codes are indecipherable.

I want to fix that. Today, I am going to teach you how to read color hex codes.

I want to teach you, not just because its a fun, developer parlor trick. Understanding hex codes makes you learn more than just hex codes.

Yes, I acknowledge that there are other, better color syntaxes. Now in CSS, we can use rgb() and hsl(). You might even be a preprocessor wizard, using variables and lighten darken functions. But the hex codes remains the ubiquitous standard.

If you want use the same syntax within CSS, Photoshop, WYSIWYGs, or native app, you'll be using a hex code. So let's get crackin'!

The process to read a color code takes requires these 5 steps. Let's begin.

The immediate problem with hex codes is that they are optimized for computers, not humans. Hex codes hide their meaning. But we can pull it out.

A standard color hex code is made up of a hash followed by six digits. We'll be working with this code: #D49B25.

Those six digits actually represent 3 things: values of the RGB color channel. We can break up the code into three groups.

Now those three two-digit pairs: D4, 9B, 25. Those are hexadecimal numbers. That's where the hex in color hex code from. So what is hexadecimal?

When we humans count, we use the decimal numeral system. It is base-10. It has 10 characters, 0 though 9. When we count up to 9, we run out of characters, so we add a new digit 1 in front of 0, then continue counting again with 10, 11, 12.

The hexadecimal numeral system works the same way, except it is base-16. It uses 16 characters: 0 through 9, then A through F.

In hexadecimal, A is equal to ten, F is equal to fifteen, and 10 is equal to sixteen. Hexadecimal came to prominence in computer history as it coincided with the standardization of the byte. A byte in binary requires 8 digits of 1’s and 0’s. In hexadecimal, a byte requires only 2 digits.

Hexadecimal is both concise and computer-friendly, thus making a convention for programmers, that we live with to this day.

Now, you don't worry about being able to mathematically convert hexadecimal to decimal.

For our purposes, all you need to know is the relative value of the character.

  • 0 is lowest
  • 8 comes in the middle (like 5 in decimal)
  • A comes after 9
  • F is the highest

Here’s that same idea, but as a line graph.

Let's look at our color code again. Now that we know those characters are numbers, we can simplify them by rounding them to one digit.

So we take the original 6-digit code, and remove every other character.

We get #D92. In CSS, this 3-digit code is the called the shorthand.

You're likely already familiar and have seen #FFF for white and #000 for black. The actual value of a shorthand code is made by duplicating the digit for each channel. So #D92 is technically #DD9922. This is a slightly different code the original, but by rounding those numbers into the 3-digit shorthand, it is ideal as it's easier to parse and understand.

Step 1: Done!

Now we have an easy-to-digest form of the code. With our basic understanding of hexadecimal numbers we can visualize a little line graph for the channel values.

D is high, 9 is around the middle, 2 is low. And we’ve made our line graph.

This line graph tells everything we need to know about the color. But its in RGB — color mode based around hardware. We need a way to describe color that's human-readable.

Having colorblindness, I've found the best way to understand and describe colors is with the HSL color model.

HSL has three attributes.

  • Hue is the pure pigment of a color.
  • Saturation is how vibrant or muted the hue is.
  • Lightness is how light or dark the color is.

The beauty of the HSL model is provides a rubrik to mix and match words and describe any color in a human-readable way.

  • Hue can be described with 12 color names.
  • Lightness can be described as light, middle, or dark.
  • Saturation can be described as saturated, washed, muted, or gray.

So to describe our color, we just need to select the right word for each attribute, and put it together.

To better understand how hues work in the RGB color model, let's take a look at this color wheel.

Digital devices use RGB lights to display colors. Red, Green, and Blue. These are the our primary colors for digital displays. Their color codes make for the simplest line graphs. One channel is high and the other two are low. For example, Red has high R, low G and B. Green has low R, high G, low B.

Secondary colors in RGB are made by combining two primary colors. Their line graphs have two high channels and one low.

Yellow is the combination of Red and Green, so it has has high R and high G, low B. Magenta combines Red and Blue, so it has high R and B, low G.

Tertiary colors in RGB lie in between the primary and secondary colors. Their line graphs have a high, low, and middle channel values.

The hue Azure is in between Cyan and Blue. It has low R, middle G, and high B.

If all the channels have the same value. There isn't a clear hue, and that makes a shade of gray. More on that later.

Each hue has a line graph with a unique shape.

When you look at line graphs for colors that have the same hue, the shape remains the same, even though saturation and lightness may vary.

Here with colors with Azure hue, R is low, G is the in middle, and B is high.

To identify the hue of a color code, we match up its shape to the hue's shape. We do this by looking at the color's relative channel values, not its exact values. What's high, what's middle, what's low.

For our color, we have high R, middle G, low B. That means it has an orange hue.

Remembering the graph shapes for these 12 hues is the hardest part of the color-reading process. But its doable by understanding how the primary, secondary, and tertiary colors work together.

We got Hue. Next is Lightness

We can determine the lightness by looking at the total sum of the channel values. In other words, look at where the values generally are in the graph. If the values are closer to the top, the color is closer to white and thus lighter. If the values are closer to the bottom, the color is closer to black and thus darker.

Our color #D92, the values are both high and low, so it has middle lightness.

Lightness achieved. Finally: Saturation

Saturation is a measure of how vibrant or rich the hue is.

We can determine the saturation of a color by looking at the range of its channel values. The range is the difference between the highest and lowest channel value. The wider the range, the higher the saturation. Colors with small range have low saturation, appearing faded. A color with no saturation is a pure gray.

Mathematically, there's more going on to calculate saturation. But for our purposes, looking at the range works just fine.

With our color, #D92, D is the highest value, 2 is the lowest. D is high. 2 is low. That's a wide range, but not completely wide. So our color has moderate saturation, thus making it a washed color.

Now we have all three attributes for our color

So we can say #D49B25 is Middle Washed Orange.

Let’s put it to the a test. What is #3A538C?

We got our 5 steps.

Step 1: get the shorthand by removing the even digits. That gives us #358. Now the line graph. 3 is pretty low, 5 is a bit higher, and 8 is higher than 5. Hue comes from shape. #358 is low R, middle G, high B. That shape matches the hue of Azure. For Lightness, 3, 5 & 8 are all low-to-medium numbers. So this color is dark . Saturation from range. The difference between 3 & 8 is fairly small. Saturation is Muted. So we can say #3A53EC is Dark Muted Azure.

The last lingering question is what happened to the 3 other even digits? We can think of them as fine-tuning numbers. Let’s look at this code: #FFF2F0.

Its 3-digit shorthand would be #FFF which is pure white. But that's not white.

Looking at its even digits, we have F, 2, 0. On its own, that color would be a red-orange. So together, this color is 90% white and 10% red. So we can identify the whole color as a very faint red.

The even numbers in the six-digit code are useful for subtle desaturated colors, like beiges and pastels. But for the large majority of colors we use in our designs, all we really need is the 3-digit shorthand.

Mailchimp just released their rebrand. And sure enough, their brand colors use the standard six digits. Nearly all these colors can be changed to shorthand with negligible visual differences.

Using shorthand color codes come with several benefits.

Shorthand codes are easy to read as colors. Because there are only three characters, at a glance, you can match up each character to its respective RGB channel. So it's easier to understand what the code represents.

They are easy to remember. I use shorthands for my color palette. I’ve become so familiar with them, that I can list them off the top of my head. Garnet is #C25, Gold is #EA0, Blue is #19F. I don't have to reference a brand guidelines document because I know them by heart.

Shorthands are easy to choose. It’s like a grid for colors. Instead of choosing from 17 million colors, you'd be selecting from 4,096. That's still a lot of colors. But the limitation makes your choices more deliberate, making them easy to choose.

Shorthand codes are easy to change in code. For example with #D92:

  • Make it lighter by increasing numbers: #FB4
  • Make it darker by deceasing numbers: #C70
  • Make it less saturated by bring higher & lower numbers closer together: #C94
  • Change hue by changing order of the numbers: #29D

I encourage you to go back to your company and change the brand colors to shorthand. Visually, no one is likely to notice. But if they do, you then have a great opportunity to teach them how to read color codes.

This brings me to my final point

Front-end development is filled with frameworks and tools. React, Webpack, Sass, Babel, Bootstrap. These tools are useful because they allow you to work at a higher level. You don't have to worry about smaller details.

But relying on tools comes at a cost. Because at higher levels, you lose sight of the small details. There's a lot to learn there.

By looking into hex codes, you learn about these related subjects. Hexadecimal numbers, HSL color mode, Shorthand codes. It lead me down this path where its not just about the color code, I'm thinking about larger concepts like workflow and productivity.

So tools are good to get that grand macroscopic view. But its also useful to have a microscopic view. To pick apart every character of code you write. Because when you scrutinize your craft at the smallest levels, you can gain insights that lead back to understanding that big, wide view.


dotCSS 2018

dotCSS 2018

dotCSS 2018

dotCSS 2018

dotCSS 2018

dotCSS 2018

Inktober 2018 modern logos

15 Nov 2018 · by David DeSandro

Inktober 2018 modern logos

Inktober is a special month-long event where talented illustrators around the world remind me that I'll never be one-tenth as good as an artist. This year, I decided to hop in on the fun. As I'm no proper illustrator, I choose to work on familiar subject matter: modern logos.

Inktober 2018 modern logos

Earlier in October, I bought Logo Modernism. What I thought was a handy reference book turned out to be a massive 20 pound tome. It's the size of book a wizards would pour over. Its contents are just as alluring. Logos from the golden area of graphic design.

The techniques on display in Logo Modernism comprise the foundation of contemporary logo design. Forms are simple and precise. Geometric shapes convey abstract concepts. All in black in white.

Inktober 2018 modern logos

It was a worthwhile exercise. I spend so much in front a screen. Working with paper and a Sharpie was a welcome respite.

Inktober 2018 modern logos

Smalhaus logo

14 Sep 2018 · by David DeSandro

Smalhaus logo

Smalhaus is an independent software development studio and retail consultancy. I worked with boss-man Dustin to deliver a logo that communicated Smalhaus' craftsman qualities. Smalhaus means 'small house.' Don't overthink it. The logo depicts a little abode forming an S, with a door frame and chimney forming a lowercase h.

Smalhaus logo sketches

Missed opportunity with the beavers.

Smalhaus logo vectors

Metafizzy wordmark v4: SVG first

29 Aug 2018 · by David DeSandro

Metafizzy wordmark before & after

One of the perks of working for yourself is that you can do a rebrand on a whim.

CodePen

Last year, I got a chance to work on the wordmark for CodePen. Unlike most wordmarks, the CodePen wordmark was never designed with a font. Rather, all the letterforms are comprised of simple geometric shapes, rendered with a stroke in SVG. Using straight lines and semicircles, the SVG code for the wordmark is concise and elegant, a mere 500 characters. The wordmark's design extends beyond its visuals, into its underlying code. It is a lovely microcosm for CodePen itself, an enlightening demo in its own right.

CodePen wordmark grid

See the Pen CodePen logo SVG, v2 by Dave DeSandro (@desandro) on CodePen.

As I wrapped up my work on the wordmark, I felt jealous that Metafizzy's wordmark lacked this elegant code quality. So I set off to fix it.

Prior wordmarks

James Edmondson designed the first Metafizzy wordmark in 2012. He delivered a loose ribbon-like script that felt alive and personable. During the design process, he also produced a couple geometric designs with a fixed line width.

Metafizzy v2 logotypes

These geometric designs always kept a place in my heart. In the previous v3 rebrand, I went back and tried to design a wordmark closer this geometric script. The final design was a simpler script based off a geometric design.

Metafizzy v2 logotypes

It was a serviceable design, but its SVG code was a hodgepodge as one would expect.

The goal with this redesign (rebrand #4 if anyone is counting), was to design a wordmark optimized for SVG first. The visual design of the wordmark would be directed by how SVG code works. To produce less SVG code, I designed the wordmark with these contraints:

  • Use only strokes for fewer points and elements
  • Align points to pixel grid for no decimal values
  • Use elliptical arcs over bezier curves

Elliptical arcs

SVG has an interesting feature. <path> elements are the SVG elements used for non-standard shapes (like a circle or rectangle).. The actual shape of <path> elements are defined by a set of commands. These commands work like connect-the-dots, directing the rendering engine point-by-point where to draw next. (The syntax is remarkably reminiscent of the Logo programming language) and its turtle graphics. Takes me way back.)

There are commands for straight lines L, H, V and for bezier curves C, S. There are also commands for special curves: quadratic curves Q, T and elliptical arcs A. The elliptical arc command is particularly useful as you define the size of the ellipse, rather than the control points for a bezier curve. So it is more human readable and may require less code than a bezier curve.

For example, a three-quarter circle requires 3 bezier curve commands but only 1 elliptical arc command.

See the Pen SVG bezier vs arc commands by Dave DeSandro (@desandro) on CodePen.

Wow, you just wasted my time slogging though this code minutia. But code minutia, I counter, is what the Metafizzy brand is all about.

Wordmark design

As the cliché holds, the constraints drove creativity, directing the process along industrial guardrails.

Metafizzy wordmark v4 artboard

Metafizzy wordmark v4 grid

Metafizzy wordmark v4 grid

The basic design of previous Metafizzy wordmarks is still intact: swashes, dots, ligature fi. But the construction has been dramatically simplified with straight lines and elliptical curves.

A proper typographer might start with this strict geometric design, but would be quick to start refining it for optical visibility. Even though these shapes are mathematically aligned, human eyes see them differently. Circles don't look circular. Horizontal and vertical lines appear to have different weights. Curves don't reach edges. Many subtle improvements are required to make geometric type look geometric. But for this project, all those quirks are left in to keep the SVG code short & sweet. It's part of the charm.

Strokes only

Using only stroke shapes required a couple hacks. The dots are rendered as rings with strokes wide enough to fill their hole. There's an extra horizontal line to fill in the e. But using only strokes yielded several nice features.

The wordmark SVG is way easier to style in CSS, setting only stroke.

/* standard display white*/
.mfzy-wordmark { stroke: #FFF; }

/* highlight blue on hover*/
.mfzy-wordmark:hover { stroke: #19F; }

The stroke-only design lends itself to easier stroke-width variation. I was able to produce a variety of weights.

Metafizzy wordmark v4 weights

Stroke paths can then be used for animated vector lettering. Thanks Hali!

See the Pen Metafizzy animated SVG wordmarks by Dave DeSandro (@desandro) on CodePen.

SVG code

Here is the real wordmark design, its lovingly-hand-coded SVG:

<svg class="mfzy-wordmark" xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 280 80" fill="none" stroke="#333" width="140" height="40">
  <g transform="skewX(-18)">
    <path stroke-width="8" d="M38 20h6c4 0 7 2 9 6l9 18l12-24h2v22
    a20 22 0 0 0 20 22M48 22v28a12 15 0 0 1-24 0M98 44a6 6 0 0 0 0-12h-2
    a8 10 0 0 0 0 20h14a8 10 0 0 0 8-10M118 12v30a8 10 0 0 0 16 0M150 36
    q-4-4-8-4a8 10 0 1 0 8 10m0-14v14a8 10 0 0 0 8 10M184 20a9 9 0 0 0-18 0
    v34a8 10 0 0 1-8 10M158 32h24v24M190 32h18l-12 20h18M216 32h18l-12 20h18
    a8 10 0 0 0 8-10m0-14v14a8 10 0 0 0 16 0m0-14v38a6 6 0 0 1-12 0
    c0-12 32-8 32-32c0-10-6-16-15-16M108 24h24a6 6 0 0 0 6-6M102 38h-4" />
    <g stroke-width="6">
      <circle cx="38" cy="22" r="3" />
      <circle cx="182" cy="20" r="3" />
      <circle cx="269" cy="20" r="3" />
    </g>
  </g>
</svg>

The design and code was done with square proportions and perpendicular lines. This allowed me to use whole number values and elliptical curves. The slant is done afterward in SVG with a transform: transform="skewX(-18)". 18° is the angle of the Metafizzy bear's leg.

Pixels

Adhering the strokes to a grid gives the design its own native size 280 x 80, with stroke-width of 8. This means I can resize the wordmark in multiples of 70 x 20 and the strokes will align perfect to a pixel grid. See how there's no fuzzy pixels above & below the z's.

Metafizzy wordmark pixels

Metafizzy wordmark pixels

It's done...ish

You don't have to be precious with your brand. Not every rebrand needs to be a monumental overhaul revealed with a huge splash. In the digital age, most are better without it.

The majority of the work on this wordmark was done a year ago. Since then, I've been trying it out here & there, getting a better sense of how well it works in practice and how I feel about it. I'll likely keep fiddling away at this design. But after a year, it was time to at least give it a proper introduction.

300 Optimist Park logo

13 Aug 2018 · by David DeSandro

300 Optimist Park sign

Last year my buddy Andy reached out to design the logo for 300 Optimist Park a new apartment building going up in Charlotte, North Carolina. We worked together, looking at local type, trying out fonts, eventually honing in on the final design as a set of 3 wordmarks in 3 color palettes. One year later, the building is up and ready to rent. That sign is my first physical signage ever to go up (a proud moment).

300 Optimist Park type tour

300 Optimist Park logo explorations

300 Optimist Park logo colors

300 Optimist Park brand

300 Optimist Park brand

300 Optimist Park website

Metafizzy socks now on sale

19 Jun 2018 · by David DeSandro

Metafizzy socks

Metafizzy socks

I love socks. Slipping into a pair of socks you adore can change your whole day. No matter how bad things get, at least you're feet are living their best life. That's why I made Metafizzy socks. Wild colors, overly-cute design. These are the socks my feet were made for.

Metafizzy socks feature argyle design on leg and fizzy bear face on the top of the foot. Things are looking up for that cutie. Knit with comfy-soft cotton threads, you'll be walking on sunshine. Colors are a show-stopping combo of red, orange, gold, and blue. 1-size fits all Adult Medium. Made in the USA.

Makes a great gift. Everyone wears socks.

Look at these glorious socks.

Don't see your country as a shipping destination? Email yo@metafizzy.co or Tweet @metafizzyco to get your country added.

Check out the Eventbrite crew rocking the rainbows.