Skip to content

38 Best Website Color Schemes that Convert

NEW COLOR SCHEMES THAT CONVERT

1. 70’s Inspired – Modern Color Palette

Delicious creamy - purple, pink, orange, green color scheme

Mountain Shadow Blue: #101357

Old Makeup Pink: #fea49f

Bold 2019 Green: #007f4f

2. Lightning Blue Purple – Simple Web Color Palette

Blue purple, white, color scheme ideas from Awwwards, smashing magazine

Lightning Blue: #51d0de

Lightning Purple: #bf4aa8

Brain Wrinkle White: #d9d9d9

 

3. Metallic Blue, Purple, Red – Website Color Palette

Metallic Blue, Purple, Red

Blue Popsicle: #0f2862

Redline: #9e363a

Purple Shadow: #091f36

Grey Blue Leaf: #4f5f76

3. Apricot Avalanche – Web Design Color Schemes

Fresh and Bright Website Color Schemes

Blueberry: #6B7A8F

Apricot: #F7882F

Citrus: #F7C331

Apple Core: #DCC7AA

4. Strong Contrast and Trustworthy

Bright Color Palette for Website

Left Blue: #1561ad

Right Blue- Muted: #1c77ac

Blue Green: #1dbab4

Red-Orange: #fc5226

 

5. Classic Red Gold Website Color Palette

Gold and red color palette together

Redder than you: #ff3a22

Goldi-lots: #c7af6b

Darker Gold: #a4893d

Silver Tongue: #628078

6. Subtle and Succulent Web Color Scheme

Subtle color scheme for 2019

Barely Green: #acb7ae

The Brown-shirts: #82716e

Tan Blonde: #e4decd

Blondey: #c2b490

7. Photographic Memory

Soft Blue Green Color Palette

Green Mountain: #3d7c47

Blue Mountain: #09868b

Light Blue Backdrop: #76c1d4

Barely Gray Edge: #f7f7f7

8. Futuristic Lightbrite

Futuristic and Bright color scheme

Grey silver: #bccbde

Lightsaber Blue:#c2dde6

Purple: #431c5d

Orange: #e05915

Yellowbrite: #cdd422

9. Trapper Keeper Red & Purple

Color combinations for websites

Painful Red: #eb1736

35 Years Old Purple: #5252d4

Lighter purple on the gradient: #7575dd

Shadow Purple Red: #781a44

10. Easter Egg Sandwich

Unusual Color Palette for Websites

Green: #8bf0ba

Ironic Blues: #0e0fed

Blue Underling: #94f0f1

Pinky Ring: #f2b1d8

Egg Yellows: #ffdc6a

11. Intellectual Non-chalance

Web Design Color Scheme

Light Blue Green: #6ed3cf

Soft Purple: #9068be

Tasty Eighties Grey: #e1e8f0

Rich Red: #e62739

Found on Trendy Web Color Palettes from Awwwards

12. Extra Snug

Web Design Color Palettes- Softcore

French Laundry Blue: #3a4660

Comfortably Tan: #c9af98

Peachy Kreme: #ed8a63

Brown Bonnet: #845007

Found on Desi Shirt by Filip Dueskau on Behance

13. Dark Horse

Indian Web Design Color Palette- Yellow, Grey, Black Web Design Inspiration

Are ya yellow?!: #feda6a

Silver Fox: #d4d4dc

Deep Matte Grey: #393f4d

Dark Slate: #1d1e22

Found on Vintage Rides Concept by Creativa Studio on Dribbble

14. Sleepy Green Streaks

Green, tan - Web Design Color Palettes

Simpler Lime Green: #7dce94

Scuffed Dark Grey: #3d3d3f

Vanilla Grey: #f6f5f3

White-ish: #f9f8fd

Found on The Jungle Book Website by Watson D/G for Disney

15. Precious Metals

Precious Metals Web Design Color Palettes

Rose Gold: #bd8c7d

Soft Gold: #d1bfa7

Silver: #8e8e90

Onyx: #49494b

Found on KAE Branding by Socio Design

16. European Bodies

European Bodies - Web Design Color Palettes

Yellow Hand: #fbf579

Lonely Blue: #005995

Stationary Pink Red: #fa625f

Purpled: #600473

Found on Website Inspiration by Mind Sparkle Mag

17. Simple Brilliant Accents

Web Design Color Palette

Red Overlaid: #cd5554

Photographed Brown: #91684a

