How to Match Colors on Your Website

Tue19Apr2016

design · 2016 · 2016-04 · tips

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.

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.

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.

Ever wonder what that
red is in the Chrome logo?

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.

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.

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.

Matching colors on your Jimdo website

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.

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.

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.

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.

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.

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

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.