A Live Developer Journal

Hsl Color Palette Hack

Table of Contents

Introduction

Color palettes are essential tools when it comes to creating a strong brand identity across all of your assets. Colors can be used to convey meaning to your audience. A set of pre-defined colors also helps to reduce decision fatigue, which drastically speeds up the build process for both you and your team.

Throughout this article, you will learn how to generate a complete, semantic, accessible and flexible color palette from just a single brand color, using HSL color values. A huge benefit of using HSL instead of Hex or RGB, is that you can easily create a whole range of shades for a single color, by adjusting a single lightness value.

At the end of this article, you will find a Color Palette Action Plan that asks you to assign each of the colors in your palette a specific set of use-cases, so that it's even easier for you to stay consistent and maintain a strong brand identity.

Skip to Action Plan

What Is A Color Palette?

A color palette in web design contains all of the colors that are used in a specific project, or over a series of projects if you are working from a brand-specific palette.

Color palettes are often referred to as color schemes, though there is a subtle difference in their meanings. A color scheme is more of a plan or a blueprint for the kind of colors you want to go for (usually for semantic or mood-related reasons), like planning to use reds for warning messages and green for confirmation messages (Alex Clem, 2019 and Refactoring UI [Book]).

Whereas the color palette itself is more of a subset of the color scheme, which contains the actual color values you want to use from the range that your blueprint maps out. Kind of like how a database schema describes how data is organised in it's tables, whilst a database itself is a solid instance of that schema containing real values in it's table cells.

Why You Need A Color Palette For Web Design?

There are many reasons why you should use a color palette for your web design projects. Here is a quick list, then we'll go through each of them in more detail.

Accessibility

Designing for web accessibility means intentionally building an experience for all users, regardless of their visual, hearing, motor, or cognitive ability. Organizations like the World Wide Web Consortium (W3C) have created accessibility standards that anyone can follow to build a more inclusive web - Katie Riley, 2019.

An accessibible color palette makes your website more usable for everyone, but more importantly, for the 1.3 billion globaly who have some form of vision impairment. If you are lucky enough to not have some form of vision impairment, here is an example of a design trend that was happening in the twenty-tens.

Example of a website with medium gray text on a light gray background.
Figure 1: Low contrast text copy example by Katie Sherwin, 2015.

It's a bit of a nightmare to read, isn't it? Chances are, if you came across this website you would bounce, bounce, bounce away nursing a headache and a vendetta. This is what happens when you overlay a background color with another color of a similar tone. This is a common, usually less drastic mistake that happens when you want to make other elments on the page stand out more.

There are a number of ways to make sure your color palette is accessible (meets the 4.5.1 contrast ratio standard). Personally, I prefer using an inbuilt brower usability auditor tool like Firefox's Accessibility Inspector and Chrome's Lighthouse. They both provide detailed reports and allow me to catch any problems in the development environment before publishing.

Maintaining A Strong Brand Identity

Retaining a uniform or recognisable look across your branding increases recognition among customers after updates or changes happen... You implement this consistency through colour choices, image design, typeface, message branding, and how you deliver the advertising to consumers - Alan Smith, N/A.

Consistency is key for maintaining a strong brand identity across multiple web pages or even multiple web projects. Color is a great tool for helping you do this, because you can assign each color a specific use-case, which makes it easy for you audience to recognise the difference between interactive and non-interactive elements. If you do this, be sure to write down the rules somewhere so that you can easily refer to them when building out your projects.

A cv, ebook and quote page designed on canva, all with a strong sense of brand identity

Clear Semantics

Colors are a powerful tool for evoking emotions or conveying meaning (semantics). The meaning that someone takes away from a color can be influenced by lots of different factors, like their culture, prior associations (blue tends to be corporate, like Facebook and Twitter), or even just personal preference (Cameran Chapman, 2010).

It can be difficult to anticipate how your audience will react to the colors you choose. If you have chosen your brand color to evoke a specific feeling, it's worth testing it with a sample of your real audience to double check how they react to it.

Besides your brand color, you can follow a few universally accepted web conventions for conveying meaning, like using reds for warning messages, green for confirmation messages, yellow for warning messages and blue for information notices (Refactoring UI [Book]). By following these conventions, you already have most of your color scheme planned for you!

Reduce Decision Fatigue

Building a website takes a lot of effort. You have to make a lot of decisions at every step of the way. Picking a new color every time you make a new element is exhausting, and unecessary. A flexible set of colors with well-defined purposes will make your build process run far more smoothly.

A well-designed color palette is also a massive help when you have more than one developer working on the same web-project. Without a color palette, you could end up with fifty different color values for essentially one shade of gray. Let's not go there.

A strong branded color palette can also be repurposed for use across other business-related projects, like social media posts, ebooks and posters. This is a great help for helping all members of the team (sales, marketing, product, technical etc) create content that is immediately recognisable as belonging to the same company.

Tools like Canva (templates for social media posts, ebooks and more) even let you add a 'Brand Kit', including your logos and color palette to make this even easier.

