Share
Välkommen till den tionde lektionen i vår webbdesign för barn serie, allt om färg.
I denna handledning kommer vi att hoppa in i färgteori, olika sätt att använda färger i vår CSS, betydelsen av vissa färger och granska hur man väljer de perfekta färgerna för våra webbplatser. Vi slutar med några tips för att använda färg på webben.
Glöm inte att ställa några frågor i kommentarfältet längst ner på den här sidan!
Färgteori involverar många saker, men huvudfokuset är att titta på hur färger beter sig med varandra i en design. Vi kallar en grupp av färger som valts för att användas tillsammans a Färgpalett. En väl utformad färgpalett kommer att ha färger som komplement varandra och ha bra kontrast och vibrancy. Vi pratar om vad dessa ord betyder i ett ögonblick.
Välja rätt färger och veta varför vissa färger fungerar och andra inte kan avgöra om vår design ska fungera eller inte. Dåligt färgval kan göra vår webbplats svår att använda, eller vår text omöjlig att läsa och användaren lämnar vår hemsida.
Innan vi går för långt in i vår handledning kan vi prata om en grundläggande färgterminologi som vi kommer att nämna mycket. Vi använder dessa villkor för att hjälpa oss att bättre förstå vad som gör varje färg så unik.
en nyans är(mer eller mindre) ett objekts färg. När vi hänvisar till saker som "röd" eller "gul" talar vi om deras nyans.
Färg mättnad refererar till hur livlig, eller stark, en färg är. En låg mättnad skapar en färg som verkar spolas ut, medan en hög mättnad ger en mycket levande färg.
ljusstyrka hänvisar till ljus eller mörker i en färg. Detta går från svart (ingen ljusstyrka) till vit (full ljusstyrka).
Färghjulet är baserat på rött, gult och blått och är ganska känt bland konstnärer. Som designers, förstår vi hur färger skapas hjälper oss att få en bättre uppfattning om vilka färger komplement varandra och varför.
Vänsterhjulet på bilen nedan visar de tre primära färger. Med dessa tre färger kan vi skapa alla andra färger.
Hjulet till höger på bilen ovan visar sekundära färger för: färger som skapades genom att blanda de primära färgerna. Till exempel blir blå och gul grön, medan blå och röd gör lila.
Vänster färghjul på bilen nedan visar ytterligare ett lager: tertiära färger. Dessa är färger som skapats genom att blanda en primär och sekundär Färg. Blandning blå med lila till exempel skapar en mörk blåaktig lila.
Det finns ett antal färgsystem (sätt att beskriva färger) men endast vissa system är lämpliga för webben.
RGB står för "Red Green Blue" och beskriver hur vi ser färger på elektroniska skärmar. Dessa tre färger kan kombineras för att producera många andra färger. De tre värdena listas i ordning och varje intervall från 0 till 255.
kropp bakgrund: rgb (138.138.226);
Ovanstående CSS producerar en gul-orange bakgrund på en sida. Inom parentesen kan du se olika röda, gröna och blåa värden.
Vi har bara använt en färg hexadecimalt värdet hittills i serien, men vi kan använda en färg i vår CSS på många olika sätt.
Besök den här webbplatsen för en snabb lista över Hex- och RGB-värden för 500 specifika färger.
HSL står för "Hue Saturation Lightness" och värdet består av tre nummer i den ordningen.
Vi kan deklarera samma gul-orange på en sida på en sida med ett HSL-värde istället för färgens Hex- eller RGB-värden:
kropp bakgrund: hsl (43,100%, 57%);
Det första värdet här, 43, representerar en vinkel på en färgcirkel. Detta är vad som ger oss nyans. Röd är 0 eller 360 grader, medan grön är 120 grader och blå är 240 grader.
Det andra värdet ger oss en procentandel av mättnad för färgen, med 100% här fullständig mättnad.
Det slutliga värdet, lätthet, bestämmer hur ljus eller mörk färgtonen är. 100% är vit, 0% är svart, och allt däremellan kommer att sätta en kombination av de två.
Vilket värde vi använder i vår CSS är helt upp till oss, men HSL-värden är enklare att gissa genom att välja ett vinkelvärde som rör sig moturs från rött (0) och sedan lägger till procentandelen mättnad och ljushet vi vill ha.
Det finns ett begränsat antal färger som har namn som vi kan använda i vår CSS, inga nummer krävs.
kropp bakgrund: grön;
En fullständig lista över dessa färgnamn finns här.
Om vi någonsin har ett Hex-värde och behöver den färgens RGB- eller HSL-värde (eller vice versa!) Finns det några snygga verktyg som kommer att göra det här arbetet för oss, som rgb.to och Colorrrs.
Färger har mycket betydelse. Beroende på vilket land du bor i, kan en viss färg användas för att innebära fara, kärlek, lycka eller ont. Färger kan få användare att reagera med vissa känslor, så det är viktigt att ha en förståelse för detta för att kommunicera vårt meddelande till användaren.
Ta en titt på det här diagrammet som visar hur olika färger betyder olika saker i olika kulturer.
Låt oss kort diskutera några betydelser bakom de tre primära färgerna: gul, röd och blå.
Gul lockar en användares uppmärksamhet mer än någon annan färg och vanligtvis representerar lycka och solsken. Å andra sidan kan gult också betyda "försiktighet", som visas med många trafikskyltar.
Att använda gult på nätet kan vara mycket iögonfallande, så det är bäst att inte överanvända det och se till att vi bara markerar viktig information.
Beroende på vilket land du bor i kan rött betyda allt från fara, ilska, energi, kärlek och lycka. Vad det än betyder kan rött alltid användas för att representera en extrem känsla eller handling.
I webbdesign används rött ofta för att kommunicera radering eller fel. Det är en djärv färg som tar användarens uppmärksamhet så att den kan fungera som en accentfärg. För mycket röd på en sida kan vara överväldigande och det kan vara svårt att berätta vad som är särskilt viktigt.
Blå representerar både lugn och ledsen för det mesta och är en mycket populär färg på webben.
Den känsla som skapas genom att använda blått i mönster kommer i hög grad att bero på vilken nyans och nyanser vi väljer. Medan en mörkblå kommer att kommunicera styrka och tillförlitlighet kommer en ljusare blå att bli roligare och vänligare.
De flesta webbplatser kommer att ha en serie färger som fungerar för att ge hierarkin och ställa in känsla av en design. Vårt färgval kan vara lika viktigt som alla andra designbeslut som vi har gjort hittills, så vi måste ha ett bra öga för vilka färger som fungerar tillsammans, oavsett om vi har uppnått en god kontrast över hela sidan, och inte heller om färgerna har samma känsla eller mening som vårt innehåll.
Här är en annan titt på den viktigaste färgpalett som används i hela Tuts + Town-tutorialserien:
De ljusare färgerna används som bakgrund medan de mörkare färgerna används för text eller för att markera vissa avsnitt.
Generellt sett finns färger tvärs över från varandra på färghjulet anses vara glädjande för ögat. Dessa är komplementär färger - i kombination skapar de en grå färg. Det är möjligt att färger som ligger bredvid varandra på färghjulet fungerar bra tillsammans, men det kan ta lite mättnad och ljusstyrka justera för att få rätt parning.
Vi rörade också lite på kontrast i den tidigare handledningen om designens grunder, men låt oss kortfattat ta en ny titt.
Korrekt kontrast minskar ögonsträckan och gör visuell hierarki klar. Det bästa exemplet på bra kontra dåligt kontrakt kan ses genom att jämföra vissa kombinationer av bakgrunds- och textfärger.
Bilden ovan visar dålig kontrast till vänster med bättre kontrast till höger. Texten med dålig kontrast är svår att läsa och gör ont i våra ögon, vilket ger en suddig effekt.
Det finns verktyg som ger oss en lista med fina färgpaletter att välja mellan, vilket kan vara en realtidsparare och tjäna som en bra inspiration.
Coolors.co är en av de enklaste att använda färgväljare som är tillgängliga för tillfället.
Den förser oss med vackra färgpaletter som vi kan anpassa och ändra genom att trycka på mellanslagstangenten.
Adobe Color är ett annat färgvalverktyg som gör stor nytta av det fantastiska färghjulet vi pratade om tidigare.
Vi kan göra ändringar i färghjulet, bestämma paletten och göra ytterligare justeringar av varje enskild färg.
Adobe Color låter oss också spara våra favoritpaletter och bläddra bland populära, förvalda.
När du väljer färger för webben och tillämpar dem på element på sidan är det viktigt att hålla några saker i åtanke för att se till att dessa färger förbättrar användarens upplevelse.
Kontrast är så viktigt att du, när du är i tvivel, går med det säkraste alternativet. även om det verkar lite "tråkigt"! Några av de viktigaste uppgifterna som vi har som designers ser till att saker är funktionella, lätta att använda och lättlästa. Dålig kontrast hindrar våra användare från att kunna läsa vårt underbara innehåll.
Så medan det är okej att vara äventyrligt med dina färgval, bör dessa val aldrig ta bort hela webbplatsens funktion eller distrahera innehållet.
Verktyg för val av färgpalett, som Coolors, ger oss ofta fem färger. Fem färger tillåter oss att ha en eller två dominerande färger och några mindre dominerande färger för saker som knappar och länkar.
Med mycket mer än fem olika färger sätter vår design risk för att vara inkonsekvent och svår att följa; men vitt, svart och grått borde inte räknas här.
Det är väldigt viktigt att inte avvika från färganvändning som i allmänhet är acceptabelt av många människor. Till exempel används de flesta för att gröna betyder "add" och röd betyder "delete". Att omvända detta på vår hemsida skulle vara ett dåligt designbeslut eftersom det inte är vad som förväntas och förmodligen kommer att förvirra användarna.
I denna handledning diskuterade vi teorierna och reglerna för färg och hur man korrekt väljer och använder dem på webben. Varje färg bär sitt eget meddelande. Vi måste se till att det här meddelandet överensstämmer med vårt innehåll genom noga genomtänkta palettval.
Därefter avslutar vi vår serie med några slutliga tankar och olika sätt att vi kan dela vårt hårda arbete med vänner och familj online.
Vi ses runt om i staden!
Accentsconagua