Tue

19

Apr

2016

How to Match Colors on Your Website

Blue. Light blue. Light blueish greenish. Sometimes the exact color you want is hard to describe, especially if you’re trying to match colors in your logo or brand. But instead of approximating colors on your website and hoping they’re “close enough,” there’s actually a much better, easier way to guarantee a good match. No squinting or guesswork required.

Better Color on your website
The trick it to familiarize yourself with color codes—once you do this, you can use Jimdo’s Style Editor to match colors like professional designers do.

 

In this post we’ll go over how to find and use RGB and hex codes, and how to use those exact colors throughout your Jimdo website. Before you know it, you’ll be matching your fonts, buttons, links, horizontal lines, and more, and creating a cohesive, professional-looking website.

 

What are color codes?

You may have already heard of Pantone colors, or seen paint chips with names like Autumn Mist or Flamingo’s Dream. On your website, we’re going to leave those behind and instead work with web colors, which are particularly suited to show up on a screen.
web color palette A color palette from Coolors.co

In the web world, each of the zillions of colors out there is represented by its code (or “value”), which computing programs can understand and then represent faithfully on a screen. So while a computer application won’t understand what you mean by “Whispering Peach,” it will know exactly how to create a lovely pink from a code like FF9899. Computers, right? Poetry is lost on them sometimes…

 

But this is actually great news because once you find the color code, you hold the key to replicating a color anywhere on your website (and in other graphics software too).

 

There are two kinds of web color codes that you should know about for our purposes today, RBG and Hex:

 

  • RGB Value | RGB Code: This will be three different numbers that specify the exact amount of red, green, and blue that make up a color. It will usually look something like RGB (26, 119, 127) or RGB: 26, 119, 127.
  • Hex Value | Hex Code: Your color's hex code will be a six digit alpha-numeric code, something like E82C0C. It will sometimes appear with a # sign in front of it like #1D413C.

 

You don't have to worry about why the codes are formatted this way or what their history is (though if you're interested, there's more information here)...at this point it's good to know that 1) they exist and 2) you're going to learn how to find them. To do that, the next step is to learn more about color pickers:

 

Color Pickers

Color pickers are perfect if you already have a particular color in mind that you'd like to replicate. Maybe it’s in your logo, or it’s a color you use in your branding or product packaging that you’d like to match on your website. Or maybe it’s a color you like from a photograph, or that you’ve been spying—er, admiring—on another website. There are lots of free tools out there that can help you locate the exact color code. Here are a few good options.

 

  • ColorZilla: This browser extension for Chrome and Firefox is a color picker that you can use on any website. It’s basically a way to look under the hood and see what colors are being used. Once you install it, select “Pick Color From Page” then drag your mouse over the part of the page you want to color match. A black bar will appear showing you that color’s RGB and Hex Code. It will even save the codes directly to your computer’s clipboard so you can remember them for later.

 

Colorzilla Ever wonder what that red is in the Chrome logo?
Colorzilla With a color picker, it’s easy to find out.

 

  • Adobe Color CC: Upload an image file (or your logo file) and this free site will generate a color palette to match. Move the circles over the exact part of the image you’d like to replicate. Color Code Picker is also another good option for this. Here I’ve uploaded a stock photo from Unsplash to the Adobe program to see if I can find the color of that beautiful green typewriter.

 

Adobe Color CC

 

Note: If you’re coming from the world of paper, ink, and printing, you might only know your Pantone/PMS colors. There are tools online that will convert these straight to RGB.

 

If you’ve uploaded a logo or graphic, you should be able to get a very precise color match. If you upload a photo, the colors are much more variable because of lighting and shadows, so it will really depend on where you click.
Each program is slightly different, but in general you’ll get a result with the color you want, listed with its RGB and hex codes. Copy these down because you’ll need them later on.

 

Get RGB and Hex Code Bingo! Now I have the RGB and hex codes for my typewriter.

 

Color Palettes and Inspiration

