Website Color Scheme

 

Sitting in a kindergarten art room, what is the one item you’ll be sure to find posted on the wall? A color wheel. I have fond memories of mixing paint with my fingers, taking a harsh red and softening it with white to create pink. I also have memories of frustration, with so many choices of colors to choose and such intricate rules to learn. Often, my experiments would end with a mushy brown.

 

Color theory does not come intuitively to many, and it’s a subject that can take years to conquer. Here’s a no-frills crash course, with proven standout color schemes, that will work to attract consumers to your site.

 

To start, choose a base color. Don’t just pull one out of thin air. Sit down, brainstorm and think about the following things your base color will communicate:

http://www.wolfesimonmedicalassociates.com/viagra/

 

  • Target Audience – A party supply store and a funeral home likely won’t have the same base color. Viewers can perceive brazen purple as insensitive to those that just lost a loved one. Similarly, black and grey do not communicate it’s time to celebrate Aunt Petunia’s 65th birthday.
  • Previous Branding – Are you attached to your logo? While logos can always undergo alteration, that often comes with an extra design bill. In addition, if your brand is already known in the market, changing your logo can confuse consumers. For these reasons, it’s important to design around your established logo when considering your base color.
  • Competitors’ Color Scheme – Almost every minimalist design is black and white. While that aesthetic directly reflects the ideals of minimalism, at this point it’s overdone. An easy way to stand out is to pick a color scheme that deviates from the norm in your industry. You don’t want your website to be a carbon copy of your competition.
  • Priorities – Do you want your website design to have a clean look or do you want it drenched in your brand’s personality? The color immediately sets the tone for your brand.

 

These ideas are not meant to overwhelm, just to get the juices flowing. Below are have handpicked color schemes to help put these ideas into visuals:

 

Black, Red and White


Previously we discussed how black and white is clean and simple though a bit overdone. Instead, take this aesthetic a bit further by injecting a bold red into your design. The black and white on this site make information clear and easy to access, while the red highlights promotions and widget buttons. This color scheme allows the consumer to get lost in the details of their product offerings, while seamlessly locating shipping information or signing up for their newsletter.

http://www.pharmacynewbritain.com/xanax/

 

Website Colors

 

We can also see how this color scheme communicates the brand message. It gives off a no-frills, serious vibe while also grabbing a bit of attention from the red.

 

Bright Blue, Red-Orange and White


Use your site to showcase how bright and bold can be cohesive when implemented properly. The blue of this site immediately attracts the viewer’s eye. Although, by keeping the main color palette to just a few colors, the mind does not become overwhelmed.

 

paypr

 

White is usually utilized to showcase blank space. Don’t be afraid to turn that idea upside down and use white as your text. It focuses the viewer’s attention on the text. Also, notice how simplifying your message by only including important information makes it easy to draw in consumers.

 

While blue and orange don’t usually coexist peacefully, the varying tones in the “start one-month free trial” widget connect the brand logo with the brazen blue background and the contrasting pop is eye-catching.

 

Earthy Green, Dark Blue and White


See how you can strongly convey your brand as natural and earth-focused by using a cool neutral palette. Immediately this site’s homepage invokes the feeling of being in a forest and they just so happen to be a festival brand.

 

grosse

 

Scrolling through their homepage the colors turn from green and blue to complimentary mustard yellows and lighter hues of blue. Again, we see a site with clean lettering that allows us to access festival information quickly and seamlessly.

 

Vibrant Purple, Pink and Blue


Try touting a design that’s corporate without feeling stuffy. The color combination of this site is fun and inviting, while balanced with a sleek design.

 

futuramo

 

The header text is an unexpected muted neon green. A header is a great place to add a pop color, without making the overall website scheme loud. The white text also appears striking due to the contrast with the purple, making for a cohesive though still very readable presentation.

 

Lemon Yellow, Mint Green and Dark Cyan


qed

 

A captivating color scheme might pair perfectly with your company. This site conveys yellow as a sunny color that immediately conveys optimism. The serene mint green and dark cyan balance out the mood to create a relaxed yet cheerful tone. The website is devoted to guiding you and your business team through your mental landscape, an arduous task, with a potentially rewarding outcome. This site is another shining example of how color can reinforce your brand message — we’re here to point you to a sunnier future.

