Building with Web Colors: Codes, Tools, and Design Tips

Color theory is a vast subject that mostly requires application to understand. But color selection is also relative to the medium, where a digital designer looks at colors differently than an illustrator or a painter.

In this post, I’d like to talk about web colors and how color selection applies to web design. Most designers already know the basics so I want to delve a bit deeper into these fundamentals.

I’ve also gathered a handful of free resources you can use to help select the best colors for each web project.

UNLIMITED DOWNLOADS: 50+ Million Add-Ons & Design Assets

Designing Layouts with Color

When first learning design it helps to understand some basics of color theory to help pick colors with purpose. However, your eye is just as valid and often senses when something looks wrong, even if you can’t explain why.

This is the reason many designers jump head-first into layout design and learn as they go. Most things need to be experienced to fully understand why they work. So if you have the drive and patience to keep practicing then I promise you’ll slowly digest color selection techniques.

When talking about web colors there’s a concept known as web-safe colors. These are more of a relic from the past when monitors were not even 16-bit displays.

So are web-safe colors still necessary? According to many designers and this SitePoint article, absolutely not. But it’s nice to know why web-safe colors existed and how they’ve affected web color selection.

Also just because you can use any number of colors doesn’t mean that you should. The best layouts rely on a core group of colors and reuse them appropriately.

Remember to trust your eye and your gut. If something feels like it looks wrong, it probably does look wrong. And the best way to learn why is to play around changing things until something looks right.

Match from Existing Websites

If you have trouble designing from scratch, you can always look at other sites for color ideas. Find a website with a palette you like and tweak it to fit your own project.

Most designers learn by studying others, but you have to be mindful of the process. Ask questions to figure out why a set of colors looks good, and why some colors may seem more dominant than others.

If you’re looking for a specific color set try searching inspiration galleries that let you sort by color. A couple of popular choices are Design Shack and Webdesign Inspiration both of which sort content by color.

Color on the web pertains directly to interface design and thus requires a careful distinction when building a new design.

If you’re unsure of where to start then place some trust in the work of other designers. Learn from existing layouts and keep asking questions to improve your color selection skills.

Related: Beautifully Colorful Websites

Color Profile Management

A hot topic relevant to web colors is the choice of color profiles. Each monitor can be calibrated to a specific color profile and can display certain colors differently based on relationships to other colors.

This is undoubtedly a very confusing subject and many designers aren’t sure which color profile to use. sRGB is often recommended but not a necessity, nor the absolute best choice for every project.

If you have time skim through this GD Exchange post which details many aspects of color profiles for digital design.

Ultimately each monitor will calibrate differently so you never can match colors perfectly. The same goes for photos like JPEG and PNG images which can be saved using different color profiles, yet lose these profiles when published on the web.

As evidenced by this Designer News poll, many designers simply don’t concern themselves with color profiles locally. This is probably the best approach because in truth you’ll never be able to control all your end user’s color profile settings.

But if you have time read up on the subject and try to understand how color profiles can affect website color schemes.

CSS Preprocessing Tricks

Sass and Less can both run color functions dynamically if you learn how to use them. Most developers have moved over to one of these preprocessors, but designers may still not understand their purpose.

Whether you already know Sass/Less or don’t know anything at all, there’s a benefit to working with colors in preprocessed CSS.

The subject of CSS alone is rather detailed, let alone a CSS preprocessor. But please check out this Sass guide to learn the fundamentals along with Jackie Balzer’s Visual Guide to Sass color.

Free Online Color Tools

Some of the best tools are free and these resources prove it. Designers looking for handy color selection tools need to look no further than the following links.

Paletton

Most designers fall in love with Paletton after first use. It’s a free web app that crafts dynamic color schemes based on the initial color of your choice.

You can choose between various types of schemes like triads, tetrads, and more. The whole thing is very easy to use and it’s the single best color generator for anyone designing on the web.

TinEye Color Extract

The TinEye reverse search engine has grown in popularity and spurred a similar app called TinEye Color Extract. Just link to an image or upload something from your computer to extract all colors from the picture into segments. This allows you to design a color scheme based on any graphic, whether an HDR photo or a website screenshot.

Colour Lovers

The Colour Lovers website has been online for a while cataloging a handful of user-selected color schemes. These include flat colors and patterns, both of which are free to download and use for any project.

Material UI Colors

Google’s material design has become a popular choice for many designers. The rules for material design are concise and straightforward enough to be applied to any interface.

When it comes to color selection, material design follows a style similar to that of flat design. Thankfully many web applications like Material UI Colors and Material Palette are freely available online.

If you’re inclined to work with Google’s material color palette, I highly recommend checking out both applications to see if they can help. Additionally, the 0to255 web app can help you select colors within a range of brightness and saturation.

Wrap-Up

Color on the web is mostly straightforward and shouldn’t require more than a couple of weeks to understand the basics. As you dig further into color theory, you’ll learn a lot more complexities of the field and hopefully apply your knowledge to future project work.

But the simplest way to understand web color is through practice, repetition, and consistently trusting your eye.

For further reading here are some related posts about color in design: