A Word About Website Colors, And Some Useful Tools

Colors are one of the most important aspects of a Website’s visual appeal.

Let’s try to summarize the essence of colors in Webdesign, in this short post, and identify some useful tools.

The most important rule of all is, don’t start a webdesign process without having a color palette ready. :art:. It is impossible to go through the whole process now on how to choose the right colors, but who says we cannot cheat a little. :slight_smile:

Go to this site, open an account and start playing: https://coolors.co/

When you get your five colors, try to see them on a color wheel (Select custom mode here: https://color.adobe.com/). An ideal situation is if you have at least one third of the color wheel clean (without any color selected). The reason is simple: you’ll find your CTA color there, because it needs to stand out, looking different than anything else.

Tip: if you are just choosing your brand colors, pay attention to CMYK palette. If your colors are from RGB color space, you can get in trouble once you start printing your materials. Convert your palette to CMYK and see how it holds up. CMYK is smaller than RGB color space, and many bright colors cannot be reproduced. It is better to adjust early, or leave the RGB version for the web and make a print strategy with a modified palette.

If you are building a color palette manually, try doing it in HSL mode. Keep an eye on Saturation and Lightness. If thees values are way out of sync across colors, it could be that the palette doesn’t look very pleasing. But it is not a rule.

A crazy way of building a palette is to choose totally unrelated colors in Photoshop, and then throw a Solid color Adjustment layer in a blending mode like Overlay, Soft light, or some other that may work to even them out. Creativity has no limits. :slight_smile:

Here is one more tool that I like a lot: http://colorizer.org/. Having it in a pinned tab in the browser while working on something color sensitive is a great time-saver.

If you need a fast Hex to RGB or any other conversion, probably the fastest way is simply pasting the Hex value into Google itself. Did you know that they have a nifty converter? :slight_smile:

Tip: have you seen a great-looking text on a colored background on some cool website? There is a chance that the text and the background share same Hue and Saturation, and only the lightness is changed to the point when it has good contrast ratio.

If you don’t want to learn about the physics of good contrast, why not cheat again. :wink: Just go here and check two colors against each other. http://contrastchecker.com/. Cool huh? To learn more, Google “Contrast ratio”. :slight_smile:

Another tool that can be useful sometimes: http://www.0to255.com/617B83. Just nicely ordered shades of any color you want.

Btw, do you ask your self sometimes questions like “I wonder what is the perfect color of gold?”. Then this tool is for you: https://alexbeals.com/projects/colorize/search.php?q=gold.

To get things to the next level, this is the right tool: https://color.adobe.com/.
It is not that easy to use it, though. Try not to simply hit one color and pick all the Compound ones for the palette. Actually, that can be done too, but the most important thing is knowing the right ratios.

For example, if you decide to build a complementary mood on the site, (Lord of The Rings, anyone? :eyes:), don’t try to use two complementary colors in the even-ish ratio, like 60:40 or so. For example, the famous Blue-Yellow movie thing is working only if the blue shades are dominant, with yellow accents.

Try to learn as much color theory as you can, (if you haven’t already), and that will change the look of your site(s) dramatically. And Google this too: “psychology of colors”. It is also an important part of the overall color puzzle. :slight_smile:

Final tip: Now install http://www.unclrd.com/ to your browser, and take a look at your website. It still needs to look great in B/W, with colors completely removed. Better yet, use this tool here and there throughout the whole process of building the site.

Happy coloring! :rainbow:

8 Likes

This is quite the comprehensive intro to color planning, Misho…thank-you, sir! I wasn’t familiar with Colorize. I wonder what data/info he’s using to pick those ‘perfect’ colors?

I’ve also seen a couple of your sites in the past that did a great job showing how to effectively use a color palette throughout the site. Maybe when you have a minute you could pick one or two of your favorites and share them?

Good to see you around these parts!

Thanks @kyle!

Haha, yes, Colorize is an interesting concept. It does a (Google?) image search, and takes the average color from approximately 25 search results. Perhaps not too useful, but funny nevertheless. It just gave me color #C0BDBA for Apex. :slight_smile:

Regarding the sharing, done. Sorry for hijacking a little bigger portion of the Showcase thread. :slight_smile:

Talking about colour and tools, I just found by accident that we can theme Google Chrome to use website colour making it look integrated.

Adding a meta name to header via functions.php in your child theme.

function x_add_google_chrome_colour() {
  ?>
  <meta name="theme-color" content="#113E6F">
  <?php
}

add_action( "wp_head", "x_add_google_chrome_colour" );
1 Like

Thanks for adding this @dshakya, it is a great hack. It is also for Firefox and Opera.

You can also add it for Windows phones:

<meta name="msapplication-navbutton-color" content="#113E6F">

And some additional goodies for iOS/Safari:

<!-- Run in full-screen mode -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Mobile status bar style -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Thanks @Misho for the additional code. Will add this in as well.

Interesting, so is that gray color a recommended accent color their algorithm suggests?

And no worries on the Showcase thread…that’s exactly what it’s there for. I’m looking forward to checking them out!

Yeah, it is completely useless in scenarios when such terms are used. But perhaps searches like “bakery”, “sky blue”, “gold”, “orange”, makes more sense. It is a hit and miss that sometimes is giving ideas. :slight_smile:

This is a fantastic post! Learned many things, @Misho, and admire the sites I’ve seen you share in the showcase thread.

You’re definitely a beacon of knowledge and I look forward to other tips you may have :thumbsup:

1 Like

Hi, I’m trying to add this to my child theme with a custom color, but it doesn’t seem to work; I’ve just edited functions.php, are there some additional steps that I should follow?

Hi @porretta_cinema,

I actually do it by adding it just before the closing tag in the header.php, copied into the Child Theme.
In Pro and X5, it is located in framework/views/header/base.php.

Is there any plan to add this to the config window?

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.