Web Farvepaletter

Hvad er webfarvepaletter?

Farver er meget vigtige for webdesignere og grafiske designere. Designere beskriver de farver, vi beskriver som blå, røde og grønne i dagligdagen med koder som #fff002, #426215. Uanset hvilken type kodningsprojekt du er i gang med, vil du sandsynligvis begynde at arbejde med farver på et tidspunkt. Dette vil især være nyttigt, hvis du lærer at kode ved hjælp af HTML, som mange mennesker gør for at designe websider.

Hvad betyder hex-kode i farver?

Hexkode er en måde at repræsentere en farve i RGB-format ved at kombinere tre værdier. Disse farvekoder er en integreret del af HTML til webdesign og er fortsat en vigtig måde at repræsentere farveformater digitalt.

Hex-farvekoder begynder med pundtegnet eller hashtag (#) efterfulgt af seks bogstaver eller tal. De første to bogstaver/tal svarer til rød, de næste to til grøn og de sidste to til blå. Farveværdier er defineret i værdier mellem 00 og FF.

Tal bruges, når værdien er 1-9. Bogstaver bruges, når værdien er større end 9. For eksempel:

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

Hex-farvekoder og RGB-ækvivalenter

At huske nogle af de mest almindelige hex-farvekoder kan være nyttigt for at hjælpe dig med bedre at forudsige, hvilke andre farver der vil være, når du ser hex-farvekoden, ikke kun når du vil bruge de nøjagtige farver.

• Rød = #FF0000 = RGB (255, 0, 0)
• Grøn = #008000 = RGB (1, 128, 0)v
• Blå = #0000FF = RGB (0, 0, 255)
• Hvid = #FFFFFF = RGB (255.255.255)
• Elfenben = #FFFFF0 = RGB (255, 255, 240)
• Sort = #000000 = RGB (0, 0, 0)
• Grå = #808080 = RGB (128, 128, 128)
• Sølv = #C0C0C0 = RGB (192, 192, 192)
• Gul = #FFFF00 = RGB (255, 255, 0)
• Lilla = #800080 = RGB (128, 0, 128)
• Orange = #FFA500 = RGB (255, 165, 0)
• Bourgogne = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Kalk = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Blågrøn = #008080 = RGB (0, 128, 128)
• Oliven = #808000 = RGB (128, 128, 0)
• Marineblå = #000080 = RGB (0, 0, 128)

Hvorfor er hjemmesidefarver vigtige?

Du tror måske, at du ikke er påvirket af farver, men ifølge en undersøgelse siger 85 % af folk, at farve har en stor indflydelse på det produkt, de køber. Han siger også, at når nogle virksomheder ændrer deres knapfarver, har de bemærket en kraftig stigning eller et fald i deres konverteringer.

For eksempel bemærkede Beamax, et firma, der fremstiller projektionsskærme, en massiv stigning på 53,1 % i klik på røde links sammenlignet med blå links.

Farver har en enorm indflydelse, ikke kun på klik, men også på mærkegenkendelse. En undersøgelse af farvernes mentale påvirkning viste, at farver øger mærkegenkendelsen med i gennemsnit 80 %. For eksempel, når du tænker på Coca-Cola, vil du sikkert forestille dig levende røde dåser.

Hvordan vælger man et farveskema til hjemmesider?

For at kunne beslutte, hvilke farver du skal vælge på din hjemmeside eller webapplikation, skal du først have en god forståelse for, hvad du sælger. For eksempel, hvis du forsøger at opnå et high-end billede af højere kvalitet, er den farve, du skal vælge, lilla. Men hvis du ønsker at nå ud til et bredere publikum, blå; Det er en beroligende og blød farve, der er velegnet til mere følsomme emner som sundhed eller økonomi.

Eksemplerne ovenfor er blevet bevist af mange undersøgelser. Men den farve du vælger til din hjemmeside afhænger af kompleksiteten af ​​dit design og typerne af farvekombinationer. For eksempel, hvis du bruger en monokrom webdesignpalette, kan du have brug for syv eller flere nuancer af den farve for at få nok variation på skærmen. Du skal indstille farver for visse dele af dit websted, såsom tekst, baggrunde, links, svævefarver, CTA-knapper og overskrifter.

Nu "Hvordan vælger man et farveskema til websteder og webapplikationer?" Lad os tage et kig på det trin for trin:

1. Vælg dine primære farver.

Den bedste måde at vælge en primær farve på er at undersøge de farver, der matcher stemningen i dit produkt eller din tjeneste.

Nedenfor har vi listet nogle eksempler til dig:

• Rød: Det betyder spænding eller lykke.
• Orange: Det angiver en venlig, sjov tid.
• Gul betyder optimisme og lykke.
• Grøn: Det betyder friskhed og natur.
• Blå: står for pålidelighed og sikkerhed.
• Lilla: Repræsenterer et fornemt mærke med en historie af kvalitet.
• Brun: Det betyder et pålideligt produkt, der kan bruges af alle.
• Sort betyder luksus eller elegance.
• Hvid: Henviser til stilfulde, brugervenlige produkter.

2. Vælg dine ekstra farver.

Vælg en eller to ekstra farver, der komplementerer din hovedfarve. Disse skal ideelt set være de farver, der gør din hovedfarve "fantastisk".

3. Vælg en baggrundsfarve.

Vælg en baggrundsfarve, der vil være mindre "aggressiv" end din primære farve.

4. Vælg skriftfarve.

Vælg en farve til teksten på din hjemmeside. Bemærk, at en solid sort skrifttype er sjælden og ikke anbefales.

De bedste webfarvepaletter for designere

Hvis du ikke kan finde den farve, du leder efter i Softmedals web-farvepaletter-kollektion, kan du tage et kig på de alternative farvesider nedenfor:

Farvevalg er en lang proces og kræver ofte en del finjustering for at finde de rigtige farver. På dette tidspunkt kan du spare tid ved at bruge 100 % gratis webapplikationer, der skaber de relevante farveskemaer fra bunden.

1. Palet

Paletton er en webapplikation, som alle webdesignere bør kende. Indtast blot en frøfarve, og appen klarer resten for dig. Paletton er et pålideligt valg og en fantastisk webapp for dem, der ikke ved noget om design og for begyndere.

2. Farvesikker

Hvis WCAG er et problem i din designproces, er Color Safe det bedste værktøj at bruge. Med denne webapplikation kan du skabe farveskemaer, der blander perfekt og tilbyder rig kontrast i henhold til WCAG-retningslinjer.

Ved at bruge Color Safe-webappen sikrer du, at dit websted overholder WCAG-retningslinjerne og er fuldt tilgængeligt for alle.

3. Adobe Color CC

Det er et af de gratis Adobe-værktøjer skabt til offentlig brug. Det er en omfattende webapplikation, hvor alle kan lave farveskemaer fra bunden. Det giver dig mulighed for at vælge mellem mange forskellige farvemodeller, der passer bedst til dine behov. Interfacet kan virke lidt forvirrende i starten, men når du først har vænnet dig til det, skulle du ikke have noget problem med at vælge smukke farvemuligheder.

4. Stemning

Ambiance, en gratis webapplikation, tilbyder præfabrikerede webfarvepaletter fra andre farvesider på nettet. Det fungerer som en traditionel web-app, hvor du kan gemme farver på din profil og oprette dine egne skemaer fra bunden. Alle disse webfarvepaletter kommer fra Colorlovers. Ambiance-grænsefladen gør browsing lettere og sætter mere fokus på farvesammenspil til UI-design.

5. 0 til 255

0to255 er ikke ligefrem en farveskemagenerator, men den kan hjælpe dig med at finjustere eksisterende farveskemaer. Webappen viser dig alle de forskellige nuancer, så du kan mikse og matche farver med det samme.

Hvis du synes, det er svært at lave et brugbart farveskema, kan du gennemgå nogle af ovenstående applikationer.

De bedste webfarvepaletter

Følgende websteder bruger en række forskellige webfarvepaletter med stor effekt. De er nøje udvalgt for de følelser, de fremkalder, og de følelser, de formidler.

1. Odopod

Odopod blev designet med en monoton farvepalet, men havde til formål at undgå at se kedeligt ud med en gradient på sin hjemmeside. Stor typografi giver stor kontrast. Det er tydeligt, hvor besøgende vil have dem til at klikke.

2. Toris øje

Tori's Eye er et godt eksempel på et monokromt farveskema. Her ses effekterne af en enkel, men kraftfuld farvepalet centreret omkring grønne nuancer. Dette farveskema er normalt nemt at trække af, da en nuance af en farve næsten altid vil fungere med en anden nuance af samme farve.

3. Ost Survival Kit

Rød er en ekstremt populær farve til en hjemmesides farvepalet. Den kan formidle en rig blanding af følelser, hvilket gør den alsidig. Som du kan se på Cheese Survival Kit-webstedet, er det særligt potent, når det bruges i små doser. Rød blødgøres af mere neutrale farver, og blå hjælper med CTA'er og andre områder, hvor virksomheden ønsker at tiltrække den besøgendes opmærksomhed.

4. Ahrefs

Ahrefs er et eksempel på en hjemmeside, der frit bruger farvepaletten. Mørkeblå fungerer som den fremherskende farve, men variationer findes overalt på stedet. Det samme gælder farverne orange, pink og turkis.

Oftest stillede spørgsmål om farver

1. Hvad er den bedste farve til en hjemmeside?

Blå er absolut det sikreste valg, da det er den mest populære farve med 35%. Men hvis dine konkurrenter alle bruger blå, kan det give mening at "differentiere" dit tilbud og dit brand. Men du skal sørge for, at du ikke overvælder besøgende.

2. Hvor mange farver skal hjemmesiden have?

Overvej, at 51 % af mærkerne har monokrome logoer, 39 % bruger to farver, og kun 19 % af virksomhederne foretrækker fuldfarvelogoer. Herfra kan du se, at hjemmesider med 1, 2 og 3 farver giver mere mening end at forsøge at lave en hjemmeside med regnbuefarver. Men mærker som Microsoft og Google tror på fordelen ved at arbejde med flere farver, da de bruger mindst 4 solide farver i deres design.

3. Hvor skal jeg bruge farverne?

Iøjnefaldende farver skal bruges sparsomt, ellers vil de miste deres effekt. Denne effekt skal være i konverteringspunkter som "Køb nu"-knapper.