SEO & HTML Color Design

An effective website color palette coupled with intentional design is more important for SEO and the quest for better search ranking and increased audience reach than is generally realized.

Color-use doesn't (yet, seem to, much) directly affect search rank, so it's easy to overlook the importance of color design in your SEO campaign. Even so, there have long been indications that effective and judicious use of color is important to sucessful Internet (and other) marketing. In recent years Google has placed increasing emphasis on factors other than link-backs, especially security (TLS), technical correctness (correctly validating HTML), and usability.

Website Colors and SEO

On the Internet today there exists (one, single-yet-uncountable) a plethora of website colorpicker tools, based on several different approaches to choosing a color pallette for your web site. Why so many?

It turns out that picking an effective color palette for a website can be a little tricky, and how color design affects SEO may be non-obvious or even counterintuitive.

Several aspects of color design can affect SEO performance, including:

• accessibility (can people see the colors?);
• usability (mapping color to function);
• consistency (interactions between layers of supporting templates can interfere with your design intent — is the mapping you chose between color and function uniform throughout the website?); and
• sapidity (inspiring the backlink algorithms in our mind, what the advertising industry sometimes  calls "curb appeal" — do the design elements and the gestalt user experience stimulate a pleasant emotional response?)

One, single-yet-uncountable, a plethora of color
Plethora is usually written as "a plethora of," and even though it is singular, it implies a plural. Because of this, plethora can take singular or plural verb depending on the context and the writer's disposition, being written as "a plethora of examples are" or "a plethora of examples is."
— An excellent Google (AI?) summary from the superlative Merriam-Webster discussion of the word, plethora, (this linguistic ambiguity of the phrase, "a plethora of" strikes me as possibly an early human grappling with the concept of a realatively modest type of infinity, a smaller infinity, as opposed to say, the infinity of fractions between each counting number)

SEO Color Design for Accessibility

A nontrivial portio of the population (perhaps as high as 8%) lives with some form of color blindness (there are at least a few different types).  Many other people are visually imparied from other conditions which affect vision in different ways. For many of these people, low-contrast ratio color choices make web sites that would otherwise be helpful.

Surveys indicate as many as 98% of web sites fail to provide basic accessiblity measures described in the Web Content Accessibility Guidelines 2.0 (WCAG). Minimum color contrast is only one of several features which can help make the web more user friendly to more people.

There are several contrast checkers available which can help you make sure that the color palette you've chosen for your next web design project has appropriate minimum contrast ratios. Here are a few of the better ones.

Colour Contrast Checker by Alex Clapperton

Contrast Checker by WebAIM (also a JSON API)

Color Contrast Accessibility Validator by a11y

Web Useabilty and SEO Color Design

The Google algorithm, in particular, seems to be increasingly sophisticated in recent years and likely already features at the very least a rudamentary sense of color contrast (particularly between text and background) as important in measures of the accessibility of a website. This is implied (along with other factors) in the phrase, "usability of pages" in the important Google manifesto, "How Search Algorithms Work." It's clear that Google is aware of usabilty factors and believes them to be important in determining the value of a web page.

In other words, inconsiderate, sloppy, or downright poor use of color may negatively affect a search ranking today — even if a more comprehensive picture of award-winning use of color in web design remains beyond the grasp of the algorithms.

A comprehensive algorithmic "understanding" of color use may forever remain elusive, partly because there might be no "right answer" for the best color choices. Cultural context and personal taste mean that there are many islands of good and even great answers, even though the algorighms can already identify a vast sea of counter-productive combinations.

Consistency of Mapping Color to Meaning for SEO Website Design

Modern HTML5 and CSS allow, and arguably even encourage, thinking and design in layers of abstraction which faciliate intentional use of color on a website.

Ideally, as a web designer, you select the colors that you wish to use together, and map each to a purpose — an incandescent purple you might (for convenience) name "grape" as an accent color, for example. Each color you select has a purpose, looks good with the other colors you've selected, and resonates with your company's theme color palette, perhaps.

But what happens in a couple years, when the colors you've selected seem stale, and you wish to move from a neon color palette to, say, a pastel color palette with thematically similar colors, a muted purple-dyed eggshell, instead of the irridescent purple that seemed fresh a few years ago? Again, ideally, you drop into your carefully crafted stylesheets, change a few lines of css, and drop the new file in place. You might need to update the css link in your HTML to update the file version (which can be done with a simple regex recipe) in order to get the change to take immediate effect, but the change is pretty painless, right?

