The Effects Of Pastel Colors In Web Design

Article

Claire Roper

July 4, 2013

Back to Resources

One of the key ambitions of designers is to make a website stand out. A lot of times, bold colors are used to make landing pages more salient. Colors are a powerful tool in web design as they can draw attention, guide your visitors’ line of sight, and stir emotions. However, not only bold colors can be effective.There has been a growing trend in web design for the use of less dominant colors. They can be used to create a calm and welcoming effect on visitors. A lot of times sites use pastel colors to add a light and fun tone to their site. Pastel colors can also be used to create a feminine feeling. For example, this works well with women’s fashion sites.

While pastel colors can have a great effect on the sphere you create on a website, they are also difficult to implement well. You don’t want your site to look “washed out” or too feminine. It requires skills to get the right balance between colors and tones. Also, bold colors can still be used still be used to highlight or draw attention to an area on the page, for example a call to action button.

Below you can see some great examples of the use of pastel colors and the type of websites that use this technique effectively. Which will you take inspiration from?

Pastel Backgrounds

Pastel backgrounds, when used correctly, can be a great way to inject color without overwhelming the text on a website. Pastel backgrounds are also great for setting the atmosphere of a brand’s website, from the glamorous and sophisticated pale pink used by Vancleef and Arpels, to the hip and calming pastel blue used by Café Evoke. The use of pastel color in backgrounds can also be used to enhance the photographic images.

1. Dearmum.org

wp-contentuploadsimg13.jpg

2. Vancleefarpels.com

wp-contentuploadsimg22.jpg

3. Cafeevoke.com

wp-contentuploadsimg32.jpg

Pastel Fonts

Pastel fonts are fantastic to use to inject a bit of both color and fun when designing a website. They can be used to create a unique look, which really appeals to many consumers. The other great part about using pastel fonts, is that you can use more color without the overall feel being too garish.

4. Petit-mariage-entre-amis.fr

wp-contentuploadsimg42.jpg

5. Futureofcarsharing.com

wp-contentuploadsimg53.jpg

6. mariecatribs.com

wp-contentuploadsimg6.jpg

Pastel Logos

Using pastel colors to design your logo can be a great way to use color to convey words about your brand. Using pastels conveys a more subtle experience, and modernity which speaks to the consumer. The use of pastel colors make logos seem more current, and light which is perfect for many companies from design studios to sweet shops.

7. Raphspatisserie.com

wp-contentuploadsimg7.jpg

8. Isadoradesign.com

wp-contentuploadsimg8.jpg

9. Sweez.com.br

wp-contentuploadsimg9.jpg

Pastel and Flat Design

Flat design seems to be increasingly popular since 2012 and is often associated with the use of pastel colors and cool greys. Pastels work well with wonderfully well with flat design. Far from being a trend or fad, the combination makes for a very clean and precise design.

10. Alexandra-kuban-webdesign.de

wp-contentuploadsimg10.jpg

11. Postable.com

wp-contentuploadsimg111.jpg

12. Coordinate.org.au

wp-contentuploadsimg121.jpg

Pastel and Vintage Design

Pastels and vintage certainly go hand in hand! The pastel patterns and pale colors are quickly recognisable as vintage. The following websites use pastels to create a vintage feel, whether very simple vintage feel such as Satchels UK’s website or a more detailed and collage-like feel such as Chateau Sophie’s website.

13. Kinderfotografie-evihermans.be

wp-contentuploadsimg131.jpg

14. Chateausophie.com

wp-contentuploadsimg14.jpg

15. Satchelsuk.co.uk

wp-contentuploadsimg15.jpg

Pastel and Skeumorphic Design

Pastels are fun to use when designing websites using objects made to look like those you see in the real non-digital world. www.Melonfree.com is a great example of how skeumorphism is enhanced by using pastels; the softer shades of the melon create a realistic look. Using pastels can create a more realistic appearance in design.

16. Melonfree.com

wp-contentuploadsimg16.jpg

17. Jacquico.com

wp-contentuploadsimg17.jpg

18. Aggregift.com

wp-contentuploadsimg18.jpg

Subscribe for the latest CX content

Privacy notice|California privacy notice
Terms of use
|Cookie policy

*Net Promoter, Net Promoter System, Net Promoter Score, NPS and the NPS-related emoticons are registered trademarks of Bain & Company, Inc., Fred Reichheld and Satmetrix Systems, Inc.