Algae Green: #00c07f

Heritage Blue: #313d4b

Found on Website Inspiration by Mind Sparkle Mag

Still hungry for more? Check out the amazingness on Mind Spark Mag and page through the awesome examples. Such a great curation of modern, often Swiss inspired web design.

 

18. Blue Red

Blue, Red, Grey Color Scheme, User Interface Design Color Scheme Inspiration

Deep Red: #b11a21 – In an overlay, juxtaposed against flat blue, the photographic background gives depth.

Lighter Red: #e0474c – The smiling face coming through the red, makes it feel striking.

Blue Beans: #7acfd6 – The flat blue provides contrast to the photo behind the red. 

Light Classy Grey: #f1f0ee – Simple light grey is used to provide depth behind a later photographic section, with white below.

Found on Website Inspiration by Mind Sparkle Mag

19. Sunny and Calm

Sunny and Calm - Website Color Palette

Morning Sky: #CAE4DB – Never underestimate a color palette created by a photograph to set the tone of your design

Honey: #DCAE1D – In this case the palette is set with the photo and then echoed in the subtitle.

Cerulean: #00303F – Cerulean is incredibly classy as a black or dark grey alternative if used consistently throughout

Mist: #7A9D96 – This clean, natural color is established in the photo but could be used on a lower full-width block or buttons as well.

Found on Inspiring Website Color Schemes by Canva

20. Dark and Orange

Orange and Grey, Black Color Scheme

Dark Grey: #393939 – Dark designs take a little bit more fore-thought but can provide tons of contrast if used well. 

Deep Orange: #FF5A09 – With different shades of oranges, there is depth and gradient, without venturing into totally new colors. 

Light Orange: #ec7f37 – Utilizing illustrative elements, requires a bit of flexibility for the natural lightness and darkness to contour objects. 

Orange Yellow: #be4f0c – Using on color over on the color wheel can keep the palette looking classy, bold and restrained.

Found on Great Color Schemes by One Extra Pixel

21. Squeaky

making-pets-better-green-orange-color-scheme

Fresh: #4ABDAC – Once again the color overlaid over the photographic elements provides a classy modern touch

Vermillion: #FC4A1A – A figure in the foreground is worked into the context, still paying attention to how it complements the overall structure of the design. In fact one might even be able to surmise that the design was down around this figure. 

Sunshine: #F7B733 – The Yellow provides only a juxtaposed call to action and highlights imporant parts

Clean: #DFDCE3 – Clean grey, utilized in the photograph, keeps the structure un-encomberred by more colors or patterns in these sharp headshots.

Found on Inspiring Website Color Schemes by Canva

22. Basic blue green

Blue Green Basic Color Scheme

Ol’ trusty blue: #368cbf – Blue wins for trust in color psychology, but make sure it’s a tasteful hue, as some blues are too out of the box. Just like my art teacher said with paints, you should always mix them before applying to canvas, lest you get something that looks like you just slapped the colors out of the box. 

Accent color green: #7ebc59 – Corporate Blue + Eco-conscious green = Every website ever. But don’t overlook the use of common color schemes just because their common. Wield familiar colors together when it serves your purpose of feeling trustworthy. 

Dark Slate: #33363b – Breaking up white space with darker header, footer, or full width sections provides relief from things that are too repetitive. 

Light grey: #eaeaea – This truly is one of the most common color schemes around the website, particularly for technology companies. You sick of it yet? I like it.

Found on Free awesome WordPress Themes by ColorLib

 

23. Stark Contrast

Stark Contrast - web design grey scale color palettes

Slate: #262626 – Repeat after me, all grays are not equal

Secondhand Grey: #3f3f3f 

Whitish: #f5f5f5 – Repeat after me, all whites are not equal

Light grey: #dcdcdc

Found on One Page love, created by Peter Toth

24. True Black and white + Photography

Michael Schmid Portfolio - B+W Plus One

Black: #000000 

White: #ffffff

Found on Web Design Ledger – 20 Beautiful Portfolio’s, Work by Michael Schmid

25. Goldifox

B & W + 1 Color scheme love - web design color scheme inspiration

Golden wheat: #a39274

Soft Wheat: #dfd8c8

Deep gray: #252523

This color scheme of course of course also demonstrates what a great photo can do for the overall look of your site if juxtaposed with the strong contrast of the flat color elements.

 

26. Minty refreshed

Monochromatic blue-green web design color scheme