Well, maybe. Modern websites are built from a series of layers, and sometimes those layers disagree about how colors map to function or meaning on a website. Templates like Bootstrap are considered to be "opinionated" in that (among other things) they provide direct support for mappings of color to meaning, such as "primary" and "secondary" colors, and where those colors are used in a template.

As you build up the layers of your web project, make sure that you retain a reasonable mapping between defined colors and function on the website, as well as an ability to change them with minimal edits to your CSS. (Avoid the !important CSS antipattern, and try to define colors at higher levels, rather than at the highly granular level of many individually styled HTML elements.

As you build up and modify the varous layers of your website design from templates, frameworks, and boilerplate HTML, be sure to test along the way for unexpected interactions between framework and template layers. One good trick is to pick a set of really ugly colors to develop with, and as you work, periodically test changing to a nicer set of colors, or the production colors if you know what they'll be. The changes to your CSS should be modest. If you find the need to specify the colors of many elements, directly, it could be a sign that a little template refactoring with an eye toward simplicity of color mangement is in order.

Sapidity for SEO — Inspire the Link-back Algorithms in Our Minds

It's no secret that among the many things that affect the placement or ranking of a website in search engine results, links from other highly ranked, topically relavant websites back to your site are highly valuable. Organic backlinks are a strong signal to the search engine algorithms that your site is valued by the creators of other websites.

Backlinks in general are so effective that there's a massive spam backlink industry which floods the internet with low quality irrelevant links from botnet controlled websites known as "link farms" — often generated automatically by shell scripts or "content spinners" and hosted on the vulnerable personal computers of unsuspecting home users.

Google and Microsoft (Bing) continue to improve their search engines, and each year get better at sorting the wheat of organic linkbacks from the chaff of link farms and botnets.

If your website is not only accessible and usable, but also attractive and stylish, it's more likely that you'll inspire your readers and user community to create authentic, sincere, and topically releveant links from their websites and blogs, back to your site.

The algorithsms in our minds are in a constant feedback loop with SEO efforts. Inspire your readers to link to your site with design choices that are pleasant and interesting, not only by making the design fluid, mobile-friendly, easy to use, and consistent.

Sapidity brings organic link-backs to your site, for the SEO win!

Color Theory for Web Designers and SEO

In the Mad Men days many sucessful advertising and media designers began their careers after first attending college where they studied subjects like art and at some point, usually, color theory. Nowadays the demand for web designers is so high and the craft so highly technical that many practitioners come from programming backgrounds. They're often attracted to web design due to their own solid instinctive design aesthetic, but often have no formal study in art. Other web designers are small business people, and web designer is one of many hats they wear in a month.

If you're a small business owner maintaining your own website, or a web designer or SEO consultant who comes from the programming side of the house rather than the media arts side, what can you do?

Study up on color theory!

A great starting point is the short series of videos by The Futur Academy on the fundamentals of color in web design.

Fortunately there are a great many resources we can use to give ourelves a remedial education in color theory.

It's pretty fun, and once you learn a little bit about it, you'll find the various color picker tools below to be more helpful.

After a while, the concepts from color theory will become second-nature.

"The main focus for me has always been the strength of the concept, the visuals and language. I don't consciously think about color theory anymore while I'm working a design project. It becomes a reflex after a while."
— Roman Kuczer (advertising executive, mostly retired, more charming than the Don Draper "Mad Men" character) Missoula, Montana  

HTML Color Selection Tools

HTML color pickers have been around almost as long as the web browser itself, and many of the early color pickers are still around. Despite there being hundreds of color pickers online, every now and then somebody comes up with a new, interesting tool for helping people find great color combinations for web design.

Here's one of the best examples, from each of several diffent types of HTML color pickers.

Color Wheel Color Picker (with a primer!)

The first color picker to check out is the Color Wheel by Canva. It's a nice basic color wheel picker, which also lets you input an HTML Hex Color. This color picker is nicly designed, performant, and includes a lovely touch — a header background gradient adapts to the color you pick, giving you a nice broad view of the color in-situ as it might exist as an accent color on your web site.

Canva don't stop there.  Be sure to scroll down a bit to see the excellent primer on color theory and the different types of color combinations: complementary, monochromatic, analogous, triadic, and tetradic. A few other color pickers offer color combinations generated by these heuristics, but nobody else gives as nice an explanation, complete with visual aids.

We also learn that we have Isaac Newton to thank for the concept of the color wheel, whch he invented in 1666 CE.

Algorithmic AI Assisted Color Selection: Colormind.io

The best attempt I've seen so far at algorighmic generation of color palettes, the Colormind.io web app will let you cycle through colors at the click of a button, but has a few other nifty tricks up its sleeve. You can pin a color to the middle of the group, or complementary colors at both ends of the group, and then generate related colors in the slots you haven't pinned. It has options for different types of color palettes, including one for the Bootstrap HTML template system.

Another fun thing about Colormind.io is the modern, clean, minimalistic web design of the site itself. You'll notice that most web color picker sites have terrible site designs, many of which are not only dated (not mobile friendly) but also lacking in any evidence of design sensibility. They just sit there collecting clicks, showing ads (or not), and demonstrating that the web tailor's children are running around in rags.

Traditional Point-and-Shoot

If you just need a quick and dirty tool to help you find a basic "web safe" color palette, you can't go wrong with HTML Color Picker from W3 Schools.

Random Color Pickers

If you're seeking pure inspiration a random color picker might be your muse. One of the best is from COLORRRS.

Color Calculator

If you find a random color you like, you can use a color calculator to find the harmonics on the color wheel. This Color Calculator by Sessions College for Professional Design lets you pick from one of six harmonic styles, including: complementary, monochromatic, analogous, split complementary, triadic, and tetradic.

Color Conversion (Mapping Between Color Namespaces)

If you're working on a native-stack mobile app for Andriod in Java or iOS in Swift, a cross-platform app in Xamarin, Flutter, or React Native, or  or maybe a dynamic browser-based web application, you might need to match your color palette with one previously selelcted by your web design team. A nice tool for converting from an HTML Hex Color namespace to RGB, CYMK, HSB, or HSL namespaces is the Coolers Color Picker.

This color picker provides so much more than conversion between color namespaces, though. For any color you pick, it shows you gradients of related colors of various types, such as shades, tints, tones, hues, and temperatures.

Coolers Color Picker also shows you a variety of color harmonies for the color, including analogous harmonies, split complementary, tetradic, triadic, square, and just plain complementary.

One of the nicest features of the Coolers Color Picker helps you see by simulting how your selected color might look to people with various types of color blindness, with estimates for how much of the population might be affected by a poor color choice. There's also a contrast checker which shows the colors as text-on-background.

Encyclopedia of Colors

The delightful Encycolorpedia isn't exactly in a class by itself — many color pickers have some interesting metadata about colors — but it's so much better than the rest of the category that it might as well be.

If you find a color you like, drop the HTML Hex Color Number into this encyclopedia of color meta information about paint colors, web safe colors, and you'll get a wealth of information including related color palettes including monochromatic related colors, tones, tints and shades, and gradients to the complementary color or to black. (As of June 2021, this site has a bad self-generated SSL certificate, which might be why it doesn't show up in many search results related to HTML colors.)

