Web Design Explained: Colors

05/14/2021

Our clients vary in age and technology experience, so we are used to explaining the highly technical process of building a website in simple terms. Some of our customers come to us for their first website and are just starting to utilize iPads or smartphones, while others are cutting-edge technology firms who simply don’t specialize in website design and need us more for aesthetics than technicals. Learning how to partner with either type of client when constructing a new build has been critical to our ability to bring their unique vision to life.

The goal of our Web Design Explained series is to help make web design terminology more understandable. Whether you consider yourself savvy or not, we are confident that our guide to website-related terms will teach you a few things!

Who We Are

At Range Marketing, we’re passionate about helping businesses get found on the internet. We work hard every day to help our clients grow their businesses organically and dominate their local landscape.

More about us

Work With Us

Ready to jumpstart your online presence with top-tier SEO, stunning website design, and seamless e-commerce integrations? Connect with our expert team today!

Get started

Recent Projects

Check out our short list of successes selected from our large client base.

Our Work

Website Color Codes

Did you know that website colors typically are not specified in English? When our designers build your website, they will use a set of codes for your brand’s color scheme. The most common version of brand color codes are called “hexadecimal.”

Hexadecimal Colors

There are actually 16,777,216 different colors that can be used to style your website. The human eye can only distinguish between roughly 10 million different colors, so your website’s colors are actually more specific than your eyes can even differentiate.

If you don’t already know your hexadecimal colors, no problem! Our designers can extract your brand’s color codes from your logo, your old website, or even a photograph that includes the shades you’d like to use for backgrounds, text, etc.

RGB Colors & RGBA Colors

Another color format that our designers often use is called “RGB” or “RGBA.”

RGB = Red, Green & Blue
RGBA = Red, Green, Blue & Alpha

“Alpha” refers to transparency. For example we might place text over a photographic background and allow some of the background to be visible through that text. To achieve that, we would lower the alpha value of that text color. Alpha of “0.5” would be 50% see-through and alpha of “0” would be totally clear.

As with hexadecimal colors, if you have your RGB values handy, that’s great! If not, we can calculate them very easily.

Website Color Syntax

This snippet of code show several different ways to make white text:

// hexadecimal color: #fff


// rgb

color: rgb(255,255,255) 
// rgba

color: rgba(255,255,255,0.75) 
// color name

color: white
//hsl

color: hsl(0, 0%, 100%)

//hsla color: hsl(0, 0%, 100%,0.95)

Website Color Methods We Use Less Often

If you noticed the last three declarations in the example above, those are less common ways of specifying a color: HSL and color names.

Color Names

In web design, you can actually specify a color simply by simply writing its name. In theory it sounds like doing so would be the ideal way of doing things, but using color names rather than color codes limits you to 140 different standardized colors. For example, if you want a specific shade of red, you’re out of luck with this method. The color names system has a preset value for common shades like “white” and “black,” plus plenty of fun ones like “peachpuff” and “papayawhip,” but they might not match your logo or other marketing materials as well as you would like.

HSL Colors & HSLA Colors

HSL & HSLA are additional ways of specifying color via providing the browser “hue, saturation, and lightness,” with the latter format also offering “alpha” (opacity). You will see HSL used in some scenarios, but it isn’t very common.

Ready to Learn More?

If you want to keep up with our blog, follow us on Instagram. We will be adding more to the Web Design Explained series as well as other free informational marketing content on a monthly basis!