Webkleurpalette

Wat is webkleurpalette?

Kleure is baie belangrik vir webontwerpers en grafiese ontwerpers. Ontwerpers beskryf die kleure wat ons beskryf as blou, rooi en groen in die daaglikse lewe met kodes soos #fff002, #426215. Maak nie saak watter tipe koderingsprojek jy aanpak nie, jy sal waarskynlik een of ander tyd met kleure begin werk. Dit sal veral nuttig wees as jy leer om met HTML te kodeer, soos baie mense doen om webblaaie te ontwerp.

Wat beteken Hex-kode in kleure?

Hekskode is 'n manier om 'n kleur in RGB-formaat voor te stel deur drie waardes te kombineer. Hierdie kleurkodes is 'n integrale deel van HTML vir webontwerp en bly 'n belangrike manier om kleurformate digitaal voor te stel.

Hekskleurkodes begin met die pondteken of hutsmerk (#) gevolg deur ses letters of syfers. Die eerste twee letters/syfers stem ooreen met rooi, die volgende twee met groen en die laaste twee met blou. Kleurwaardes word gedefinieer in waardes tussen 00 en FF.

Getalle word gebruik wanneer die waarde 1-9 is. Letters word gebruik wanneer die waarde groter as 9 is. Bv:

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

Hekskleurkodes en RGB-ekwivalente

Die memorisering van sommige van die mees algemene hekskleurkodes kan nuttig wees om jou te help om beter te voorspel wat ander kleure sal wees wanneer jy die hekskleurkode sien, nie net wanneer jy daardie presiese kleure wil gebruik nie.

• Rooi = #FF0000 = RGB (255, 0, 0)
• Groen = #008000 = RGB (1, 128, 0)v
• Blou = #0000FF = RGB (0, 0, 255)
• Wit = #FFFFFF = RGB (255 255 255)
• Ivoor = #FFFFF0 = RGB (255, 255, 240)
• Swart = #000000 = RGB (0, 0, 0)
• Grys ​​= #808080 = RGB (128, 128, 128)
• Silwer = #C0C0C0 = RGB (192, 192, 192)
• Geel = #FFFF00 = RGB (255, 255, 0)
• Pers = #800080 = RGB (128, 0, 128)
• Oranje = #FFA500 = RGB (255, 165, 0)
• Boergondië = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Kalk = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Blangroen = #008080 = RGB (0, 128, 128)
• Olyf = #808000 = RGB (128, 128, 0)
• Vlootblou = #000080 = RGB (0, 0, 128)

Waarom is webwerfkleure belangrik?

Jy dink dalk dat jy nie deur kleure geraak word nie, maar volgens ’n studie sê 85% van mense dat kleur ’n groot impak het op die produk wat hulle koop. Hy sê ook dat wanneer sommige maatskappye hul knoppiekleure verander, hulle 'n skerp toename of afname in hul omskakelings opgemerk het.

Byvoorbeeld, Beamax, 'n maatskappy wat projeksieskerms vervaardig, het 'n massiewe toename van 53,1% in kliks op rooi skakels opgemerk in vergelyking met blou skakels.

Kleure het 'n groot impak, nie net op kliks nie, maar ook op handelsmerkherkenning. ’n Studie oor die geestelike impak van kleure het bevind dat kleure handelsmerkherkenning met gemiddeld 80% verhoog. Byvoorbeeld, as jy aan Coca-Cola dink, sal jy jou waarskynlik lewendige rooi blikkies voorstel.

Hoe om 'n kleurskema vir webwerwe te kies?

Om te besluit watter kleure jy op jou webwerf of webtoepassing moet kies, moet jy eers 'n goeie begrip hê van wat jy verkoop. Byvoorbeeld, as jy probeer om 'n hoër kwaliteit, hoë-end beeld te verkry, is die kleur wat jy moet kies pers. As jy egter 'n wyer gehoor wil bereik, blou; Dit is 'n gerusstellende en sagte kleur wat goed geskik is vir meer sensitiewe onderwerpe soos gesondheid of finansies.

Die voorbeelde hierbo is deur baie studies bewys. Maar die kleur wat u vir u webwerf kies, hang af van die kompleksiteit van u ontwerp en die tipe kleurkombinasies. Byvoorbeeld, as jy 'n monochrome webontwerppalet gebruik, sal jy dalk sewe of meer skakerings van daardie kleur nodig hê om genoeg verskeidenheid op die skerm te kry. Jy moet kleure vir sekere dele van jou werf stel, soos teks, agtergronde, skakels, sweefkleure, GTA-knoppies en opskrifte.

Nou "Hoe om 'n kleurskema vir webwerwe en webtoepassings te kies?" Kom ons kyk stap vir stap daarna:

1. Kies jou primêre kleure.

Die beste manier om op 'n primêre kleur te besluit, is om die kleure te ondersoek wat by die stemming van jou produk of diens pas.

Hieronder het ons 'n paar voorbeelde vir jou gelys:

• Rooi: Dit beteken opgewondenheid of geluk.
• Oranje: Dit dui op 'n vriendelike, prettige tyd.
• Geel beteken optimisme en geluk.
• Groen: Dit beteken varsheid en natuur.
• Blou: staan ​​vir betroubaarheid en versekering.
• Pers: Verteenwoordig 'n vooraanstaande handelsmerk met 'n geskiedenis van kwaliteit.
• Bruin: Dit beteken 'n betroubare produk wat deur almal gebruik kan word.
• Swart beteken luukse of elegansie.
• Wit: Verwys na stylvolle, gebruikersvriendelike produkte.

2. Kies jou bykomende kleure.

Kies een of twee bykomende kleure wat jou hoofkleur aanvul. Dit moet ideaal gesproke die kleure wees wat jou hoofkleur "stunning" maak.

3. Kies 'n agtergrondkleur.

Kies 'n agtergrondkleur wat minder "aggressief" as jou primêre kleur sal wees.

4. Kies die lettertipe kleur.

Kies 'n kleur vir die teks op jou webwerf. Let daarop dat 'n soliede swart lettertipe skaars is en nie aanbeveel word nie.

Die beste webkleurpalette vir ontwerpers

As jy nie die kleur waarna jy soek in die Softmedal-webkleurpaletteversameling kan vind nie, kan jy na die alternatiewe kleurwebwerwe hieronder kyk:

Kleurkeuse is 'n lang proses en verg dikwels baie fynverstelling om die regte kleure te vind. Op hierdie stadium kan jy tyd bespaar deur 100% gratis webtoepassings te gebruik wat die relevante kleurskemas van nuuts af skep.

1. Paletton

Paletton is 'n webtoepassing wat alle webontwerpers behoort te ken. Voer net 'n saadkleur in en die toepassing doen die res vir jou. Paletton is 'n betroubare keuse en 'n wonderlike webtoepassing vir diegene wat niks weet van ontwerp nie en vir beginners.

2. Kleur Veilig

As WCAG enige kommer in jou ontwerpproses is, is Color Safe die beste hulpmiddel om te gebruik. Met hierdie webtoepassing kan jy kleurskemas skep wat perfek saamsmelt en ryk kontras bied volgens WCAG-riglyne.

Deur die Color Safe-webtoepassing te gebruik, verseker jy dat jou werf aan WCAG-riglyne voldoen en ten volle toeganklik is vir almal.

3. Adobe Color CC

Dit is een van die gratis Adobe-instrumente wat vir publieke gebruik geskep is. Dit is 'n uitgebreide webtoepassing waar enigiemand kleurskemas van nuuts af kan skep. Dit laat jou toe om uit baie verskillende kleurmodelle te kies wat die beste by jou behoeftes pas. Die koppelvlak kan aanvanklik 'n bietjie verwarrend lyk, maar sodra jy daaraan gewoond is, behoort jy geen probleem te hê om pragtige kleuropsies te kies nie.

4. Ambiance

Ambiance, 'n gratis webtoepassing, bied voorafgemaakte webkleurpalette van ander kleurwebwerwe op die web. Dit werk soos 'n tradisionele webtoepassing waar jy kleure op jou profiel kan stoor en jou eie skemas van nuuts af kan skep. Al hierdie webkleurpalette kom van Colorlovers. Die Ambiance-koppelvlak maak blaai makliker en plaas meer fokus op kleursamewerking vir UI-ontwerp.

5. 0tot255

0to255 is nie juis 'n kleurskema-opwekker nie, maar dit kan jou help om bestaande kleurskemas te verfyn. Die webtoepassing wys vir jou al die verskillende kleure sodat jy kleure onmiddellik kan meng en pas.

As jy dit moeilik vind om 'n bruikbare kleurskema te skep, kan jy van die bogenoemde toepassings hersien.

Die beste webkleurpalette

Die volgende webwerwe gebruik 'n verskeidenheid webkleurpalette met groot effek. Hulle word versigtig gekies vir die emosies wat hulle ontlok en die emosies wat hulle oordra.

1. Odopod

Odopod is ontwerp met 'n eentonige kleurpalet, maar het daarop gemik om te verhoed dat dit vervelig lyk met 'n gradiënt op sy tuisblad. Groot tipografie bied groot kontras. Dit is duidelik waar besoekers wil hê hulle moet klik.

2. Tori se oog

Tori's Eye is 'n goeie voorbeeld van 'n monochroom kleurskema. Hier word die effekte van 'n eenvoudige dog kragtige kleurpalet gesien wat rondom skakerings van groen gesentreer is. Hierdie kleurskema is gewoonlik maklik om af te trek, aangesien een skakering van een kleur amper altyd met 'n ander skakering van dieselfde kleur sal werk.

3. Kaasoorlewingstel

Rooi is 'n uiters gewilde kleur vir 'n webwerfkleurpalet. Dit kan 'n ryk mengsel van emosies oordra, wat dit veelsydig maak. Soos u op die Cheese Survival Kit-webwerf kan sien, is dit veral kragtig wanneer dit in klein dosisse gebruik word. Rooi word versag deur meer neutrale kleure, en blou help met GTA's en ander areas waar die besigheid die besoeker se aandag wil trek.

4. Ahrefs

Ahrefs is 'n voorbeeld van 'n webwerf wat die kleurpalet vrylik gebruik. Donkerblou dien as die oorheersende kleur, maar variasies bestaan ​​oral op die terrein. Dieselfde geld vir die kleure oranje, pienk en turkoois.

Mees algemene vrae oor kleure

1. Wat is die beste kleur vir 'n webwerf?

Blou is beslis die veiligste keuse aangesien dit die gewildste kleur is met 35%. As jou mededingers egter almal blou gebruik, kan dit sin maak om jou aanbod en handelsmerk te "differensieer". Maar jy moet seker maak dat jy nie besoekers oorweldig nie.

2. Hoeveel kleure moet die webwerf hê?

Neem in ag dat 51% van handelsmerke monochrome logo's het, 39% gebruik twee kleure, en slegs 19% van maatskappye verkies volkleurlogo's. Van hier af kan jy sien dat webwerwe met 1, 2 en 3 kleure meer sin maak as om 'n webwerf met reënboogkleure te probeer skep. Handelsmerke soos Microsoft en Google glo egter in die voordeel om met meer kleure te werk, aangesien hulle ten minste 4 soliede kleure in hul ontwerpe gebruik.

3. Waar moet ek die kleure gebruik?

Opvallende kleure moet spaarsamig gebruik word, anders sal hulle hul effek verloor. Hierdie effek moet in omskakelingspunte soos "Koop Nou"-knoppies wees.