How to Use Saturated Colors In Your Local Government Website Design

Written by Collin Williamson

Leverage color like a pro to make your design pop without causing unintentional eye strain.

https://cdn2.hubspot.net/hubfs/158743/pretty%20website%20ebook.png
Free eBook: Why Local Governments Need More than a Pretty Website

Learn what features and support you need to succeed with your digital citizen engagement strategy.

Download Now

Color is a critical factor in the design of your website since it can help impact the way your users feel about your website. If you want your website to feel bright and happy, then it makes sense to use bright, saturated colors. Similarly, if you wish to make your website emit a more serious tone, then you may choose darker colors. These decisions are incredibly impactful since the selection of your colors impacts the level of comfort your website gives your citizens when they arrive and interact.

Saturated and Unsaturated Colors In Design

Colors are comprised of various values that can make them feel brighter or darker, depending on their saturation level. Highly saturated colors are often very bright and rich, while de-saturated colors often feel washed out or darker, depending on the value of the brightness. These colors can be essential in signifying actions on your website.

For example, it makes sense to highlight actions you would want someone to take on your website by making these actions stand out in a significant way. Think of the way that a stop sign you see on the road immediately catches your attention. Stop signs are designed to be noticeable due to their striking red color that stands out in a busy urban or rural environment. Its red color helps to draw your attention to its intended message, which is to stop.

Looking at the example below, which block of color can you keep your eye fixated on longer? Which colors feel more comfortable? Which colors feel uncomfortable?

Local_Gov_Website_Brightness_Saturation

Why You Should Avoid Bright, Saturated Colors In your Design

Unlike bright colors, you can use de-saturated colors to make elements on your website easier to read and view. De-saturated colors are best to use for large sections with text such as menus or navigation items.

Fully saturated and bright colors cause strain on the user’s eyes. While bright colors can draw people in,  they can also repel them from your website if you aren’t careful. It’s difficult and uncomfortable to view large sections of your website that are rich in both saturation and brightness. It’s best to use de-saturated colors on your website for large sections that utilize colors. This tactic will ensure that your text has a comfortable color contrast while providing a pleasant experience for your users.

Local_Gov_Web_Design_Saturated_Colors

In the example above, it's clear that the brightly saturated color draws more attention, but it also makes the text difficult to read and hard to look at for extended periods.

Local_Gov_Web_Design_Desaturated_Colors

In the example above, you can see how the saturated color is used strategically for buttons and interactions on the website. The text is much easier to read on a soft grey background color as well.

If this exploration of saturated colors has you inspired to redesign your local government website, click below to download our local government redesign toolkit. It offers everything you need for a successful redesign, including a budget, project timeline, and security considerations.

New Call-to-action