How To Use Color On Your Website



  • The color you need to use the most on your site is the Base Color. The Accent, instead, is a vivid tone that gives personality to your blog or website. For this reason, it's essential to use it less and on very small parts of your site, like buttons and icons.
  • The most effective website color scheme follows the 60-30-10 ratio. This rule means that the main hue is applied to 60% of the site while the secondary color is applied on the remaining 30%. The last 10% must be devoted to an accent color that heavily contrasts with the two predominant colors.

For example, the color red stands for confidence, yellow for fun, and green for peace. Use these colors effectively to set the tone of your website. If you use these guides and color codes the right way, you will be able to build a site that not only looks good but also converts well.

How To Choose A Color Scheme For Your Website

In today's article I'll cover how to choose a color scheme for your website. You may not know it but each color conveys a psychological meaning or feeling. So when you look at certain colors you automatically associated them with something in your subconscious. When building a website it's important to keep this in mind. Choosing the wrong color scheme may stir up thoughts or emotions that are contradictory to the message you're trying to convey while choosing the right color scheme can re-enforce your message. So let's dive right in and explore the meaning of some of the most common colors.

White.

White is not typically thought of as a color but it plays an important role in web design. You've obviously heard of 'white space' for example. Having plenty of white space on your website makes your content easier to read and by adding white space around things like the headline of your page you're drawing extra attention to it.

If you want the contents of your page to be read the best choice for a background color should be white. Benq e2200hd driver. Nothing is easier to read than black text on a white background.

From a psychological perspective white commonly conveys feelings of innocence and purity. Think for example about a white wedding dress. White is a clean color -- it breaks through the noise and the clutter of a page. White works well in e-commerce when compared to darker color because it's light, bright, friendly, and says 'I'm not going to scam you'.

How

Black.

How To Use Color On Your Website For Beginners

Black pretty much conveys the opposite of white. This means it's commonly associated with things that are dark or sinister. If you're considering selling something on your website I wouldn't recommend a black background. It will make people feel like perhaps they cant trust your website.

There is a time in a place for black however. Because black provides great contrast to things of color it's a terrific backdrop to show off photos, paintings, or other works of art. So if you have a website that's not necessarily focused on selling artwork directly from your website I would recommend a black background.

Red.

Red puts people on high alert. Mtv cribs download. It's typically associated with things like warnings. Red is such a vibrant color it can really grab people's attention. I like to use red to indicate there's a sale or something I want a site visitor to notice on a webpage. Red can also convey feelings of romance or love. So there are times where you may want to use red in your color scheme to connection with people in that capacity.

If you choose to do red you probably don't want to over do it. In summary it makes a nice accent color and is a real attention grabber but make create uneasy feelings if over-used.

Blue.

Blue is a great color for webpages. Blue is typically associated with trust and loyalty. Blue can also represent things that are cool or cold. If you scour the web you'll find a lot of websites that have color combinations of white and light blue. This is a very pleasing color scheme for people to view and is easy for people to feel comfortable with.

Different shades of blue can convey different messages. Darker blues are more authoritative for example while lighter blues are softer.

Blue text is usually an indication something links to another page. So keep that in mind when choosing whether to make your text blue. You don't want to confuse people by making your text the same default blue the browser uses to indicate a hyperlink.

Green.

Green conveys thoughts and feelings that have to do with health and/or the environment. Croc game mac. Think about the way you see green used with packaging in the grocery store. Many time it's used for products that claim to be reduced calorie or low fat.

Green also represents the environment. Trees, plants, and grass are all shades of green so it makes sense we'd think about the outdoors when we think of green.

Green is a cool color and so it's a good counter balance to warm colors like red, orange, or yellow.

Yellow.

Yellow is one of my least favorite colors for the web. If you use yellow text it will be difficult to read regardless of the background color you choose. So avoid using yellow text for any reason. You can use yellow to highlight text on a white background.

Yellow is a bright and cheery color -- and conveys positive feelings. It's also one of the three primary colors so when used in conjunction with red and blue (the other two primary colors) it can convey a fun and simple message. That's why primary color schemes are so popular with toys.

Brown.

Brown is an earth tone. Similar to green it can convey environment or organic. Brown is considered a warm color so it's counter balances would be blues and greens. On the web brown can be a nice, warm alternative to black for a background. It's a utilitarian color and isn't considered to be pretty by most.

