Webbfärgpaletter

Vad är webbfärgpaletter?

Färger är mycket viktiga för webbdesigners och grafiska designers. Designers beskriver färgerna vi beskriver som blå, röd och grön i det dagliga livet med koder som #fff002, #426215. Oavsett vilken typ av kodningsprojekt du genomför, kommer du sannolikt att börja arbeta med färger någon gång. Detta kommer att vara särskilt användbart om du lär dig att koda med HTML, som många gör för att designa webbsidor.

Vad betyder hex-kod i färger?

Hexkod är ett sätt att representera en färg i RGB-format genom att kombinera tre värden. Dessa färgkoder är en integrerad del av HTML för webbdesign och är fortfarande ett viktigt sätt att representera färgformat digitalt.

Hexfärgkoder börjar med pundtecknet eller hashtaggen (#) följt av sex bokstäver eller siffror. De två första bokstäverna/siffrorna motsvarar rött, de två nästa till grönt och de två sista med blått. Färgvärden definieras i värden mellan 00 och FF.

Siffror används när värdet är 1-9. Bokstäver används när värdet är större än 9. T.ex:

• A = 10
• B = 11
• C = 12
• D = 13
• E = 14
• F = 15

Hexfärgkoder och RGB-motsvarigheter

Att memorera några av de vanligaste hex-färgkoderna kan vara till hjälp för att hjälpa dig att bättre förutse vilka andra färger som kommer att bli när du ser hex-färgkoden, inte bara när du vill använda de exakta färgerna.

• Röd = #FF0000 = RGB (255, 0, 0)
• Grön = #008000 = RGB (1, 128, 0)v
• Blå = #0000FF = RGB (0, 0, 255)
• Vit = #FFFFFF = RGB (255 255 255)
• Elfenben = #FFFFF0 = RGB (255, 255, 240)
• Svart = #000000 = RGB (0, 0, 0)
• Grå = #808080 = RGB (128, 128, 128)
• Silver = #C0C0C0 = RGB (192, 192, 192)
• Gul = #FFFF00 = RGB (255, 255, 0)
• Lila = #800080 = RGB (128, 0, 128)
• Orange = #FFA500 = RGB (255, 165, 0)
• Burgundy = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Blågrönt = #008080 = RGB (0, 128, 128)
• Olive = #808000 = RGB (128, 128, 0)
• Marinblå = #000080 = RGB (0, 0, 128)

Varför är webbplatsfärger viktiga?

Du kanske tror att du inte påverkas av färger, men enligt en studie säger 85% av människor att färg har stor inverkan på produkten de köper. Han säger också att när vissa företag ändrar sina knappfärger har de märkt en kraftig ökning eller minskning av sina konverteringar.

Till exempel märkte Beamax, ett företag som tillverkar projektionsskärmar, en massiv ökning på 53,1 % av klick på röda länkar jämfört med blå länkar.

Färger har en enorm inverkan inte bara på klick utan också på varumärkeskännedom. En studie om färgers mentala inverkan fann att färger ökar varumärkets igenkänning med i genomsnitt 80 %. Till exempel, när du tänker på Coca-Cola, kommer du förmodligen att föreställa dig livfulla röda burkar.

Hur väljer man ett färgschema för webbplatser?

För att kunna bestämma vilka färger du ska välja på din hemsida eller webbapplikation måste du först ha en god förståelse för vad du säljer. Om du till exempel försöker uppnå en högkvalitativ bild, är färgen du bör välja lila. Men om du vill nå en bredare publik, blå; Det är en lugnande och mjuk färg som lämpar sig väl för mer känsliga ämnen som hälsa eller ekonomi.

Exemplen ovan har bevisats av många studier. Men färgen du väljer för din webbplats beror på komplexiteten i din design och typerna av färgkombinationer. Om du till exempel använder en svartvit webbdesignpalett kan du behöva sju eller fler nyanser av den färgen för att få tillräckligt med variation på skärmen. Du måste ställa in färger för vissa delar av din webbplats, som text, bakgrunder, länkar, svävningsfärger, CTA-knappar och rubriker.

Nu "Hur väljer man ett färgschema för webbplatser och webbapplikationer?" Låt oss ta en titt på det steg för steg:

1. Välj dina primära färger.

Det bästa sättet att bestämma en primärfärg är att undersöka de färger som matchar stämningen i din produkt eller tjänst.

Nedan har vi listat några exempel för dig:

• Röd: Det betyder spänning eller lycka.
• Orange: Det betecknar en vänlig, rolig tid.
• Gult betyder optimism och lycka.
• Grönt: Det betyder friskhet och natur.
• Blå: står för pålitlighet och säkerhet.
• Lila: Representerar ett framstående varumärke med en historia av kvalitet.
• Brun: Det betyder en pålitlig produkt som kan användas av alla.
• Svart betyder lyx eller elegans.
• Vit: Syftar på snygga, användarvänliga produkter.

2. Välj dina ytterligare färger.

Välj en eller två extra färger som kompletterar din huvudfärg. Dessa bör helst vara de färger som gör din huvudfärg "fantastisk".

3. Välj en bakgrundsfärg.

Välj en bakgrundsfärg som är mindre "aggressiv" än din primära färg.

4. Välj teckensnittsfärg.

Välj en färg för texten på din webbplats. Observera att ett heltäckande svart teckensnitt är sällsynt och rekommenderas inte.

De bästa webbfärgpaletterna för designers

Om du inte kan hitta den färg du letar efter i Softmedals webbfärgpaletter, kan du ta en titt på de alternativa färgsajterna nedan:

Färgval är en lång process och kräver ofta mycket finjustering för att hitta rätt färger. Vid det här laget kan du spara tid genom att använda 100 % gratis webbapplikationer som skapar relevanta färgscheman från grunden.

1. Paletton

Paletton är en webbapplikation som alla webbdesigners borde känna till. Ange bara en fröfärg och appen gör resten åt dig. Paletton är ett pålitligt val och en fantastisk webbapp för dig som inte kan något om design och för nybörjare.

2. Färgsäker

Om WCAG är något problem i din designprocess är Color Safe det bästa verktyget att använda. Med denna webbapplikation kan du skapa färgscheman som smälter perfekt och erbjuder rik kontrast enligt WCAGs riktlinjer.

Genom att använda webbappen Color Safe säkerställer du att din webbplats följer WCAG:s riktlinjer och är fullt tillgänglig för alla.

3. Adobe Color CC

Det är ett av de kostnadsfria Adobe-verktygen som skapats för allmänt bruk. Det är en utarbetad webbapplikation där vem som helst kan skapa färgscheman från grunden. Det låter dig välja mellan många olika färgmodeller som bäst passar dina behov. Gränssnittet kan verka lite förvirrande till en början, men när du väl har vant dig bör du inte ha några problem med att välja vackra färgalternativ.

4. Stämning

Ambiance, en gratis webbapplikation, erbjuder färdiga webbfärgpaletter från andra färgsajter på webben. Det fungerar som en traditionell webbapp där du kan spara färger i din profil och skapa dina egna scheman från grunden. Alla dessa webbfärgpaletter kommer från Colorlovers. Ambiance-gränssnittet gör det enklare att surfa och lägger mer fokus på färgsamspel för UI-design.

5. 0 till 255

0to255 är inte precis en färgschemagenerator, men det kan hjälpa dig att finjustera befintliga färgscheman. Webbappen visar dig alla olika nyanser så att du kan blanda och matcha färger direkt.

Om du tycker att det är svårt att skapa ett användbart färgschema kan du granska några av ovanstående applikationer.

De bästa webbfärgpaletterna

Följande webbplatser använder en mängd olika webbfärgpaletter med stor effekt. De är noga utvalda för de känslor de väcker och de känslor de förmedlar.

1. Odopod

Odopod designades med en monoton färgpalett, men syftade till att undvika att se tråkig ut med en gradient på sin hemsida. Stor typografi ger stor kontrast. Det är tydligt var besökarna vill att de ska klicka.

2. Toris öga

Tori's Eye är ett bra exempel på ett monokromt färgschema. Här syns effekterna av en enkel men kraftfull färgpalett centrerad kring gröna nyanser. Denna färgsättning är vanligtvis lätt att ta bort, eftersom en nyans av en färg nästan alltid fungerar med en annan nyans av samma färg.

3. Ost Survival Kit

Rött är en extremt populär färg för en webbsidas färgpalett. Den kan förmedla en rik blandning av känslor, vilket gör den mångsidig. Som du kan se på Cheese Survival Kit-webbplatsen är den särskilt potent när den används i små doser. Rött mjukas upp av mer neutrala färger och blått hjälper till med CTA och andra områden där verksamheten vill dra besökarens uppmärksamhet.

4. Ahrefs

Ahrefs är ett exempel på en webbplats som använder färgpaletten fritt. Mörkblått fungerar som den dominerande färgen, men variationer finns över hela platsen. Detsamma gäller färgerna orange, rosa och turkos.

De vanligaste frågorna om färger

1. Vilken är den bästa färgen för en webbplats?

Blått är definitivt det säkraste valet då det är den mest populära färgen med 35%. Men om dina konkurrenter alla använder blått kan det vara vettigt att "särskilja" ditt erbjudande och ditt varumärke. Men du måste se till att du inte överväldigar besökarna.

2. Hur många färger ska hemsidan ha?

Tänk på att 51 % av varumärkena har monokroma logotyper, 39 % använder två färger och endast 19 % av företagen föredrar helfärgslogotyper. Härifrån kan du se att webbplatser med 1, 2 och 3 färger är mer meningsfulla än att försöka skapa en webbplats med regnbågsfärger. Varumärken som Microsoft och Google tror dock på fördelen med att arbeta med fler färger eftersom de använder minst 4 solida färger i sin design.

3. Var ska jag använda färgerna?

Iögonfallande färger bör användas sparsamt, annars kommer de att förlora sin effekt. Denna effekt måste finnas i konverteringspunkter som "Köp nu"-knappar.