Hsl Color Palette Hack
Table of Contents
- What is a color palette?
- Why you need a color palette for web design
- How to create a color palette from a single brand color
- Color Palette action plan
- Next Steps
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.
- Maintaining a strong brand identity
- Clear semantics
- Reduce decision fatigue
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.
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.
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.
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.
- Primary colors: Your brand colors, at most one or two which are used for primary actions or emphasizing navigation elements.
- Greys: 8-10 shades ranging from dark to light, which you use for text, backgrounds, panels and pretty much everything on your site. If you look on the Home Page of The Essentialist Dev, you will see that I use a very light gray as the background for all of my article card images, so they stand out a little from the white background, and look consistent.
- Accent colors: These are semantic colors, which are used to communicate some kind of message to the user. Like teal for highlighting a new feature, reds for destructive actions, yellow for warning messages and greens to highlight positive information like confirmation messages.
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.
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.
- Hue: accepts a value between 0 and 360, where each color is a degree on a 360° color wheel. 0° is red, 120° is green and 240° is blue.
- Saturation: accepts a value between 0% (fully gray), and 100% (no gray at all).
- Lightness: accepts a value between 0% (fully black) and 100% (fully white).
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.
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:
- Complementary: Two colors that are on opposite sides of the color wheel, which provides a high contrast and high impact color combination.
- Monochromatic:Three shades, tones and tints of a single color, which provides more of a subtle combination that helps you create harmonious design looks.
- Analogous: Three colors that are side-by-side on the color wheel. This combination can be a little overwhelming though as the shades are all too similar.
- Triadic: Three colors that are evenly spaced on the color wheel. Also provides a high contrast color scheme, but not as strongly as the complimentary color combination. This is a great way to choose a different complimentary color if the one you have clashes with one of your other semantic color groups.
- Tetradic: Four colors that are spaced evenly on the color wheel. Can be difficult to balance and can be overwhelming in practice unless one color is dominant and the rest are used as accents.
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.
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:
- Brand (338): The progress bar at the top of my site, dominant color in my logo, main action buttons (like 'read' article buttons), bold article text.
- Accent (118): Minor action buttons like 'follow' on Twitter, link text, and label colors for things like categories and author names
- Grays (0): Darker gray for titles and a slightly lighter gray for body text. Very light gray backgrounds in each of the article card images to tie them together and also to contrast against the white background and drop shadows.
- Yellows (45): Warning text, don't really need this right now for the blog.
- Reds (0): Note - The hue is the same for reds and greens, but the saturation values are different. Destructive action text, others can't really delete stuff on my blog right now so not needed.
- Greens (120): Confirmation messages, like ebook download success messages.
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.
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!