Change the colours in your Weebly theme

At Weebly.com it is a little bit tricky to change the colours if you don’t know CSS. The way I am showing you is not the best way to change colours inside a CSS code but it’s the easiest one if you are not familiar with CSS:

  1. Open your Firefox Browser and install the Rainbow Colour Tool: addons.mozilla.org/en-US/firefox/addon/14328/. If you don’t use Firefox please download and install it first.
  2. Go to www.weebly.com, log in, choose your website, open the Weebly Editor and click on the “Design” record to open the theme.
  3. Activate the Rainbow Colour Tool Rainbow Colour Tool and click on the design element you want to change, for example the background. The Rainbow Colour Tool shows you the hex code of the element in a pop-up.
  4. Click inside the pup-up and copy the hex code.
    Copy the Hex Code on Weebly with the Reinbow Colour Tool
  5. Click on “Edit HTML/CSS” inside the Design record and open the CSS record.
  6. Search for the hex code you copied seconds ago.
    Click CTRL+F or ⌘ F (Mac) to open the search window. You can also go to “Edit” > “Search”. Paste the copied hex code in the search box and search for the colour. The search function will detect all elements inside the CSS code that use the colour you want to change.Search for the hex code with Click CTRL+F or ⌘ F (Mac)
  7. Replace the colour of the search result with your colour.
    Pay attention when replacing a #FFFFFF or #000000 code. These are white and black respectively. You may not want to change all white and black elements on your website.The CSS code also contains the text colours. You can find them by searching for code elements such as a{…}, p{…}, h1{…}, h2{…}, h3{…}.
    a{…} means a link. p{…} means paragraph, h1{…} means header number 1, h2{…} header number 2 and h3{…} header number 3.There is an easy way to change the text colours on Weebly. You don’t need to change them now inside the code. We will do this later while I’m introducing you to the typography specials on the web.
  8. If you don’t find the hex code it means that the colour is not defined inside the CSS document. It’s probably defined inside an image. The images are in the “Files” record. To change the colour inside an image click on the “Files” record. Search for the image you want to change and click on the image inside the “Preview” section. The image will now open in a new window.change colours inside an image weebly
  9. Open the context menu of the image and save it to your desktop.Save image as jpg or gif on your desktop
  10. Go to www.pixlr.com/editor, upload your image and change the colours. Don’t change the size and the name of the image. It’s important to replace the original image of the Weebly theme exactly with your new image.
  11. Save it to your desktop and use the same file format as the original file.
    Design templates usually use images with the .gif or .jpg format. With the Pixlr Editor you cannot save an image as .gif.
    If your original image is a .gif you can convert your .png file to a .gif with http://tools.dynamicdrive.com/imageoptimizer. If your template uses images with the JPG format your can directly save it as a .jpg.edit your image with pixlr.com/editor
  12. Go back to www.weebly.com, navigate to the “Files” record and click on “Upload Files” to replace the image inside the template with your own image. The images you want to replace must use exactly the same name, size and format as the original image.Click on "Upload Files" to upload your image

It didn’t work?
Visit the Weebly Support Center

Related links

Link

1. Define your primary colour.

Find your colour!

Which adjective represents you, your products or your company best?

The product or service I offer is …
I’m …

  • Red: Attractive, comfortable, dynamic, fast, energetic, lovely, sexy, sporty, spicy, vibrant, warm
  • Blue: Confident, efficient, friendly, loyal, open, professional, reliable, sympathetic, wise
  • Green: New, natural, peaceful, young
  • Yellow: Fresh, fruity, inviting, sunny
  • Orange: Ambitious, delicious, energetic, healthy, juicy, tasty
  • Purple: Creative, glamorous, mysterious, outstanding, precious, trendy, royal, unique
  • Brown: Homely, natural, recycled, organic, stable, tasty, wholesome
  • White: Clean, cool, creative, pure, secure, trustworthy
  • Black: Elegant, expensive, intelligent, secret, serious, successful

Evoke associations

Which feeling do you want to evoke in people visiting your website?

I want to make my website visitors feel …

  • Red: Alarmed, attracted, challenged, comfortable, excited, important, loved, passionate, powerful
  • Blue: Airy, peaceful, reassured, tranquil
  • Green: Calm, restful, fortunate, free, generous, hopeful, liberated, lucky, relaxed
  • Yellow: Cheerful, enthusiastic, happy, joyous, optimistic
  • Orange: Festive, thankful, warm, welcome
  • Purple: Inspired, unique
  • Brown: Homelike, wholesome
  • White: Merry, reflective, secure
  • Black: Satisfied, smart, sophisticated

Define the colours

1. Define your primary colour

Find your colour!

Which adjective represents you, your products or your company best?

The product or service I offer is …
I’m …

Click on an adjective to find out more about the colour.
Don’t have Flash Player? See a text version.

Evoke associations

Which feeling do you want to evoke in people visiting your website?

I want to make my website visitors feel …

Click on an adjective to find out more about the colour.
Don’t have Flash Player? See a text version.

Take a choice

You now have one or two colours that could be your primary colour.
Choose the one that you like more. You can use the second colour later in addition to the primary colour, if they go well together.
Write down your primary colour as simple text.

2. Find the right hue

