Allgraphicdesign.com Newsletter

Subscribe to our weekly newsletter to get the latest on advancing your career and enhancing your education.

SEARCH DESIGN SCHOOLS

Zip Code:
Subject:
Degree:
Online Campus Both

Graphic Design Education - Search Schools

home > Tips & Tutorials > Colors > COLOR SCHEMES & COMBINATIONS TOOLS & UTILITIES

TOP COLOR COMBINATIONS IN WEB DESIGN Examples of Color Schemes and Color Combinations Within Designs

-------------------------------------------------------

Read Part I - How to Choose Color Schemes in Graphic Design and Web Design - Find Out How to Combine Colors

Read Part II - 55+ Color Tools for Color Palettes, Color Combinations, Color Schemes & More for Graphic Designers & Web Designers

Read Part III - Examples of Color Schemes and Color Combinations Within Designs

MORE ARTICLES ON HOW TO CHOOSE COLORS
COLORS MAIN MENU
-------------------------------------------------------

Are you having problems thinking of new color combinations? Do you wish that you could have a reference file for evaluating new color combinations when designing websites? There area many helpful tools and websites out there that list good combination colors but wouldn't you prefer to look at designs implementing these colors? I would. I have created about 45 different simple designs implementing workable color combinations, and I will add to this list at regular intervals. So bookmark this page, and come back when you are in the process of designing a website. Designers may send to me hex numbers and I will create thumbnails ( like the ones below) from these color combinations and add these to our list.

Graphic Designers from our Community

Below, you will find the designs created with workable color combinations. Each picture includes hex numbers so that you can try them in your designs. On the next page, you will find a guide to choosing beautiful color schemes for your website designs. Enjoy and feel free to comment on these designs color combinations.

NOTE - THE DESIGNS BELOW COMBINE ALL OF THE COLORS WITHIN A COLOR PALETTE INTO A SMALL SPACE - DON'T GIVE UP ON A COLOR SCHEME WITHOUT FIRST TRYING IT ON A LARGER SCALE. USING SPLASHES OF THESE COLORS ON A LARGER PAGE WITH A WHITE BACKGROUND, OR JUST A BIT OF WHITE, WILL REALLY MAKE YOUR PAGE LOOK GREAT (LIKE THE EXAMPLE BELOW)!!!

