Förstå färg och webbfärgscheman

01 av 10

Förstå färg och webbfärgscheman

Det finns fyra grundläggande färgscheman som du kan använda för en webbplats. Varje sida i den här artikeln visar en bild av färgschemat och hur du kan skapa ett liknande schema i Photoshop.

• enfärgadAnvända färger av samma färgton. De kan ha olika färger eller nyanser beroende på hur mycket vit eller svart är tillagt.
• analogDetta använder färger som ligger nära varandra på färghjulet.
• komplementärDetta ses ofta som "motsatt" eftersom de två färgerna i ett komplementärt färgschema är mittemot varandra på färghjulet.
• triadicDessa färger är jämnt fördelade på färghjulet.

Alla färgscheman kommer att använda den här gula som basfärgen.

02 av 10

Monokromatisk webbfärgschema

Detta färgschema använder den mustardgula i min basfärg och lägger till några vita och svarta toner och skuggar ordningen i enlighet med detta.

• övre vänstra - basfärgen # ffe500
• övre högra - lagt till en fyllning på 50% vit för att få # fff280
• Nedre vänster - lagt till en fyllning på 75% vit för att få # fff8bf
• till höger - lagt till en fyllning på 50% svart för att få # 7f7200

Monokromatiska färgscheman är ofta det enklaste i ögonen på alla färgscheman. De milda förändringarna i nyanser och nyanser gör färgerna bättre i varandra. Använd detta färgschema för att göra din webbplats mer flytande och samlad.

03 av 10

Mer monokromatisk webbfärgschema

Lagt till en kvadrat på 20% svart för att få fler färger i systemet. Om du lägger svart eller vitt i dina färger kan du skapa en ny färg till paletten utan att störa tonens kant.

04 av 10

Analogt webbfärgschema

Detta färgschema tar den gula basfärgen och lägger till och subtraherar 30 grader till nyans i Photoshop färgpalett.

• övre vänstra - basfärgen # ffe500
• övre högra - +30 grader för att få # 99ff00
• Nedre vänster - -30 grader för att få # ff6600
• ner till höger - 100% vit #ffffff

Analoga färger kan fungera väldigt bra tillsammans, men ibland kan de kollidera. Var noga med att testa dessa system med fler än dig själv, din familj och dina vänner. När de arbetar skapar de en webbplats som är färggrannare än det monokromatiska systemet, men nästan som flytande.

05 av 10

Mer analogt webbfärgschema

Lagt till en kvadrat på 20% svart för att få fler färger i systemet.

06 av 10

Kompletterande webbfärgschema

Komplementära färgscheman, till skillnad från andra färgscheman, har vanligtvis bara två färger. Basfärgen och den är motsatt på färghjulet. Photoshop gör det enkelt att få den komplementära färgen - välj bara det färgområde som du vill ha komplementet till och tryck Ctrl-I. Photoshop kommer att invertera det för dig. Se till att du gör det på ett dubbelt lager så att du inte förlorar din basfärg.

• vänster - basfärgen # ffe500
• rätt - komplementet # 001aff

Kompletterande färgscheman är ofta mycket slående än andra färgscheman, så använd dem med omsorg. De används oftast i bitar som behöver stickas ut.

07 av 10

Kompletterande webbfärgschema

För att få den här versionen tillade jag 50% vit till den nedre halvan av färgerna och 30% svart till mittkorget. Som du kan se ger det dig några fler alternativ men det är fortfarande ett komplementärt färgschema.

08 av 10

Triadic Web Color Scheme

Triadiska färgscheman består av 3 färger som är mer eller mindre lika fördelade runt färghjulet. Eftersom ett färghjul är 360 grader använde jag igen färgtonen i färgplockaren för att lägga till och subtrahera 120 grader från basfärgen.

• övre vänstra - basfärgen # ffe500
• övre högra - +120 grader för att få # e500ff
• Nedre vänster - -120 grader för att få # 00ffe6
• ner till höger - 100% vit #ffffff

Triadiska färgscheman producerar ofta väldigt levande webbsidor. Men som kompletterande färgscheman kan de påverka människor annorlunda. Var noga med att testa.

Du kan också skapa tetradiska eller 4-färgs färgscheman, där färgerna är lika fördelade runt färghjulet.

09 av 10

Mer Triadic Web Color Scheme

Som med de andra exemplen, lade jag till en 30% svart torg i färgerna för att få de extra nyanserna.

10 av 10

Discordant Web Color Schemes

Skönheten är i ögat av den som ser det, men det är ett olyckligt faktum att inte alla färger går ihop. Discordant färger är färger som är längre än omkring 30 grader från varandra på färghjulet och är inte komplementära eller delar av en triad.

Discordant färgscheman kan vara mycket chockerande och bör bara användas för att generera uppmärksamhet. Kom ihåg att eftersom de här färgerna ofta kommer i konflikt, kanske inte den uppmärksamhet du får är precis vad du letar efter.