Now that you know your primary colour you have 2 possibilities to find the right hue of your colour:

  • Look around in nature for a hue of your primary colour (for example green) and take a picture of it, or surf around on the web and download an image with a hue you like. Than upload the image to www.colorexplorer.com or www.colourhunter.com.
    These tools will show you a colour pallet based on the picture you uploaded. Choose a hue of your primary colour.

 3. Copy the hex code

hex code #009900 Every colour is defined by a RGB value (000000–FFFFFF) such as #009900 called “hex code”. Copy and save the hex code of your primary colour’s hue. You will need this hex code later to create a harmonious colour palette.

4. Create a colour scheme

Insert the hex code of your primary colour into the colour scheme designer www.colorschemedesigner.com and play around with the colours by adjusting the schemes and hues for different models.
Play with your primary colour to create a harmonious colour scheme with maximum 4 additional colours or hues. You can always view a page sample where the colours are applied on a light and a dark page example.

5. Choose three main colours

Define 1-3 colours from the colour scheme you want to use for your website.
Save their hex code. The code looks like #6B9900.
This are now the three colours you will use on your website in addition to the neutral colours black and white. Don’t use more than these three colours.

6. Match the colours to your website elements

Important elements should use more contrast to emphasize and lead the reader’s eye through the page.
Use the “Colorblind” option on www.colorschemedesigner.com to find out which one of your colours has the highest contrast. Choose “Full colour-blindness” to see your colour scheme in a grey scale mode. The darkest colour on the grey scale mode is the one with the highest contrast.

color blindeness scheme
How to match the colours?

  • The page header uses the colour with the highest or second highest contrast. It depends here a bit on the model you chose. Maybe you want to use the colour with the highest contrast only as a highlighting colour for buttons.
  • The global navigation uses the colour with the second highest contrast after the page header. The active (selected) element on the navigation should use a darker or lighter shade of the colour to provide emphasis.
  • The utilities have to be visually weaker than the rest of the page and should use a lighter shade of the page header colour.
  • The scan columns use the colour with the third or fourth lowest contrast. They should be visually weaker than the page header and the navigation.
  • The content area uses a light background colour and black or dark grey as text colour.
  • The page name uses a colour with high contrast. This can be black or dark grey or you can reuse the colour of the page header.
  • The page footer uses a colour with low contrast similar to the content area.

Don’t invent more main colours! It’s very difficult to use more than three colours effectively. Work only with darker and lighter shades of your three main colours.

How to find darker and lighter shades of a colour?

  1. Go to www.colorexplorer.com
  2. Click on “Colour Picker” and create a new palette by adding the hex codes of your main colours with the Colour Picker.
  3. Click on “Add to palette”.
  4. Click on “Colour Matching” and select the colour you want to be the basic colour for the new shades.
  5. Choose the Colour Matching Algorithm “Single Hue” to display some darker and lighter shades of the selected colour.
  6. Copy the hex code of the shade you like.

7. Save the colour codes

Now that you have defined all your colours with their different shades, save their colour hex code. Every colour has a hex code which looks like #225928. You will need this hex code later to change the colours in your design template.
Write down the colour codes you chose for each element and save this document.
This will look like:

  • Page Header: #7f004f
  • Utilities: #801958
  • Global Navigation: #6a9900 and #476600 for the active element
  • Scan Columns: #aacc5b
  • Content Area #e9e9e9
  • Page Title: #7f004f
  • Page Footer: #e9e9e9
  • Boarders: #999999
  • Background: #FFFFFF

Related links

Contrast and brightness to use for the page elements

Colours create a visual hierarchy with their contrast and brightness. You can use them to lead the reader’s eye trough the page. Emphasize important elements on your website with a colour of higher contrast.

You can test the visual hierarchy by changing your layout in a grey scale image, after you have inserted the colours: The header usually uses the highest contrast, followed by the navigation, the scan columns, the content area and the page footer.

Colourful canvas with different contrast for header, navigtion, scan colomns and page footer

Grey scale canvas with the highest contrast for the header

How to create a grey scale image?

  1. Take a screenshot of your theme. For example with the Firefox Add-on Awesome Screenshot: https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/.
  2. Upload the screenshot to http://pixenate.com.
  3. Click on “show fun effects”.
  4. Choose the “Black & White / Sepia Tool”.
  5. Click on “Grayscale”.

Related links

Colour models

Mono

Single colour in various shades. Mono can give your website a clean and soothing look. Especially when you use blue or green hues.

Complement

Two contrasting colours directly opposite from each other on the colour wheel. With this model you can combine a warm with a cool colour. It creates a clear palette and the second colour works well as a highlight colour.

Triad

One primary colour and two colours that are placed identically on both sides of its complement. Triad allows you to combine three colours in a harmonious way.

Tetrad

Four colours made by a pair of colours and their complements. This model is often too much because it offers four colours with a double contrast.

Analogic

Three neighbouring colours on the colour wheel. This model creates a palette with colours that are closely related to each other. It looks elegant, but it’s often too harmonious because the contrast and difference between the colours is too subtle.

Accented analogic

Three neighbouring colours and in addition the complementary colour directly opposite from the primary colour. This creates an elegant colour palette and gives you a contrasting highlight colour.

Related links