FOR EXAMPLE (BELOW): What looks garrish to you (below on the right)), looks great when implemented on a website (below to the left) because the colors are used in moderation. BELOW ARE MORE EXAMPLES SHOWCASING HOW THESE COLOR COMBINATIONS LOOK GREAT WHEN IMPLEMENTED SPREAD OUT IN A SITE'S DESIGN :

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#6D7A73	#333125	#807645	#0D4A76
	#31332E	#D5D0CD	#707D76	#ECEDCE
	#F4EC7D	#FEF1AB	#EBEACE	#010101
	#986633	#772D2A	#986635	#FF632F
	#762D27	#9A673A	#722C24
		#717C76	#5F5150
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#B78059	#FFDC12	#A1B2C4	#91B9EC
	#493628	#736206	#ECF5FC	#556890
	#FFD929	#94150F	#6A80A5	#A4A4A4
	#FDF5E0	#E91B1B	#3A465C	#585858
			#F6FBD2
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#76656B	#3E7F83	#F2F5EE	#EDF0E7
	#E6EBE5	#D9E9E8	#858681	#7E7E7E
	#533443	#DD1323	#C6E108	#C6E108
	#160110	#839704	#110E17	#110E17
		#555243	#D8191E	#86AABA
		#161813	#85960C	#68808A
		#000000	#565342
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#1E201B	#2B382F	#933D2E	#E0DED2
	#878684	#FF7700	#5C2119	#6C8371
	#4D5049	#010101	#56708B	#C6862E
	#607B84	#DCD1BF	#86A3C5	#6D2E1D
	#87ABB9		#042E18	#C47824
	#CBE3EF		#026634	#424441
			#9E79A5
			#614367
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#FB9B13	#A43102	#A42806	#8C8E8B
	#A72704	#E3E091	#FAE39F	#232522
	#F4FFC0	#A8B130	#E9945D	#030002
	#FEE040	#FFFFD7	#F3FED3	#E09DAF
		#FDECA7		#FE4E7F
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#7EA725	#753A40	#647606	#B27F6E
	#40303D	#BB8D8F	#E6F598	#610102
	#010101	#3F2E38	#A29B0D	#756C63
	#22231B		#414916	#171614
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#EFF2E9	#23221D	#2D3830	#943B33
	#828081	#878787	#FF7C00	#5F2019
	#C5E008	#627A84	#D0C9B6	#61416A
	#12130D	#84AABD	#010101	#AA7FB5
	#88ACBA	#C6DEEA		#056B39
	#C7DFEB			#002E11
				#566C84
				#7895B5
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#993C34	#DBD9CA	#C20200	#873908
	#5E1D1B	#657A69	#FFCA05	#873908
	#2A3440	#6C2D1C	#050304	#C1DCF1
	#536D88	#C47729	#034400	#33506E
	#804910	#444547	#27313D	#357457
	#C27F39			#072616
	#0B6333
	#002915
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#77636C	#398279	#EFF2E7	#EFF2E7
	#ECF3EB	#F5EAE6	#888888	#888888
	#4C303F	#C1E000	#D8191E	#86AABA
	#160110	#585542	#7F9107	#62808B
		#121013	#565342	#C8E3EA
		#849801	#121013	#565342
		#DD161D		#121013

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#B4855B	#C87306
	#F7F7DF	#E2F1B8
	#717A75	#F4F082
	#F1EDEC	#5F2E05
	#9C6637	#E8E6A9
		#C6D6C9
		#58655B

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#8F6600	#BDA277	#315D9A	#E50077
	#E39D00	#372F1A	#1E2E52	#79033F
	#CDDEBC	#686554	#88330E	#FF9D01
	#616453	#FCA301	#716C59	#8F570A
	#6D0101	#8C5302	#DBD1AE	#203F5E
	#BC0605	#DF521A	#FFA500	#546D00
	#ADDB5F	#8C2E0C	#8F5605	#9DCF00
	#556B2D		#F3552E	#3D6390
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#323337	#FFDC12	#646200	#D13002
	#0D0D0D	#736206	#D3B811	#6D1900
	#F6BD66	#94150F	#FFCB06	#154D4C
	#846934	#E91B1B	#683700	#369E9F
	#3833F1	#FF8911	#FB6C2A	#FF9933
	#882520	#6D3206	#E71713	#6B330E
	#ED3533	#323323	#329C9C	#FFDF30
	#101243	#70704E	#144A4A	#8B720B
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#DF0000	#245485	#542082	#542082
	#680100	#0E2F50	#B032F5	#B032F5
	#003E00	#667A3B	#FEC722	#90D22A
	#017E06	#363F20	#E6A805	#A0FD33
	#000082	#FEA200	#2437A0	#FC5D1B
	#010030	#875308	#3A5BF8	#AA4112
	#FFFF01	#EC4B1D	#FAFC1C	#021037
	#959404	#8B3210	#FFCF0C
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#FB8B01	#E2217C	#FE5C1C	#FC2A29
	#AE4D09	#422C74	#FD4A08	#8B0400
	#6A0297	#553679	#141C4B	#3C3DF9
	#A907FB		#242F7E	#000343
	#FF6A00		#FFC533	#FDFB2A
	#1D2E40
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#5120ED	#F80E0D	#215779	#A88503
	#26136D	#750009	#0A2D43	#674E15
	#FF7005	#FFAC7A	#7A8B45	#7F7F7F
	#8D4400	#AA7553	#465129	#303030
	#BDF123	#125543	#7C441F	#000000
	#637A22	#06211C	#412412	#B93602
	#3588CC	#180107	#BB3303	#681C00
	#15354E	#551023	#681E03
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#343434	#981211	#D7B810	#D03100
	#131313	#E91915	#626202	#5D1808
	#EF3334	#716004	#279F9E	#FFDD31
	#8D1F22	#FDDE11	#124E4E	#8A7114
	#896943	#FE8711	#FD632F	#1B4E4F
	#FFCE68	#6B3708	#E9161D	#2C9C9D
	#3433F0	#606048	#FFCF03	#653507
	#13124B	#353624	#693601	#FF9A2B
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#FFC428	#AFB1FE	#F94D01	#D82F32
	#F6821B	#45467E	#F87608	#FFBE5B
	#AF4012	#464883	#FFC620	#0057A0
	#E88B08	#252547	#FE4B09
	#FF8820
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#5420EF	#5F5F5F	#60635C	#2B9D00
	#291078	#000000	#010101	#1C4D00
	#FD6C03	#C00A00	#FB5904	#8F0330
	#974509	#FFFFFF	#7C2901	#CF0042
	#705E00		#FD2E06	#31345D
	#FEDC01		#1112DC	#6465C2
	#414141		#0A0643	#DEDBB0
	#000000			#7A7A5E
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#669851	#950303	#FAFF02	#2E4F00
	#3D5E31	#600202	#C4BF23	#78D700
	#58679E	#DEBB01	#140FDB	#CE5401
	#C9B68C	#DEBB01	#08047D	#813100
	#975264	#232A3D	#B13B00	#080F19
	#6C3D47	#5D8DBD	#FF5605	#314D7D
	#252A3D	#394F67
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#BF0301	#25ABA0	#EC7823	#027BB4
	#530000	#0C4849	#014C48	#00374F
	#548102	#4F7B02	#505050	#790919
	#213100	#ABBA5B	#4B532E	#EE2336
	#3C3B1C	#FFCE37	#9BAA55	#157A34
	#767733	#8B6E1E	#B9B8B4	#42C659
	#EFDE99	#6654C2	#68370F	#DF6907
		#2D2554		#9C3D07
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#981364	#75D097	#000104	#000104
	#4E0230	#3E5B47	#373239	#373239
	#82C408	#3A2232	#0E0E0E	#0E0E0E
	#364D05	#784063	#8A9A41	#574599
	#711BFF	#211C30	#485122	#2B2251
	#431099	#574374	#4F0600	#6F141D
	#154B4B	#D49B7D	#8A1300	#FA1F35
	#56BDBC	#60413C
	#141A26
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
	#6322D8	#69BB01	#410061	#343233
	#34136C	#274000	#B356E2	#929292
	#FFFF01	#54003E	#8E0036	#9D0102
	#E5AF07	#CF009B	#DF0262	#FE0103
	#FFA708	#8C036B	#6805A0	#252525
	#FF670C		#FFFF0E	#101010
	#02007F		#B9B800	#FFCB00
	#1011DD			#A28700