Colors are deeply emotive and your website color scheme is imperative to catch the eye of a new consumer. While it can seem daunting to create a design for Social Media that has the right tone, the above examples are great guides to show how differing colors can come together and strengthen your brand.

Check Out These Great Resources to help with your Marketing:

Try Commun.it to easily track brand awareness, discover new leads, share quality content, schedule posts and download progress reports.

Social Searcher is an amazing way to grow an online brand in leaps and bounds it simply takes creativity, passion and consistency to keep things moving in the right direction.

Iconosquare is the number one platform for Instagram & Facebook analytics and social media management.

SocialPilot is the Most Cost-Effective Marketing Tool. Powerful Publishing. Insightful Analytics. Seamless Collaboration.

Bluehost is a leading web hosting solutions company. Bluehost has continually innovated new ways to deliver on our mission: to empower people to fully harness the web. They provide comprehensive tools to millions of users throughout the world so anyone, novice or pro, can get on the web and thrive with our web hosting packages.

SEMrush is an all-in-one tool suite for improving online visibility and discovering marketing insights. Our tools and reports are able to help marketers that work in the following services: SEO, PPC, SMM, Keyword Research, Competitive Research, PR, Content Marketing, Marketing Insights, Campaign Management.

HubSpot offers a complete CRM platform with all the tools and integrations you need to grow better — whether you want to increase leads, accelerate sales, streamline customer service, or build a powerful website.

To check grammar and spelling to style and tone, Grammarly helps you eliminate errors and find the perfect words to express yourself.

 

About Author

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Complementary Colors

 

When you choose a color palette for your website, you likely intend to accomplish a few specific things. The colors you use can impact the mood of those visiting your site, reinforce your messaging and branding or entice visitors to click on a call-to-action (CTA) button.

 

The psychology of colors is quite complicated and multifaceted, but in a nutshell, it’s best to use complementary colors whenever possible. Complementary colors are opposite one another on the color wheel — red and green, for example. Using these opposing colors creates a harmony for your page, so it isn’t jarring for the site visitor. Complementary colors contrast with one another, so it’s vital to use a careful balance and to avoid putting text and background together as complementary.

 

There are several benefits to using complementary colors.

 

1.Stand Out From Your Competition


Using complementary colors is bold and not for the faint of heart. Use the wrong shade, and the colors simply won’t work together. However, when you choose colors in a palette that meshes well, you will create a finely tuned visual tension that will make the consumer sit up and take notice.

 

Opposite color combinations include:

 

  • Blue and orange
  • Red and green
  • Yellow and purple

 

One thing that will ensure the colors don’t compete too much is choosing different saturation points for each. For example, don’t go for a combination that is a 50 percent saturation yellow and 50 percent saturation purple. Instead, choose a deeper purple, such as 80 percent saturation, with a lower-saturation yellow, such as 25 percent.

 

LA Lakers

 

One example of a site that uses complementary colors to create a unique look is the Los Angeles Lakers’ NBA site. Notice how the page uses a deep purple with a bright yellow — the saturation differs between the two colors. This creates an overall look that’s eye-catching, but not jarring.

 

2. Make CTAs Stand Out


One benefit of using complementary colors is that the opposing color naturally draws the viewer’s eye. So, if you want to really make a CTA pop and capture the reader’s attention, you should use the opposite color on the color wheel for the CTA.

 

national fulfillment service

 

For example, National Fulfillment Services uses a fade from blue to green for the background in their heading. They then put the CTA within a box in the complementary color orange. This makes the CTA stand out and draws your eye. You immediately want to do what it’s telling you to do and click on the “learn more” button.

 

3. To Highlight Important Information


Using a complementary color to your main color can help you highlight information that otherwise might face into the background. Because the complementary color will contrast more sharply with everything else, it will draw the reader’s eye. For example, let’s say your overall color scheme is composed of blues and grays. You can use a pop of orange to draw the user’s eye to a headline, around an information box or as the navigation menu.

 

United Airlines

 

