En introduktion till färgteori för webbdesigners

Färgteori i webbdesign: Rätt färgpalett för din webbplats

Vi kommer ihåg färgteorin i konstlektioner: vikten av färghjul, temperatur och kroma. Som webbdesigner arbetar du med färgteori varje dag – oavsett om det är omedvetet eller medvetet. I det här inlägget ska jag visa dig hur du använder rätt principer och verktyg för att skapa bra färgkombinationer för ditt nästa webbprojekt.

Färgteori: färgordningen

De första posterna av färgteori, även kallad Färgteori, och färgcirkeln går tillbaka åtminstone till början av 1600-talet. Framväxten av färger, reflektion av ljus, processen i det mänskliga ögat – allt detta har upptagit mänskligheten under lång tid.

Vi designers är ofta främst visuella typer. Skapandet av färgkombinationer uppstår ofta från tarmen. Vi ser och analyserar ständigt färgerna omkring oss. Detta resulterar i ett intuitivt sätt att hantera färger. 

De faktiska kunskaperna om färger och deras effekter är dock inte bara oumbärliga för att kunna förklara färgvalet och färgarrangemanget. Det är också viktigt att fatta beslut som avviker från normen.

För att hitta de optimala färgkombinationerna för dina kunder och webbplatser är en sund kunskap om färgteori oundviklig.

Som designers har vi en avgörande fördel jämfört med utskriftsmedierna: Hur många färger du använder och vilka toner du väljer påverkar inte kostnaden för produkten. Detta gäller dock bara så länge ditt projekt förblir digitalt.

Du omfattas inte heller av de tekniska begränsningar som vi har med tryckta medier. Som designer ger detta dig den underbara friheten att utvecklas runt omkring.

Samtycke*
Det här fältet är avsett för validering och bör inte ändras.

Primära, sekundära och tertiära färger

Våra skärmar är vanligtvis baserade på RGB (Röd, Grön, Blå) - även känd som additivt färgsystem. Som en tumregel kan man säga att allt som utstrålar bakgrundsljus är baserat på additivt färgsystem. I den här strukturen använder vi de primära färgerna som utgångspunkt. Vitt skapas genom att kombinera alla färger, medan svart representerar frånvaron av färgerna.

Med hjälp av exemplet med en enkel färgcirkel är primärfärgerna gula, röda och blå. Sekundära färger uppstår när du blandar primära färger med varandra. Tertiära färger bildas av blandningar som innehåller primära och sekundära färger.

Färgteori i webbdesign
Färgcirkeln beskriver och delar färger.

Nyanser, nyanser, nyanser och krom

Nyanser, eller nyans, beskriver de omixade sex primära och sekundära färgerna:

  • Nyanser beskriver nyansen som kommer från att lägga till vitt till en färg.
  • Nyanser använder samma princip som nyanser – men här blandar vi svart.
  • Chroma, även kallad mättnad eller lera, kallar vi blandning av nyanser med grå eller neutrala färger som vitt och svart. Om vi följer denna definition tillhör nyanser och nyanser också Chroma.

Temperatur och kontrast

Färgteori i webbdesign
Färgtemperatur och kontrast

Du kan också klassificera färgerna i temperaturer. Det finns några tumregler:

Varma färger ser mer dominerande ut när de kombineras med kalla färger.

Detta gör att du också kan förmedla känslan av djup. Kalla färger ser därför längre bort än varma. Färger av intensiv värme kan också få kalla färger att se ännu kallare ut.

Grått och nyanser av grått, vitt och svart tillhör gruppen neutrala färger. Beige och brunt tilldelas också ofta till de neutrala färgerna. Personligen håller jag bara delvis med om detta, eftersom en grå nyans definitivt kan se varm eller kall ut. Jag räknar också beige och brunt bland de varma tonerna. För mig definierar neutrala färger sig själva som vita och svarta, och alla nyanser av grått däremellan som inte har lagts till i någon annan färg.

Neutrala färger i sig verkar ganska ointressanta, varför de behöver minst en färg för att sticka ut. 

Undantag bekräftar regeln här, eftersom det finns några minimalistiska svartvita layouter som gör utan ytterligare färger. Brun och beige kan också se mycket attraktiv ut som den dominerande färgen, e.B. i en monokromatisk design.

Primära färger står i kontrast till varandra.

Det finns ett annat sätt att skapa kontrast. Genom att titta på färgerna som rör sig ungefär tre fält isär på färghjulet. Dessa parningar kan enkelt skapa disharmoni. För att de biter varandra. Men när de används korrekt, till exempel som en uppmaning, kan de ge din design en intressant kontrast.

8 Principer för harmoniska färgpaletter

Kompletterande färger

Kompletterande färger är två färger som är direkt motsatta, kombineras i detta koncept, som i exemplet med Youtube Culture & Trends Report.

Färgteori i webbdesign
Kompletterande färger i färgcirkeln

Två kompletterande färger sticker ut från varandra som mest. Detta skapar ett men harmoniskt färgschema med hög kontrast. Dessa mönster är lämpliga för dynamiska, uppmärksamhetstagande mönster. Därför är det viktigt att se till att detta också återspeglar den produkt du vill kommunicera.

Triangel kombination

Triangelkombinationen beskriver tre färger som är på samma avstånd från varandra i färgcirkeln.

I likhet med de tidigare kombinationerna är den här också ganska enkel och lätt att använda. Det erbjuder mer mångfald, men det är på den säkra sidan. Det finns knappast någon harmonisk sammansättning av grundprincipen. Dessa färgpaletter används särskilt väl på webbplatser, som är tänkta att glädja ett brett spektrum av användare.

