The right colours add timelessness to the website. The whole process of choosing the right colours can be compared to furnishing a living room, for example. Thanks to a design from an interior designer, you will get a space that is not only beautiful, harmonious, exactly to your liking, but also functional. Moreover, with well thought-out details, the interior will take into account the constant new “current” trends and protect your wallet from unnecessary draughts.
In this article, we’ll first show you why to deal with global colors, and where you can set them in Elementor. Then we’ll take a look at how to go about choosing colours for your site. I’ll also share some useful tricks to make sure you always hit the mark when choosing colours. 🙂
Why set global colours in Elementor
There is no need to look for any hook behind it. When you set global colours, creating pages will be easier and much faster. You don’t have to remember or keep copying colour codes. Simply save them on the web so you can use them where you need them (headings, icons, section backgrounds…)
If you get tired of a colour after a while, just change it in the settings. The global colour adjustment will be reflected throughout the site. You don’t have to search everywhere and on what pages you used the original colour.
In the article 6 tips to make your work with Elementor faster, you will find additional recommendations to avoid wasting valuable time and be more efficient when creating your website.
How to set global colours in Elementor
Log in to the site administration, select a page and click on “Edit with Elementor”. Then in the top left corner, click on
“Hamburger”
(3 straight lines below each other),
“Page Settings”
a
“Global Colors”
.
You will see
“System colours”
a
“Custom colours”
, which you can add when you click
“+ Add Color”
.
When to use System Colours and when to use Custom Colours?
System colours
If you’re creating a website that makes do with one color for headings (H1) and subheadings (H2-H6), another color for text, and a final color for buttons and text with an embedded link (e.g. a link to an article or page), System Colors is perfect for you. You don’t have to deal with Custom Colors at all.
Just set the colors for:
- Main element – Title, Icon, Icon box,
- Secondary element – text in the Icon List or Counter,
- Text – element Text editor,
- Highlight – element Button or plain Text with an embedded line.
Custom colors
Use custom colours if you want to work with primary, neutral and extra colours to add more depth and texture to your site.
In order for Elementor to ignore System Colors and focus on Custom Colors, you need to disable the default colors. To do this, click on the
“Elementor”
,
“Settings”
and then under “General” check the option
“Disable default colors”
.
However, even if you go the Custom Colors route, choose a primary, secondary, text, button color and set them in System Colors. For some elements, Elementor will offer you System Colors, not Custom Colors, when you edit the style. This avoids a lengthy search for the right colour code.
How to choose colours for your website
Content is the most important thing on the web, and the right colours can support that. Quality content and great design make a working whole. They can’t do without each other!
If a visitor to your website is waiting for a colourful rochambo, they won’t even be able to read quality content. A wild colour combination may rather put off a potential client. And the reverse is also true. Not even a design-wise website can save you if the visitor doesn’t find utility or added value on it.
You can’t make a first impression the second time around.
1. Decide whether your website background will be light or dark
The transition between light and dark backgrounds can be challenging for the eye, as it must quickly adjust to a significant change. More natural are transitions of colours that are very close to each other, e.g. white – light blue or blue – dark blue. The contrast between the colours is not that high, so the eye handles them much better.
2. Choose two basic and one extra colour
The colour wheel will definitely help you choose the right colour for your website. When you divide the circle vertically into two halves, you will find warm colours(red, orange, yellow) on the left and cold colours(purple, blue, green) on the right. Although each color can have both a warm and a cool look. It depends on whether the mixture contains a higher proportion of yellow or blue.
By how we create colors, we know:
- primary colours – blue, yellow, red (not created by any combination of other colours),
- secondary colours – purple, green, orange (these are different combinations of primary colours),
- tertiary colours – a combination of primary and secondary colours.
To make your website look harmonious, choose 2-3 colours. Even Elementor knows that less is more. That’s why it offers web designers room in System Colors to set a maximum of three colors and one highlight color.
When choosing the appropriate colors, you can choose:
- Monochromatic colours – you create a colour palette by combining one colour (e.g. blue) and its shades (light blue, dark blue).
- Analogue colours – the palette used on the site consists of a combination of three colours that are next to each other on the colour wheel (e.g. blue, dark blue, purple or orange, terracotta-brick red, red). That way everything will fit in with everything else.
- Finally, select one extra-complementary colour to use on the buttons, or. link embedded in the text. These are colours that are exactly opposite each other on the colour circle (e.g. yellow – purple, orange – blue, red – green). Complementary colours provide high contrast, so you won’t miss the orange button on a site that’s tuned to blue.
3. Match the base colours with neutral colours
Neutral colours can be divided into cold and warm. Cool neutral colours are white, grey and black. These colours are achromatic. This means that they no longer contain any other colours.
Warm neutrals are created by mixing warm chromatic colours (yellow, red) into cold neutrals (white, grey, black). This creates nice warm colour tones such as flesh, beige, brown.
The advantage of neutral colours is that they combine well with other colours. If you want to differentiate some part of the site from a white or dark background and you’re worried that using the base colour you’ve chosen for the site won’t do the job, reach for a neutral colour.
Useful tips to make sure your colour choice doesn’t go over your head
Warm, cool, vibrant, matte, light, dark colours, hue, tone, contrast… Are you in chaos? No matter, there are tweaks that will lead you from the vicious circle to the colorful one. 🙂
Adobe colour
Adobe color is a handy app that lets you create beautiful colour palettes. To make sure you don’t get lost in it right from the start, choose a photo that you like the colour of. Then upload the image to the app – select the option
“Create” – “Extract theme”
. The app pulls colors (including their code) from the photo that you can use on the web as base colors.
Test how the colours will work in the text in combination with a light or dark background (don’t use pure black with code #000000, but a slightly lighter shade, e.g. #1B1B1D).
If you use the colour directly on the background, the text should not be pure white or grey. Rather, choose a lighter shade of the background colour. The transition between background and text will be smoother, more natural to the eye.
In addition to selecting base colours, Adobe colour helps you choose which colours you can apply to gradient backgrounds –
“Create” – “Extract gradient”
.
Another perfect place to get inspired is Pinterest. Just type in web design or colour palette design, for example. Keep your eyes open and let nature guide you, because it can do wonders. Her colour combinations work a treat. The pictures on Pinterest just prove it. 😉
Nicepage
Maybe you’re the type of person who responds to stimulus. You want to create a website for a client, but you can’t think of anything original. You wander around the internet until you come across a cool part (e.g. a section with a service offer) that gives you such a kick that the website starts to compose itself in your mind. Nicepage is perfect for sniffing.
Choosing the right colours is all about training. Fingers crossed, may it go well for you. 🙂
I create websites and graphics for women that match them. Thanks to this, they can authentically spread the message of their business and thus more easily get the right clients. I like it when the web breathes with the charisma and style of a woman. It has a clean and distinctive design that underlines her personal brand.