One example of a site that uses complementary colors to highlight important information is United Airlines. Most of their page is in blues or neutrals. Then, they have a pop of a complementary orangey-yellow color to highlight their MileagePlus program. This drives people to either log in or join. It is a sort of CTA, but a bit bigger than your traditional CTA.

 

You might also think they would use this to get people to book a flight, but the obvious goal for conversions here is to get site visitors to sign up so United Airlines can capture people’s email addresses and contact information. United can then continue to market to those qualified leads and let them know about special offers, with the goal of driving future bookings. United likely needs the positive marketing here to counteract recent issues they’ve dealt with regarding their overall image.

 

4. Take It to the Next Level


Another variation is to use a split-complementary color scheme. In addition to the base color, a split-complementary color scheme uses the two colors adjacent to its complement. For example, if you’ve chosen green as your primary color, its opposite on the color wheel is red. In a split-complementary color scheme, you’d also use orange or yellow-orange as an accent color.

 

The benefit of using split-complementary colors is you create a very eye-catching site that has multiple layers and a professionally designed look.

 

One key is to use your base color as your main color, and the two adjacent complementary colors only to highlight certain aspects of your site. Otherwise, the split-complementary look can become overwhelming and look like some bottles of paint threw up on your website.

 

Big Top

 

Big Top uses complementary colors for a gorgeous design. Note that the main color is purple, and orange and blue are the complementary colors. It is eye-catching and memorable.

 

A complementary color scheme takes a bit of thought about what your base color will be, and which colors and shades of those colors will best complement that base. It’s a balancing act among colors that requires a bit of bravery and thinking outside the box.

 

However, the results can be stunning and encourage people to take the actions you most want them to, such as clicking on a CTA and converting into subscribers.

Check Out These Great Resources to help with your Marketing:

Try Commun.it to easily track brand awareness, discover new leads, share quality content, schedule posts and download progress reports.

Social Searcher is an amazing way to grow an online brand in leaps and bounds it simply takes creativity, passion and consistency to keep things moving in the right direction.

Iconosquare is the number one platform for Instagram & Facebook analytics and social media management.

SocialPilot is the Most Cost-Effective Marketing Tool. Powerful Publishing. Insightful Analytics. Seamless Collaboration.

Bluehost is a leading web hosting solutions company. Bluehost has continually innovated new ways to deliver on our mission: to empower people to fully harness the web. They provide comprehensive tools to millions of users throughout the world so anyone, novice or pro, can get on the web and thrive with our web hosting packages.

SEMrush is an all-in-one tool suite for improving online visibility and discovering marketing insights. Our tools and reports are able to help marketers that work in the following services: SEO, PPC, SMM, Keyword Research, Competitive Research, PR, Content Marketing, Marketing Insights, Campaign Management.

HubSpot offers a complete CRM platform with all the tools and integrations you need to grow better — whether you want to increase leads, accelerate sales, streamline customer service, or build a powerful website.

To check grammar and spelling to style and tone, Grammarly helps you eliminate errors and find the perfect words to express yourself.

Author

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner

Website Colors

 

Color psychology is a fascinating and complex topic. It’s influence on how we perceive the environment can be subtle or overpowering. Overall, blue is the most universally liked color. Red is the most persuasive, for better or worse. Having a display of orange or brown is least likely to help your brand succeed.

 

Whether it’s building a new website or a mobile app, color can have a big effect on your brand. Some of the top app makers allow you to build apps without being a coder or designer. This gives you the freedom to create your own designs, but you will need to know how to use these colors correctly.

 

Just switching from the wrong color scheme to the right one can have a dramatic effect. Your brand image matters nearly as much as the quality of your products and services. The color you choose to present that branding in is as influential as any other element. What colors you use can influence how a given color feels about your brand and whether or not they choose to do business with you. This guide will help you choose the right colors and steer you away from the wrong ones.

 

Red – Attention and Power


Need to make something immediately more appealing? Add something red. It may not be everyone’s favorite color, but it does produce a powerful psychological reaction. Red is the color of important things, and it has been since before the invention of the wheel.

 

The power of red has only been enhanced as it is now the universal color of items on sale, markdown prices, and countdown timers. This is also why making any giveaway or download buttons red is an accepted best practice. To negate the “discount” impression red might give off, you may want to pair it with a sharp image or shape.

 

