WDD staff are proud to be able to bring you this daily blog about web design and development. Join our 746,498 subscribers and get access to the latest tools, freebies, product announcements and much more!
In this article we’ll review some techniques to achieve beautiful color palletes for your web designs.
Even when visitors skim a website’s home page for the first time, the colors influence their attitude towards the content.
But people might be less inclined to buy flowers from a website that is corporate blue and ocean gray. A “professional” design tell visitors that they’ve found a website that takes its subject seriously, even if that subject is light-hearted. Removing color from a design reveals fundamental problems that should be addressed before worrying about which shade of chartreuse works best.
Abruptly, I flattened the Photoshop layers and hit “Desaturate” turning the vibrant copper-and-navy design into shades of gray. Duplicate the background layer in each screenshot (Layer > Duplicate Layer, or Command + J on a Mac, or Control + J on Windows).
Once the website’s layout and organization work without color, it’s time to choose a palette.
Saturation is how rich a hue is: neon colors are very saturated, while pastels are less saturated. Hue refers to which part of the rainbow a color belongs to, such as red or green; it’s the property that people trip up on. Unfortunately, avoiding a bad color combination isn’t the same thing as choosing a good one. The design of an eight-page website that I recently built was topped with an elaborate metal scaffold set against an indigo sky.
When the client asked how we were able to design a website so well—and so quickly—our response was, “This is what we do.” But the color was already there.
While stock photos works for quick websites, designers of larger and more dynamic websites should seek inspiration from their audiences. An excellent indicator of which colors are attractive to your audience is their daily clothing. If you’re lucky enough to get photos of your target audience, view them en masse; you want an average of the crowd.


Clothing designers who are able to stay in business have excellent color sense for every mood and lifestyle. The end result is a color scheme: a reference that provides different (but not too different) hues and a range of shades that work well together.
You could solve this problem by either making your images follow the color scheme or making the color scheme follow your images.
Enforcing your color scheme, even with photos, is a great way to achieve a unified look across all pages. Fill that layer with one of the colors from your palette, preferably the one that most closely matches the image. Play with the opacity until you get a good balance between the image’s original color and your website’s color palette.
If you want small text (say, 14 points or less) to match a large field of color, make the text a few shades darker than normal.
How do you create successful color schemes?  What works and what doesn’t work for you?
We spent the day browsing the internet for some wallpapers that were super colorful and sure to inspire some great ideas.
Planning color means creating a framework that describes which colors to use and how to use them.
If you consider a website important enough to spend time refining, then readers will likely consider it important enough to spend time reading.
The simple act of washing out over-saturated primaries really shows where a website stands.
We knew we had a winner when previous clients complimented them on the new look and more calls came in from prospective clients. The more dominant the colors, the more heavily the scheme is imprinted in the visitor’s mind. A design can have a hundred shades of one hue, from pastel to neon, and still look planned.
A buffer of black, gray or white is safest, because grayscale is hue-neutral: you can coordinate any part of the rainbow with black, white and gray.
If a color scheme has, say, violet and brown, then the design could have many shades of brown with a few bright violet highlights. Pure blue and bright cyan make a so-so combination, but dark blue (navy) and light cyan (sky blue) contrast enough to set each other off.


A color scheme is successful not when you’re satisfied, but when your audience feels comfortable. Setting Photoshop’s eyedropper tool to a 5×5 average, I sampled the darkest and lightest parts of the sky and gave the sidebar, links, headings and footer those few shades.
You might play around with more than one photo, but avoid giving the layers names like “wall texture” or “paper texture.” You want to focus on the effect on your website, not where it came from. Each layer’s blend mode was set to “Soft Light.” Pure black was too dark for the right-most color, so the black layer’s opacity was adjusted. Remember that a color scheme allows for wiggle room: as long as an image’s major hues fit, the image should work. A splash of something iridescent will draw visitors there, but if they see it everywhere, they’ll wander aimlessly. Give them a tinge for real character: red, but slightly violet, blue with a touch of green, “warm” yellow with an orange tint.
If you choose red, be aware that light red can be feminine and dark red can look like rust or blood. But intuition is a battle between your ego, your audience’s pickiness and the authority of the people funding the project. He is a freelance web designer who has learned that a deadline’s inflexibility is inversely proportional to the number of features requested at the last minute. Red and violet can be different enough not to clash but close enough not to look intentional. If your website is about, say, league sports, find out what people wear to games, rather than their day jobs. Many stock photo websites let you search by color (meaning hue: usually primaries like red, green and blue).
By the end, the three of us were staring at a screenshot of the ninth draft after-hours over a few drinks. Color improves these effects, but problems in layout, type and organization can’t be solved by color alone.



Free floor plan design tool
Download youtube videos website based




Comments to «Colors for professional presentation»

  1. Baki_Ogrusu writes:
    Perfume he likes, but here is a tip function for everyone at every single time are.
  2. LoVeS_THE_LiFe writes:
    Comprehend who you nature of web companies are especially after.
  3. body_love writes:
    Quantity of them make a man to commit to a long-term connection look like they'd be just fine.


2015 Make video presentation adobe premiere pro | Powered by WordPress