Understanding Hex Values

Explainer
Concept of colors for design, color palettes, top view

Introduction: The World of Digital Colors

In the realm of digital design, colors bring life and meaning to our creations.

Understanding digital colors is key to crafting visually engaging websites, apps, and graphics. One crucial concept in this domain is hex values.

But don’t worry if this sounds complicated.

As always, we’ll use an analogy to explain it.

You know when you’re in art class and you mix different amounts of red, blue, and green paint together to create unique colors?

Well, computers do something very similar to display colors on the screen.

But instead of using paint, they use something called hexadecimal values, or hex values for short.

What Are Hex Values?

A hex value is a special code that tells your computer how much red, green, and blue to mix together.

It’s like a recipe for a color!

Hex values start with a hashtag (#) and are followed by six characters.

These characters can be either numbers (from 0 to 9) or letters (from A to F).

But these six characters aren’t random; they’re actually three pairs, each controlling the amount of red, green, or blue.

RGB: The Parent of HEX Values

The first pair of characters tell your computer how much red to use, the second pair is for green, and the third pair is for blue.

The values in each pair can range from ’00’ to ‘FF’.

You can think of “00” as having no paint, and “FF” as having a full bucket of paint.

So, if you see a hex value like “#FF0000”, it means a full bucket of red, no green, and no blue, which results in the color red.

The same logic applies to green (“#00FF00”) and blue (“#0000FF”).

Colour DisplayHex Value (RGB)Color Display
White#FFFFFF (All)White
Black#000000 (No Paint)Black
Red#FF0000 (Only Red)Red
Green#00FF00 (Only Green)Green
Blue#0000FF (Only Blue)Blue

Creating Your Unique Colors

Now, here’s where it gets fun!

By changing these pairs, you can create any color you want.

Color DisplayHex Value (RGB)Colour Display
Pink#FFC0CBPink
Cyan#00FFFFCyan
Orange#FFA500Orange

So next time you’re designing your digital art or creating a webpage, remember this guide.

And don’t worry, you don’t have to remember the HEX values.

Most no-code tools come with a visual drag-n-drop color picker (just like you would have seen in a Word doc while selecting font colors).

Understanding Hex Values
Color picker representing NoCode University’s brand purple.

Now you’ll know exactly what it means when someone asks for a “hex value”.

Put Digital Colors to Practice

Learn how to create stunning websites using a popular no-code tool called Carrd with our free Intro to No-Code Web Development course and put digital colors to practice!

Sahil Khosla Headshot