Du bör fortfarande välja en färg som tar över dominansen av design. Detta säkerställer en tydlig design och mer harmoni. Detta visas också av exemplet med Slaveryfootprint.org.

Färgteori i webbdesign
Triangelkombinationen med exemplet på en webbplats
Färgteori i webbdesign
Triangelkombinationen i färgcirkeln

Uppdelade kompletterande färger

Uppdelade kompletterande färger beskriver ett liknande koncept som de kompletterande färgerna. Endast en sida är uppdelad här. Istället för den kompletterande primära färgen använder du nu de omgivande tertiära färgerna. Detta intervall erbjuder fler kombinationsalternativ.

Att lägga till en tredje färg i det kompletterande schemat ger lite mer balans till layouten. Denna kombination används ganska ofta på webben. Färgschemat behöver inte vara lika högt som i det här exemplet. 

Den tredje färgen används ofta av designers: som accentfärg och används mycket sparsamt. Med den här principen kan du ge dina webbplatser en mild kontrast.

Färgteori i webbdesign
Uppdelade kompletterande färger i färgcirkeln
Färgteori i webbdesign
Delade kompletterande färger på en webbplats

Kombination av kvadratisk färg

I likhet med det tresidiga konceptet kombinerar den kvadratiska färgkombinationen fyra färger. Detta är av alla kombinationer som hittills presenterats, vilket är det svåraste att behärska. 

Även här kombinerar vi två par kompletterande färger. Känslighet i fördelningen av hierarkin krävs dock här. På denna webbplats används den röda tonen sparsamt för att förhindra att det röda dominerar de återstående färgerna. Istället användes en kallblå och en neutral beige som dominerande färger.

När du använder denna princip bör du vara noga med att använda varma och kalla färger i harmoni med varandra.

Färgteori i webbdesign
Den fyrkantiga färgkombinationen i färgcirkeln
Färgteori i webbdesign
Kvadratisk färgkombination på en webbplats

Fyrkantiga uppdelade kompletterande färger

Består av två intilliggande färger och deras kompletterande färger.

Med dessa färger kan du skapa en färgpalett som ger dig den tilltalande kontrasten av kompletterande färger samtidigt som den är mer varierad, som i det här exemplet.

Analog

Analoga färgpaletter är två eller flera färger som ligger sida vid sida på färgcirkeln. Analoga färgpaletter är mindre kontrasterade än de kompositioner som beskrivs ovan, men missa inte deras effekt. 

För din webbplats är det ett bra val att utveckla en hierarki och använda färgerna i enlighet därmed. I följande exempel valde Crips Studios lila som sin mest dominerande färg. Denna färg är då också den som sätter stämningen på din webbplats.

Färgteori i webbdesign
Analoga färgpaletter i färgcirkeln
Färgteori i webbdesign
Analoga färgpaletter på en webbplats

Monokrom

Monokrom beskriver olika toner och/eller krom av samma färg. Detta är det enklaste sättet att uppnå en harmonisk färgkombination. Väl tillämpad kan den fortfarande sticka ut från andra sidor.

Användningen av monokroma färger förstärker ytterligare den ursprungliga färgens känslomässiga effekt och skapar också elegans. Minimala mönster drar nytta av monokroma färgpaletter. Du bör också veta att monokroma webbplatser är lågkontrast.

Färgteori i webbdesign
Monokroma färger på en webbplats

Krom och nyans

Användning av färger med liknande krom- eller nyansvärden. I exemplet med Bliss skapades harmoni genom konstant användning av pastellfärger.

Färgteori i webbdesign
Krom och nyans är viktiga i webbdesign.

Inspiration & Verktyg för färgteori

Vid det här laget är det mer av en klassiker och fortfarande ett av mina favoritverktyg för att skapa färgpalett: Adobe Color Wheel.

Som en ny funktion kan du också kontrollera ditt val för att se om det fortfarande är tillräckligt högkontrast av användare som lider av färgblindhet.

  • Eggradients ger en rad inspirationskällor för övertoningar och matchande CSS-stilar.
  • Khroma är ett AI-baserat webbläsarprogram som lär sig vilka färger som ska berätta för dig i synnerhet och skapar motsvarande kombinationer. Rekommenderas definitivt som en snabb inspiration för färger och kombinationer.
  • Coolorer är en plattform där du kan bli inspirerad och skapa färgpaletter själv. Det erbjuder också tillägg för Chrome och Adobe.

I likhet med Adobe Color Wheel fungerar Colourco också. Du kan ange principen för att din färgpalett ska skapas. Med enkel hovring kan du sedan testa och skapa färgkombinationer. Du kan ladda ned ditt val som en Sass-formatmall eller .png.

Färgteori i webbdesign

Dessutom erbjuder en attraktivt utformad webbplats för att utforska olika färger och deras effekter dig Emotive Feels.

Dina frågor om färgteori i webbdesign

Vad är din erfarenhet av färger inom webbdesign? Vilka frågor har du till Sonja? Låt oss veta i kommentarerna! Du vill veta mer om nya inlägg till Raidboxes erfara? Följ oss sedan på Twitter, Facebook eller via vårt nyhetsbrev.

Tyckte du om artikeln?

Med din recension hjälper du oss att förbättra vårt innehåll ytterligare.

Skriva en kommentar

Din e-postadress kommer inte att publiceras.