canvas brand kit creator on premium subscription

How To Create A Color Palette From A Single Brand Color

Crafting a color palette from scratch is a huge skill. Many color theorists spend much of their career learning about the science of color and it's impact on psychology, perception, accessibility and user experience etc (Smashing Magazine, Color Theory article set). For this reason, it's actually pretty difficult to find an online color palette generator that accounts for even a tiny subset of these factors.

This is why I was rediculously happy to come across the book Refactoring UI by Adam Wathan and Steve Schoger. In this book, they break down how to drastically improve your User Interface design skills, by making tiny tweeks that have a massive impact. In one of the chapters, which they released for free here, they talk about three color groups to include in your color scheme and palette.

Step 1: Choose One Accessible Brand Color

Inspired by this process, I came up with a solution to help you create your own color palette. All you need is a single brand color. More specifically, you need a HSL value for your chosen brand color.

Before you convert your Hex or RGB value into a HSL value using this color converter, enter your color code into this Web Accessibility Contrast Checker. Set the foreground to white, and the background to your brand color. You will get a contrast ratio, and a rating for whether this color combination passes the accessibility standards for normal text, large text and user interface components. If it fails, adjust the lightness value scale until you get a pass mark. As soon as it passes, you have an accessible brand color.

Web accessibility color contrast checker

Step 2: Convert Your Brand Color to a HSL value

HSL stands for Hue, Saturation and Lightness.

If your interested in exactly how Hex and RGB color values are calculated, Andrew Braun, 2020 wrote an excellent article about it.

Why is it better to use HSL colors for your color palette?

Our color palette needs to be flexible enough to account for all possible use cases, so we need a variety of shades for each of our main color groups. Using HSL values, the only value we need to change to get a different shade is the Lightness value (how close to black or white our color is). If we wanted 100 shades (we don't, pls), it's easy to get 100 different shades just by adjusting the lightness percentage between 0% and 100%. It's much harder to do this using Hex and RGB color values.

The best part about only needing to adjust the lightness value of our Hsl code to get a new shade, is that instead of storing 10 shades of pink as individual values in our CSS color palette, we only need to store the hue for each of our colors. Then we only need one function to call any shade we can imagine for all of our colors!

Use this Color Converter tool to convert your brand color into a HSL value. If you're interested, you can find out the name of your chosen brand color by entering it's color value into this Name That Color tool.

A color converter that converts any color value into rgb, hex, hsl, hwb, cmyk and ncol color values

Step 2: Auto Generate Your Brand's Complimentary Color

A complimentary color for you brand is one that offers the strongest contrast when placed next to your primary brand color. On a color wheel, a complimentary color is one that is directly opposite the color on the other side of the wheel. Therefore, to choose a good complimentary color for your brand, all you need to do is find your color on the color wheel (or one that is close to it), then look for the color directly opposite it.

Or, you can use Canva's Color Wheel Tool which auto generates your complementary color based on your brand color. You can also generate other color combinations that work well together, based on the following combination types:

Create different color combinations from a single color using canvas color wheel tool

In my case, my primary brand color is a Razzmataz, which is a hot pink color.

The complimentary color for my brand color is called Jade (after making it darker with the Web Accessibility Contrast Checker tool. However, this shade was a bit close to my semantic green color for confirmation messages, so I ended up choosing a Tropical Rain Forest color instead, using the Triadic complimentary color wheel to help me choose a color that contrasts well with my brand color.

Step 3: Tweak Your Semantic Colors

We mentioned earlier that there are a few universally accepted web-conventions for conveying meaning, like using reds for warning messages, green for confirmation messages, yellow for warning messages and blue for information notices (Refactoring UI [Book]). We also need grays for things like text, backgrounds, panels and pretty much everything else on your site.

All you need to do to generate a shade palette for each of these colors is to find the HSL code for each of them, and then adjust the Lightness value in increments from 0% - 100% until you have all of the shades you want.

I personally like having 10 shade options for each of my colors. All you need to do is change the hue value to the color you want, and keep the rest of the values the same.

color palette

Feel free to tweak the hues for each of the semantic color palettes shown above. A slightly different hue can have a massive impact on the look and feel of your site. You can make the grays cooler by choosing a gray with more of a blue hint to it, or warmer by choosing a gray with more of a brown hint to it. Otherwise, feel free to use this palette, making sure to change the brand and accent colors to match your own brand.

Color Palette Action Plan

By this point, you should now have a complete color palette to work with for you web-design projects.

To get the most out of your color palette, assign each of the colors a specific use-case. Make sure to include the hue for each of your chosen colors too. Here are some of my examples:

TIP: To make it easier to assign use-case labels to each of your colors, you can look through this HTML elements reference and assign the appropriate elements to one of the colors in your color palette.

Next Steps challenge time

Your challenge for this article is simply to complete all the steps in both the article and the action plan.

If you completed the challenge, high five for taking action! Bonus points if you leave a comment with your color palette use-cases like the one I left above. It'll be a great source of inspiration for other developers too!