I could spend more time digging into every color of the rainbow but now that you're thinking about the meaning of colors I'm sure you're well equipped to choose a color scheme for your website. If you get stuck just think about how colors are used in marketing all around you in everyday life. There you should find plenty of inspiration.

Published by Incomedia in Web design ยท 5 December 2018
Do you ever pay attention to colors when creating a website?
You should. Using the right colors on your site is essential to attract the right audience, keep readers interested and encourage them to come back. Here's why: colors affect feelings and have a unique persuasive strength.

How To Change Color On Your Website


If you're looking for a fast way to use on your website project today, then you'll find very helpful tips in this practical guide to making the best website layout with the color scheme that's right for your target audience. And using the Force of Colors infographic you're gonna be a Jedi web designer too!
How To Use Color On Your Website
No Color Theory here, but tips on how to put it into practice based on what we learned in creating WebSite X5 templates.
In this post you'll find how to choose a color palette which fits your project and learn to apply a cohesive color scheme on any kind of website. You'll learn how to increase conversions up to 24% more by choosing the right color. Whether you want to start your own blog or an online store, publish a site about yourself or your company, colors will no longer have secrets.

Force of Color facts and why to choose the right colors

Colors affect a bunch of elements on a website: background, menu, buttons, titles, text, links and images. Colors make a web page readable, push sales and can have an impact on brand recognition at the very first scroll. For this reason, color is a powerful web design tool. Though, how powerful?


Getting to know the Force of Color is essential to Jedi web designers. So when you're designing your website, take into account the impact colors can have on users. Keep an eye on our Force of Colors infographic: when you're making your site, it will be a lot easier to focus on what matters for an effective layout.

What is a color scheme and how to use it on your site

A simple and effective way to create a color scheme is to choose 2 main colors with just the right amount of contrast and 1 or 2 text colors. Like this:
  • 1 Base Color
  • 1 Accent Color
  • 1 Text Color in white, black or grey
The color you need to use the most on your site is the Base Color. The Accent, instead, is a vivid tone that gives personality to your blog or website. For this reason, it's essential to use it less and on very small parts of your site, like buttons and icons.
And sure enough, if you think about Amazon, the orange 'Add to Cart ' button instantly comes to your mind. The same happens with the YouTube red Play button. Ever noticed?

How To Use Color On Your Website Using

4 galactic steps to generate the best palette for your site.


1. Choose the Base Color from the web galaxy (listen to the Force of Color)

To drive users to your site, ask yourself: 'Do I know what they like or dislike?'. When it comes to selecting the right Base Color, empathize with your potential target audience, learn their habits and foreseeable reactions. An old wise Jedi would say: 'Connect to the Force'.
First, find inspiration on the internet. Understanding the users' web galaxy means you need to surf it. You can use these 3 coordinates to find the way:
  • your website category: be inspired by the most visited sites for your niche. The color palette for an insurance company website is unlikely to be the same as the one for a kids' site, don't you think?
  • Your logo (if you already have one): use the established color as your Base, because a cohesive corporate identity helps users to remember your business or products. So look for those sites that use your graphic colors to get hints.
  • Your personality: imagine your site were a real person and search for the color that embodies what you stand for. Use stereotypes like the meaning of colors or the warm and cold colors differences.
The coordinates above seem a little conventional, but they can be useful for 3 reasons: they underline which colors users are most attracted to, which colors they are most accustomed to and how to be different.
Here's a tip: use these two free color-picking tools to choose the right color for your site. To identify web colors they both use the HEX code, a six-digit alphanumeric number preceded by #:
  • ColorZilla: this is an amazing Chrome and Firefox extension that lets you grab colors right from your browser; you can extract a single color or even an entire website color palette.
  • BrandColors: it has a full list of HEX colors that popular brands have on their site. From Amazon to Apple and Coca Cola.
So now that you've got plenty of ideas, let's take the next galactic step: choose the Base Color. Honestly, it's really simple and you don't have to use Photoshop or any other image editing software.
All you need to do is to open the Google search bar and type the word 'Color Picker' or the HEX code, that you got using BrandColors or ColorZilla. You'll see the color information for your pick right there on your screen.

Use your mouse to control the target and experiment until you find the most effective color value for your website. Google provides information about any colors. For example you'll find the RGB values, used by some website builder (including WebSite X5) to specify colors.

2. Combine the Accent color with your Base in less than 5 minutes