Here are some great looking red websites: https://code.tutsplus.com/articles/color-inspiration-awesome-red-websites–net-11288

 

White – Calm and Clean


White, as well as pastel tints, can be more than just a background color. It’s the color of justice, cleanliness, and new beginnings. It can even evoke slightly different feelings depending on its tint. “Warm” whites with undertones of red are suggested to have a comfortable feel, evoking feelings of trust. “Clean” or “Bright” white with blue undertones suggests a more formal or clinical tone.

 

White is used, to some extent, on nearly every web page or print design. How you use it, rather than whether you do, is the important part.

 

Here is some white website inspiration for you: https://www.intechnic.com/blog/10-black-white-website-design-inspirations/

 

Pink – On Trend, Passionate and Carefree


From “Millenial Pink” to pink awareness ribbons, pink is a  powerful, attractive color. Typically it’s used by brands that appeal to women, even though color surveys show that women have no particular fondness for the color. In fact, as recently as 1927, there was no marked gender association with pink at all.

 

In any case, pink is still seen by many in the same way as red. In this way, it makes a strong accent color and an over-the-top primary color. It can be used to draw attention, though not quite as powerfully.

 

Bright shades may increase blood pressure while calming pastels may lower it. It adds a touch of fantasy and appeals the those that use shopping as an exercise in escapism or entertainment.

 

Some pink websites you might like: http://www.vandelaydesign.com/pink-websites/

 

Blue – Trustworthy and Loyal


Blue is the most-liked color. In this instance, the kind of blue we’re referring to is on the ” Navy” side of the spectrum. This blue evokes feelings of trust and reliability. If you work in a field where these things are necessary, chances are you have seen a lot of this color. However, if you work in the restaurant industry, you will have seen very little of it. Why? Blue is unappetizing. When was the last time you ate something blue (that wasn’t artificially colored?)

 

When choosing colors, context is just as important as a color itself. Think of a few brands that use blue in their logo – Samsung, JetBlue, IBM – what if all those logos were changed to red? How would that make you feel about their brands? Chances are, you would feel a little less confident in them.

 

Blue is also a popular color on the internet. Think of Facebook, Twitter, and LinkedIn. These are all very powerful brands that people trust to use on a daily basis. When designing a website or trying to build an app, you should consider the trustworthy color blue.

 

Here are some blue websites you might like: http://www.vandelaydesign.com/blue-websites/

 

Green – Positivity and Indulgence


Green is a color that leaves people with a positive, relaxed feeling. Overall it gives the impression of a brand with a friendly attitude. Darker shades lead to a more relaxed mood while brighter shades imply vibrancy and healthy energy. It’s a good secondary color and pairs well with white.

 

Be mindful not to use green too heavily. While it does appeal to conscientious shoppers, too much green can, as a primary theme color, dampen feelings of urgency.

 

Here are some really great green websites you might like: http://www.vandelaydesign.com/green-websites/

 

Teal – Focus and Vitality


Teal has staying power. It evokes images of new things like spring days and blue skies. It also gives off “classic” vibes in the form of Tiffany Blue and the most popular color of mid-century modern kitchen appliances.

 

Teal is an attractive color. It’s one of the few on this list that doesn’t show up on your fundamental color wheel because of that fact. It has a similar power to blue, evoking a trustworthy image, but in a fresh, less formal way.

 

Yellow – Intensity and Memory


Yellow is tricky. According to the APA, using it as a nursery or playroom color can increase moodiness in babies and young children, causing further outbursts. However, in Social Media Marketing, yellow is noted as a happy color. A better way to put it would be that yellow is an “intense” color.

 

There’s a reason highlighters and no 2 pencils are yellow – it can stimulate the brain to remember more information. It follows that, as a highlight or accent color, yellow can do the same thing for your customers. It’s also important to note that too much yellow, or yellow used as a primary color, can lead to confusion and visual fatigue – it causes too much energy to be spent all at once.

 

Check out these yellow sites to brighten up your day: http://www.vandelaydesign.com/yellow-websites/

 

Orange – Energy and Caution