-------------------------------------------------------
ARTICLES ON HOW TO CHOOSE COLORS
COLORS MAIN MENU
-------------------------------------------------------

RECENT ARTICLES from Graphic Design BloG

Business Cards: Ideas and Inspiration, Part II
Today we continue looking at business cards that stand out, and here’s hoping you get some inspiration and ideas! After all, you only get one first impression, so your business card should be something that showcases the best of your design abilities. On Wednesday we looked at the use of interesting shapes, 3D business cards, [...]

Our Designers		SEARCH DESIGN SCHOOLS Zip Code: Subject: Degree: Online Campus Both

Business Cards: Ideas and Inspiration, Part I
As a graphic designer, your business card should do more than let people know how to contact you. If you’re interested in truly making a good first impression, the business card has got to stand out. Whether through color, design, die cutting, unique materials, 3D shapes, or actual samples of your work, a stand-out business [...]

Collaborating and Negotiating: Part II
Today, we’re looking at the collaboration side of negotiation and collaboration in graphic design. Because your work is ultimately for the client, at times you as the designer must be willing to compromise to reach a mutually agreeable goal. Here are some tips to help you collaborate with clients. Ways to Collaborate Listen. On page 28 [...]

Collaborating and Negotiating: Part I
It’s there in the design brief: the problem your client wants you to solve. But whether your objective is to create an advertisement, exhibition or public announcement, sometimes you and the client aren’t quite on the same page about what exactly the best design solution is. OC Photographer asked a great question about the collaborating [...]

When Things Go Bad: 5 Tips for Firing Clients
Most graphic designers will be in a similar situation at some point: the client will not pay, the client is never satisfied with your work yet won’t collaborate to fix it, or you simply realize that you and the client are not meshing. Regardless of when and why you need to fire a client, everyone [...]

Tips for Working with Clients: Approaching the Relationship
Whether you’re looking for design classes, design degree programs, internships or first jobs, it’s important to choose an option that will help you learn clear communication, especially when it comes to designer/client relationships. Knowing how to work with clients should always be part of a successful graphic design education. The following tips can help you [...]

Working for Good: Pro Bono Design, Part II
If you’re interested in doing pro bono graphic design work, it’s important to educate yourself about smart ways to do it. Once you’ve got some guidelines, you can approach your pro bono work with creativity; unless your client specifically requests it, you don’t need to limit yourself to a brochure. Consider these ideas for pro [...]

All Graphic Design Resources is a Directory Full of Tools for Graphic Designers

All Graphic Design Portal is a Graphic Design education directory with resources & articles for Graphic Designers & Web Designers including a Design forum, blog, graphics software tips, graphic design jobs, advice for new designers about design schools and education as well as tips for freelance graphic design business owners, and much more.