Mint: #4cb69f

Touch of Grey: #f5f5f5

Deep purple: #201d3a – Not quite B&W+1 – Hint of purple in the corner of the photograph

Found at Dapper Ink by Joel Reid on Dribbble

27. Blue + White

White Space in Web Design, blue and white web design inspiration,

Optimism Blue: #269ccc

Blue Algae: #9ed2c5

Flat Grey: #7b7b7b

Found on fltdsgn.com

 

28. Experimental Simple Photography – Square separations

Black and White and greyscale web design

 

Found on InspirationDE by Sam Thies

29. The floating object, angled section separation, simple editorial typography

Flat design, black and white, greyscale web UI Inspiration

 

Found on flatdsgn.com by Roland and ‘We Ain’t Plastic’

30. Rectangle around letters, creative letter blocking

Web Design Inspiration - Black and White and Greyscale designs

 

Found on Behance, by Diana Polar

 

31. Charcoal Black, Gold and lot’s of white space

Gentlement - Manly color schemes for websites - gold and black

Golden top: #d8ab4e

Golden bottom: #b48c36

Charcoal Black: #040404

31B. Font Pairings to complement the color Choices – Gin Rough and Amiri

Gin Rough – by Fort Foundry, Available on MyFonts – By taking the high-end feeling gold gradient and pairing it with very intentional shaped typographic elements, the designers of this site juxtaposed the rugged and elegant.
Gin rough, gold and type design

Amiri Rough – Available through Google Fonts – Looks gorgeous as a testimonial or call out quote.

 

Amiri Google Font Pairings

 

Found on Web Design Inspiration for Gentlemen Barber Clubs (You need to see the full site)

32. Clean Khaki Red

Red, tan, grey color scheme- type pairing

Cotton Red: #c53211

Clean Deep Grey: #2e3830

Khaki: #e6dbc9

32B. Font Pairings to complement the color Choices – Futura Bold and Museo Slab

Futura Bold – is as classic as it is simple. Common similar fonts like Gotham Black, Montserrat, or Proxima Nova can allow you a similar but different flavor, but Futura Bold will be useful for a lot of situations – and plays well in this simple red, gray, tan color scheme as uppercase titles.

Museo Slab and Futura Bold Uppercase

Museo Slab – As both the 100 weight in the blockquote above, and the paragraph text (font-weight: 400) Museo Slab provides readability whether big and small. Futura, Museo Slab over these comfortably simple colors feel not necessarily classic, but modern and original. The restraint in both color choices and typography leads to a very cohesive feel that leaves the whole website feeling integrated and branded.

33. Hip Modern Pastels

Web Design Inspiration - Pastels

 

WEb Design Inspiration

Pink Web Design Inspiration - European

Pastel Peach: #dea6af

Sky Blue: #8cbcd0

Pastel Pink: #e6dbc9

33B. Font Pairing to complement the color Choices – Calibre – the European Design Ketchup

Calibre – I love the look that many modern European websites achieve with this mature, swiss feeling typeface. It’s going to see a lot more use in America before it gets overdone here. The no-frills application below shows you the confidence with which a lot of European designers are using it. Impeccably played.

Calibre Font in Web Design

 

Design found on CSS Design Awards  – Buy Calibre typeface

 

34. A Sleek Modern Color Palette

 

Fashionable Dark Sleek modern color palette for web design

 

Dark Blue/Purple: #111c30

Dark Pink Makeup: #9a4d55

Comfortable Couch Beige: #80756b

35. A Subdued Modern Color Palette

Subdued modern color schemes

 

Tiny Sweet Blue: #b5e9e9

Creamy Light Tan: #fef6dd

Pinkie Pie: #ffe1d0

Yellow Horse: #fff1b5

Green Thumb: #dcf3d0

36. A Fresh Modern Color Palette

Fresh Modern Color Palette

Deep Purple: #1d1145

Trapper Keeper Green: #0db4b9

Pink Boot: #f2a1a1

Modern Pink Backpack: #e76d89

37. An Earthy Modern Color Palette

Earthy Modern Color Palette

Red branches: #de493c

Green Trees: #608074

Blue/Green Mist: #daefd9

38. A Rusted Modern Color Palette

Rusted Modern Web Design Color Palette

Deep rusted red: #c1432e

Silver head-dress: #4b6777

Rusted Gold: #ce9e62

Black for Contrast: #2c2c2c