Orange is the most conflicted color you will ever find. You can, however, use that to your advantage. Certain brands use orange to become outliers – to say in a strong way that they are different and worth a look. It’s a rebellious kind of color and challenges a customer to decide whether or not they identify with a given brand. In this way, it has been shown to be off-putting to grounded and traditional budget buyers but performs well with impulse shoppers.

 

Just in case you’re looking here’s a collection of orange websites: http://www.vandelaydesign.com/orange-websites/

 

Purple – Creative


Want your brand to stand out? Consider using more purple. It isn’t particularly stimulating or calming. Because of its unique vibrancy combined with neutral psychology, purple has long been associated with opulence, achievement and creativity.

 

Looking for purple website inspiration? http://www.vandelaydesign.com/purple-websites/

 

Black – Authority and Neutrality


Black is a color most often used to point out authority or intelligence. It’s a bold choice that lends itself to equally bold branding. It should be employed sparingly, too much black can overwhelm and cause eye strain.

 

When used sparingly, black can have a dramatic impact. It should, however, never be used as a highlight color – it simply won’t work. Black is an expected color, a strong one, but not visually stimulating. It can be used to establish a robust identity, but it doesn’t grab a viewer’s attention.

 

Some black & white website inspiration for you: https://www.intechnic.com/blog/10-black-white-website-design-inspirations/

 

Used Thoughtfully, Color Choice Increases Sales


Though colors have the same general meanings across an array of cultures and regions, remember to take context into consideration. What does a particular color mean for other brands in your space? What does it imply in the region you’re from? Choosing a color scheme for a new business can be a daunting task. Making a change in an existing business is harder still.

 

If you do decide to switch from one color scheme to another, try to make the change gradual. An abrupt change with no warning can be disastrous. Consider what happened when Apple decided to change the popular iTunes logo from its original blue to a jarring shade of red. As the update hit, tens of thousands of desktop logos switched to red and many of those users thought something had gone wrong.

 

Red can be a great color, and a change of image may be necessary from time to time. If, however, you have an established image and a loyal user base, get their input before the change if you can. This can help keep your current and future customers happy even with widespread or drastic changes.

 

Check Out These Great Resources to help with your Marketing:

 

  • Try Commun.it to easily track brand awareness, discover new leads, share quality content, schedule posts and download progress reports.
  • Social Searcher is an amazing way to grow an online brand in leaps and bounds it simply takes creativity, passion and consistency to keep things moving in the right direction.
  • Iconosquare is the number one platform for Instagram & Facebook analytics and social media management.
  • SocialPilot is the Most Cost-Effective Marketing Tool. Powerful Publishing. Insightful Analytics. Seamless Collaboration.
  • Bluehost is a leading web hosting solutions company. Bluehost has continually innovated new ways to deliver on our mission: to empower people to fully harness the web. They provide comprehensive tools to millions of users throughout the world so anyone, novice or pro, can get on the web and thrive with our web hosting packages.
  • SEMrush is an all-in-one tool suite for improving online visibility and discovering marketing insights. Our tools and reports are able to help marketers that work in the following services: SEO, PPC, SMM, Keyword Research, Competitive Research, PR, Content Marketing, Marketing Insights, Campaign Management.
  • HubSpot offers a complete CRM platform with all the tools and integrations you need to grow better — whether you want to increase leads, accelerate sales, streamline customer service, or build a powerful website.
  • To check grammar and spelling to style and tone, Grammarly helps you eliminate errors and find the perfect words to express yourself.

 

Author

 

Andrew Gazdecki is the founder and CEO of Bizness Apps — making mobile apps affordable and simple for small businesses. We’re a do-it-yourself iPhone, iPad, Android & HTML5 app platform that allows any small business to simultaneously create, edit, and manage mobile apps without any programming knowledge needed. Think of us as “WordPress for mobile app creation.” Many of our customers are mobile app resellers — marketing or design agencies that use our platform to cost effectively build mobile apps for small business clients.

Website Colors

 
White space, fonts and graphics can all affect engagement with websites, but there’s another factor that’s especially powerful: color. Keep reading to learn more about how color choices affect perceptions of websites, and what can be done to make online destinations as impressive as possible for the people who visit them.

 

Yellow and Red Cause Strong Emotions