Encycolorpedia is truly a treasure trove of color information and an inspirational tool for developing a website color palette.

Grape / #6f2da8 Hex Color Code

The color grape with hexadecimal color code #6f2da8 is a shade of blue-magenta. In the RGB color model #6f2da8 is comprised of 43.53% red, 17.65% green and 65.88% blue. In the HSL color space #6f2da8 has a hue of 272° (degrees), 58% saturation and 42% lightness. This color has an approximate wavelength of 565 nm.

Image Color Pickers

There are many color pickers which let you start with an image, and generate a color palette from that. I haven't found one of these that I love, yet. I'll keep looking.

Pantone Color Finder

If your website is a front end to a print service or other non-screen physical media you'll want to know about the Pantone Color Finder. Colors can be identified and mapped between the RGB, CMYK, and HTML Hex color namespaces. Naturally, once you've identified your desired color, say, PANTONE Medium Purple C, the site is designed to be a convenient index to Pantone color products of various kinds.

Adobe Color Picker

Folks who made it to the last item on the list are in for a treat. The Adobe Color Wheel is possibly the underrated gem of the color picker world.

The Adobe Color Picker provides a radio-button selector to instantly visualize color harmony by several different rules, including a double-split complementary, triad, monochromatic, analogous, square, compound, shades, and even a custom rule you can define.

Several of the most interesting color pickers on the web today suffer from stale or downright poor interface designs, poor performance, broken TLS/SSL implementations, and other issues, even when the concept is unique and technically well executed. Adobe's Color Picker sets a high bar, and makers of other color pickers should take note.

By contrast with much of the rest of the crowded field, theAdobe Color Wheel is a high quality, well designed color picker, and a delight to use as their web site is fluid and responsive.

Nicely done, Adobe.

SEOtipster TODO:

There are a few other specialty categories of color pickers, for things like map making and scientific data visualization. Once we get a little time to sort through those we'll add some new winners, here.