If you don’t have a particular color in mind already and aren’t sure where to start, take advantage of some of the free color inspiration tools out there, including:
  • COLOURlovers: Browse thousands of palettes created by fellow color enthusiasts, and copy ones that you like.
  • ColorHunt: They post a new palette every day.
  • Coolors: Sort of like a slot machine for colors (and just as addictive), this site will generate random palettes and let you refine them, or browse other people’s recommendations.
Again, once you find a color or two that you like, write down the RGB or hex codes somewhere safe.
 

How many colors do you need?

While many color tools will give you five, six, or even more colors as part of your “palette,” you really don’t need that many. In fact, the more colors you’re trying to balance, the harder your job will be. Resist the urge to use all these colors on your website!

 

A good place to start is to pick 1-2 accent colors to use throughout your site, in addition to good ol’ black, white, and grey. That will give your website a consistent, distinctive look throughout, without risking looking like a technicolor dreamcoat.

 

For example, see how these Jimdo websites have implemented striking colors schemes with only 1-2 colors.

 

Using pink on website blue and green on website

 

Matching colors on your Jimdo website

Got your colors? Great. Got your RGB and/or hex codes? Even better. Now you’re ready to go into the Jimdo Style Editor and start matching colors.

 

Let’s say I’ve uploaded the typewriter photo as my background. It looks nice, but now I want to start matching some of my text, headings, and other elements to that exact same green color.

 

Jimdo website before color change

 

Once you open the Style Editor, click on the part of your website you'd like to change. Here I’ll click on my Large Heading Element and start with that.

 

Jimdo Color Picker

 

Click on the color box in the top toolbar to open up the color menu. You’ll see that there are already 64 preset color options to choose from in the palette on the left. You could choose one of these, but of course you don’t need to anymore because you’ve found your own custom colors in the steps above. Instead, you’re going to focus on the color picker on the right side.

 

Now, type your hex value or RGB code into the box, outlined in red above. The Adobe program I used above told me that the green color I’m going for is RGB(101, 166, 145), so I fill that in here and click enter.

 

If you paste the hex code into the Style Editor, you'll see that the Jimdo system will automatically convert it to RGB values.

 

Once you've set that color, it will appear at the bottom-left of your color palette so that you can select it again and again for different parts of your website. Now you have it, an exact match.

 

Want to do this even faster?

If you want, you can repeat this process manually for different elements you’d like to change. Or, you can set a custom color to cascade through your entire website, without having to click element by element. Neat, right?

 

Change Website Color Scheme

 

To do this, open up the Style Editor again and and toggle the Style by Element switch to the “off” position. When you do this, you’ll see the option to the right to choose a Color Scheme for your entire website. Click on this color box, and set your custom color again like you did above. Press enter, and you’ll see this accent color now appears throughout the webpage—in your navigation bar, buttons, horizontal lines, and more.

 

Style by Template

 

Hint: If you decide to style your entire template at once like this, do it first, before you start styling individual elements. For more on how to use the Jimdo Style Editor, including a video, check out our Support Center.

 

The way the color is implemented throughout the website will vary depending on the template you’re using (here I’m using Barcelona). If you don’t like one of the universal changes (let’s say you don’t want your Button Elements to take on the accent color) just switch “Style by Element” back on, click on the Button Element, and change it back to whichever color you like.

 

Extra credit: secondary colors and opacity

Once I’ve changed the color scheme for my website, I can decide to change other parts too. Below, I’ve chosen another color code from the photograph—the color of the paper journal—and used the Style Editor to make that the color of my content area too. Then I used the slider to change the opacity slightly, (in other words, how see-through it is) so that the background image shows through just a little bit.

 

Change Opacity

 

Set final colors

 

Now I have a website with colors that complement my background photo, without any guessing involved.

 


Maggie

Maggie

Content Editor at Jimdo

 

Maggie joined the team to craft the voice of Jimdo for all products and marketing channels. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she's not adding serial commas, you can find her camping with her husband, cooking, and reading New Scientist.