When designing or viewing a webpage, your eyes are probably initially drawn to the respective colors because you think they look attractive, ugly or somewhere in between. People who study color psychology say certain hues may affect us more than we realize, because they encourage specific emotions. Red and yellow are two colors that usually incite powerful feelings.

 

Red is associated with love and warmth, while yellow triggers cheeriness when used carefully. Consider how yellow is also used to symbolize caution or attention, especially on road signs. With that in mind, you might want to include yellow in a section of a website that features a call to action. It’s the most visually fatiguing of all colors, so when using it, try to balance your approach by using the hue sparingly.

 

Purple Is Associated With Royalty


Since ancient times, people have thought of purple as a hue related to royalty. The reason why it got that reputation is because the ingredients used to make purple dye came from a rare kind of sea snail. In some cases, a pound of purple wool cost more than people made in a year, so it’s easy to understand why only royal subjects could afford clothing or other items that featured that color.

 

Even if you’re not familiar with the color’s history, you may unconsciously relate it to royalty, especially if you’ve seen kings, princes and similar characters wear it in films or television shows.

 

Purple

 

As far as websites go, purple is frequently used on the official website of James Madison University, an academic institution in Virginia. Once you learn a bit about the school, the use of purple makes perfect sense, and not just because purple and gold are the university’s official colors. Its sports teams are called the Dukes, and the mascot is the Duke Dog. Fittingly, the beloved mascot wears a crown and a purple cape.

 

Blue Could Help People Feel at Peace


Color psychologists have also discovered blue is a calming color. On a related note, scientists at Michigan State University found that when people looked at natural blue spaces, such as oceans, they experienced reduced psychological distress.

 

Blue is the color of harmony and reliability, so it would be a good style guide to utilize for companies who want to convince their audience that they’re trustworthy. Consider adding similar shades of blue across your whole site for the full effect.

 

Pink May Generate Fond Memories of Youthful Innocence


You can probably remember carefree weekends and summer days from your childhood, when it seemed like your biggest worries were figuring out how to make the best use of your allowance money or how to stay occupied on rainy days. Pink is often a color web designers use to spark those happy memories, because it’s a color that signifies innocence, youth and sometimes, feminism.

 

Pink

 

Take a look at this website for an online candy store that also has a physical location. Even if you don’t have a sweet tooth as an adult, this whimsical color scheme – which features lots of pink, and probably not by chance – is enough to make your mouth water as you recall blissful visits you took to the neighborhood confections shops as a kid.

 

What Not to Do When Choosing Colors for Your Website


You’ve just learned several reasons why certain colors may help you get desirable results. For the purpose of thoroughness, it’s also necessary to briefly look at things to avoid when picking a website’s color scheme.

 

Think of readability, and how particular colors could help or hinder that aspect. Light-colored fonts on light backgrounds aren’t ideal, because neither of the colors gives the visual pop that’s needed to capture attention.

 

Avoid very harsh colors, such as neon hues, especially when designing menus or user interfaces. As was evident in the above example of the candy store, bright colors are excellent at conveying certain things if used carefully. In that example, pink and green were two of the main colors, and they complemented each other enough to give pleasant results.

 

It’s clear that colors have psychological principles behind them. The associated insight could affect the experiences you have with the websites you see, or the reactions others have to the websites you build. Recall the examples above and take the tips to heart while browsing the web and getting inspired.

 

Author:

Lexie Lu is a designer and writer. She loves researching trends in the web and graphic design industry. She writes weekly on Design Roast and can be followed on Twitter @lexieludesigner.

Color Wheel
Aside from being proficient in HTML, CSS, and JavaScript, every knowledgeable web developer must stay current with other aspects of web technologies. Since a color palette is perhaps the most important visual aspect of every web page, color theory and use of colors are important when building a great-looking and effective web page.

 

Even though web developers don’t need to be highly skilled when it comes to color theory, a few basic rules and principles will go a long way. As you start working with colors and begin understanding their connections and possible effects, you will learn the theory along the way.

 

To get started, you need to know three basic terms: complementation, contrast, and vibrancy. This will teach you the basics of the interaction of colors, which will help you create an effective color palette.

 

Complementation