Here's how to find the Accent color in less than 5 minutes with an easy-to-use and complete color palette generator. Not sure it's possible? From Jedi to Jedi: 'That is why you fail '.
  • Go to Paletton and type your base color HEX code in the box A ;
  • Select 'Add Complementary' B to get the opposite value to the dominant. You don't like it for your palette, uh? Then move on.
  • Click the icon 'Adjacent ' C to get a similar color to the Base.
  • Or, click the 'Triad' D icon for a more contrasted value.
  • Then, choose 'Alternative with Text' from the 'Preview' menu E and you'll get the white, black and grey tones for your text according to the Base and Accent colors.

You know what? The color scheme for your site is ready! In less than 5 minutes.


From the 'Example ' Foption you can test the look of your palette on a sample web page. Click to start the option and see a standard website layout in the color scheme generated right on your screen. There is no doubt that Paletton is a color scheme generator with lots of useful features for web designer newbies.
For a quicker way to get a pleasing color combination for your site, try the tools on the following list.

How Should You Use Color On Your Website

If you're looking for ready-to-use color palettes, keep an eye on these websites:
Want to make a color scheme out of an image?
In Julie Gibbons' article on how to choose a color palette for your blog you'll find a beautiful gallery of color palettes inspired by images in different moods. Follow her tips to learn how to use these tools at their very best.
If you have a personal website or blog about a hobby, this tool is for you:

because it generates palettes inspired by places, seasons or a specific topic.
For example, you can color up your travel blog with the colors that remind you of the places you love. Winter sports fan can instantly make color scheme inspired by snow-clad landscape. WOW!
Are you getting into the whole color palette thing? Then it's time for a new galaxy. Find more about the art of color coordination in Color Theory from the Kissmetrics infographics.

3. Apply a color scheme to your site<

'Do. Or do not. There's no try. ' Get inspired by the most famous Jedi quote and let's go on a mission. Suppose you have to create a music website for a friend or a client. What colors will you choose?
To find the right color palette, go out on the web for inspiration and then choose:

How To Use Color On Your Website Step By Step

Step
  • What feeling you want to convey to your audience
  • What you want to say about the subject
Look at the 2 sample sites from the 3sounds template:
a website of a classic summer music festivalset in warm colors whose harmony relies on the use of similar Base and Accent colors (the contrast is based on the 'Adjacent '); colors recall a sunny summer day and the wooden classical instruments which are the main subject of this website.

a website of a DJ
set in bright and vivid colors that perfectly contrast with the white Base Color (contrast from the 'Triad '); energy and rhythm coming from the striking contrast reminds of the electronic music played by the DJ.

Did you notice that the color design of the page is virtually identical on both sites? That's because it follows the color scheme hierarchy. We applied the Base Color to the whole background, while the Accent (well, we used more than one Accent Color) was limited to buttons and the text we wanted to stand out.
Yet, the 2 projects are different. Why? Because each color palette stands for a different mood: one is classic and the other is contemporary.
The 'right' color palette talks about youtalks to your audience.
The right color combination is a matter of balance. The meaning of colors guides and the psychology behind them are helpful tools to guide you when building your website personality. But, in practice, the best way is to find concrete connections between colors and your website subject (seasons, sun, materials).
Just as Gregory Ciotti wrote in a compelling article about colors ' The key is to look for practical ways to make decisions about color. '

The don'ts of choosing buttons and text colors

When it comes to color and web design, it's easy to make wrong decisions.
  • use too many colors
  • use complementary colors for text and background
  • use too many warm or cold colors
We recently made a big mistake too. But to turn you into a Jedi web designer, we'll share with you what we learned.
You can see that getting users to try our product is essential to our website strategy. When we launched the version 13 ofWebSite X5, we decided to apply the Base Color (blue) on the 'Download Free ' button too.
So we decided to test using green and red button options.
The results? The red color increased the click rate by 24%. It was (by far) the best outcome.


Yes, red works fine, and this is confirmed by online research, but the point is that both colors (red and green) highly increased the conversion rate.
How come?
'The less a color is used, the more likely it is to stand out '.
Red and green have a 'stark contrast ' to the blue Base Color. It's hard not to notice. And you know full well that it's pretty easy to get lost in the web galaxy!

Conclusions

So, you've seen how easy it is to use many color palette generators and how they make creating a website color scheme incredibly simple. In fact, when it comes to color design the hardest thing is to find the right balance that fits best for the site.
Follow our Jedi guide to color web design for your next project and it will be easy to use colors
at the right time
for the right purpose.
(May the Force of Colors be with you)