You probably already know that some colors are complementary. What this means is they match each other, or they have a good visual relationship. Colors found on opposite ends of the spectrum lead people to consider a design visually appealing. In other words, the eye is provided balance this way, as complementary colors avoid eyestrain.

 

There are two main types of complementation: The Triadic and Compound scheme.

 

The Triadic scheme connects three colors on separate ends of the spectrum. This system can be utilized once you decide on a base color. So, take the color wheel and see where your base color is located. Draw an equilateral triangle from this point, so the three points of the triangle form a tri-color scheme. This is the easiest way to create a color scheme consisting of colors with equal vibrancy and complementation.

 

The Compound scheme allows you to easily pick a complementary color. The colors are chosen from opposite ends of the color spectrum. You can use this system of picking complementary colors if you need more freedom in your design or if you need a greater variety of colors and hues.

 

Contrast


Contrast allows web developers to avoid eyestrain in their designs while providing focus toward different visual elements. The safest approach is to pick a very light background while applying a very dark color for the text. Still, you should choose different ways of achieving contrast if you want to focus the viewer’s attention to different page elements.

 

Vibrancy


Vibrancy provides atmosphere and emotion to your design. Bright colors lead users to feel more energetic, while darker shades are more suitable for more serious and corporate projects.

 

Contrast

 

You still need to make sure you’re using complementary colors, regardless of whether you’re using a bright or dark color palette.

 

How to Pick a Base Color


Sometimes, the biggest problem is selecting a base color. Since our eyes can detect ten million colors and color variances, it’s understandable why this can be an issue.

 

First, have a defendable reason behind your decision for your base color. You will often hear your clients like a certain color, but that isn’t enough. Maybe you can start with your client’s logo, which may have an established color, or you can study your client’s main competitors to see their color palettes and avoid using anything similar.

 

Also, think about your client’s target audience, which should help you with choosing the right vibrancy. Keep in mind, you’ll need a good reason for your decision, which won’t only make you look good, but will also help you choose additional colors from the spectrum.

 

Pro Tip: Since you’ll need to know how to define a color in CSS using hex codes, this means that you’ll need to know a color’s alphanumeric six-digit code (like #cccccc for a light gray). If you use Adobe’s Photoshop, you can use a screen capture to save and open the image in this application, and then use the eyedropper tool. Now right-click on the area you wish to copy the color from and pick “Copy Color as HTML.

 

You can also use an online tool called Name That Color to pick a color, along with the corresponding hex code.

 

How to Create a Color Palette


Now that you’ve chosen your base color (along with its hex value), it’s time to make a cohesive color palette. In many cases, using two colors is just enough. For example, look at Microsoft’s website, which uses light gray in combination with black (which create a nice background for vibrant images).

 

There are numerous online tools you can use to make a color selection as effortless as it can possibly be. This is also a good way to test your knowledge of color theory.

 

Adobe’s Color is perhaps the most intuitive online tool that allows you to create a complementary palette. This is the essential tool if you’re willing to tackle a more comprehensive palette of up to five colors. This way, even if you fine-tune only one of your colors, this online tool will change the rest of the palette accordingly.

 

Adobe Color Wheel

 

Furthermore, the export codes are provided under each of the selected colors, including their hex values. If you are afraid of making a mistake, Adobe’s Color has a rich library of user-created palettes.

 

How to Apply Your Newly Picked Color Scheme


After picking the right color scheme, it is time to see it in action. It’s always recommended you first create your website in grayscale. This is a good way to see how different elements interact with each other before applying colors. This method will also allow you to identify the heaviest elements, so you’ll know which elements need to be bright and vibrant.

 

In other words, this is a good way to choose featured colors, as well as colors that can be used as accents (for buttons and icons), in addition to colors for text, logos, and icon outlines.

 

A Final Note


You will learn that sometimes a good-looking color palette (that you created in Photoshop or Adobe’s Color) doesn’t really work when applied. However, don’t be afraid to go back to your digital drawing board. Even the slightest modifications can go a long way.

 

Choosing the most effective color palette and applying it to your web project maybe sounds complicated at first, but you don’t need to spend a lot of time figuring out the basic principles of color theory. As you’re building your web projects, you will learn more about connections between colors as well as what kind of effects can be achieved.

Copyright : skdesign/123rf

;