Webkleurpaletten

Wat binne webkleurpaletten?

Kleuren binne heul wichtich foar webûntwerpers en grafyske ûntwerpers. Untwerpers beskriuwe de kleuren dy't wy beskriuwe as blau, read en grien yn it deistich libben mei koades lykas #fff002, #426215. Nettsjinsteande hokker type kodearingsprojekt jo ûndernimme, jo sille wierskynlik op in stuit begjinne te wurkjen mei kleuren. Dit sil foaral nuttich wêze as jo learje te kodearjen mei HTML, lykas in protte minsken dogge om websiden te ûntwerpen.

Wat betsjut Hex-koade yn kleuren?

Hexkoade is in manier om in kleur yn RGB-formaat te fertsjintwurdigjen troch trije wearden te kombinearjen. Dizze kleurkoades binne in yntegraal diel fan HTML foar webûntwerp en bliuwe in wichtige manier om kleurformaten digitaal te fertsjintwurdigjen.

Hexkleurkoades begjinne mei it pûnteken of hashtag (#) folge troch seis letters of sifers. De earste twa letters/nûmers komme oerien mei read, de folgjende twa mei grien en de lêste twa mei blau. Kleurwearden wurde definieare yn wearden tusken 00 en FF.

Sifers wurde brûkt as de wearde 1-9 is. Letters wurde brûkt as de wearde grutter is as 9. Bygelyks:

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

Hex kleur koades en RGB ekwivalinten

It ûnthâlden fan guon fan 'e meast foarkommende hex-kleurkoades kin nuttich wêze om jo te helpen better foarsizze hokker oare kleuren sille wêze as jo de hex-kleurkoade sjogge, net allinich as jo dy krekte kleuren wolle brûke.

• Red = #FF0000 = RGB (255, 0, 0)
• Grien = #008000 = RGB (1, 128, 0)v
• Blau = #0000FF = RGB (0, 0, 255)
• Wit = #FFFFFF = RGB (255.255.255)
• Ivoar = #FFFFF0 = RGB (255, 255, 240)
• Swart = #000000 = RGB (0, 0, 0)
• Griis = #808080 = RGB (128, 128, 128)
• Sulver = #C0C0C0 = RGB (192, 192, 192)
• Giel = #FFFF00 = RGB (255, 255, 0)
• Purple = #800080 = RGB (128, 0, 128)
• Oranje = #FFA500 = RGB (255, 165, 0)
• Boergonje = #800000 = RGB (128, 0, 0)
• Fuchsia = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Teal = #008080 = RGB (0, 128, 128)
• Olive = #808000 = RGB (128, 128, 0)
• Marineblau = #000080 = RGB (0, 0, 128)

Wêrom binne websidekleuren wichtich?

Jo kinne tinke dat jo net wurde beynfloede troch kleuren, mar neffens in stúdzje seit 85% fan 'e minsken dat kleur in grutte ynfloed hat op it produkt dat se keapje. Hy seit ek dat as guon bedriuwen har knopkleuren feroarje, se in skerpe ferheging of fermindering fan har konversaasjes hawwe opmurken.

Bygelyks, Beamax, in bedriuw dat projeksjeskermen produseart, merkte in massale ferheging fan 53.1% yn klikken op reade keppelings yn ferliking mei blauwe keppelings.

Kleuren hawwe in enoarme ynfloed net allinich op klikken, mar ek op merkerkenning. In stúdzje oer de mentale ynfloed fan kleuren fûn dat kleuren de merkerkenning ferheegje mei gemiddeld 80%. As jo ​​​​bygelyks oan Coca-Cola tinke, sille jo jo wierskynlik libbene reade blikjes foarstelle.

Hoe kinne jo in kleurskema foar websiden kieze?

Om te besluten hokker kleuren jo moatte kieze op jo webside of webapplikaasje, moatte jo earst in goed begryp hawwe fan wat jo ferkeapje. As jo ​​​​bygelyks besykje in ôfbylding fan hegere kwaliteit te berikken, is de kleur dy't jo moatte kieze pears. Lykwols, as jo wolle berikke in breder publyk, blau; It is in gerêststellende en sêfte kleur dy't goed geskikt is foar mear gefoelige ûnderwerpen lykas sûnens as finânsjes.

De foarbylden hjirboppe binne bewiisd troch in protte stúdzjes. Mar de kleur dy't jo kieze foar jo webside hinget ôf fan 'e kompleksiteit fan jo ûntwerp en de soarten kleurkombinaasjes. As jo ​​​​bygelyks in monochrome webûntwerppalet brûke, kinne jo sân of mear skaden fan dy kleur nedich wêze om genôch ferskaat op it skerm te krijen. Jo moatte kleuren ynstelle foar bepaalde dielen fan jo side, lykas tekst, eftergrûnen, keppelings, hoverkleuren, CTA-knoppen en kopteksten.

No "Hoe kinne jo in kleurskema kieze foar websiden en webapplikaasjes?" Litte wy it stap foar stap besjen:

1. Kies jo primêre kleuren.

De bêste manier om te besluten oer in primêre kleur is om de kleuren te ûndersykjen dy't oerienkomme mei de stimming fan jo produkt of tsjinst.

Hjirûnder hawwe wy wat foarbylden foar jo neamd:

• Red: It betsjut opwining of lok.
• Oranje: It jout oan in freonlike, leuke tiid.
• Giel betsjut optimisme en lok.
• Grien: It betsjut frisheid en natuer.
• Blau: stiet foar betrouberens en wissichheid.
• Purple: fertsjintwurdiget in ûnderskiedend merk mei in skiednis fan kwaliteit.
• Brún: It betsjut in betrouber produkt dat kin wurde brûkt troch elkenien.
• Swart betsjut lúkse of elegânsje.
• Wyt: ferwiist nei stylfolle, brûkerfreonlike produkten.

2. Kies jo ekstra kleuren.

Kies ien of twa ekstra kleuren dy't jo haadkleur oanfolje. Dit moatte ideaal de kleuren wêze dy't jo haadkleur "ferbjusterjend" meitsje.

3. Selektearje in eftergrûnkleur.

Kies in eftergrûnkleur dy't minder "agressyf" sil wêze as jo primêre kleur.

4. Selektearje it lettertype kleur.

Kies in kleur foar de tekst op jo webside. Tink derom dat in bêst swart lettertype seldsum is en net oan te rieden is.

De bêste webkleurpaletten foar ûntwerpers

As jo ​​​​de kleur net kinne fine wêr't jo nei sykje yn 'e Softmedal-kolleksje fan webkleurenpaletten, kinne jo de alternative kleursites hjirûnder besjen:

Kleurseleksje is in lang proses en freget faaks in protte fine-tuning om de juste kleuren te finen. Op dit punt kinne jo tiid besparje troch 100% fergese webapplikaasjes te brûken dy't de relevante kleurskema's fanôf it begjin meitsje.

1. Paletton

Paletton is in webapplikaasje dy't alle webûntwerpers moatte witte. Fier gewoan in siedkleur yn en de app docht de rest foar jo. Paletton is in betroubere kar en in geweldige webapp foar dyjingen dy't neat witte oer ûntwerp en foar begjinners.

2. Kleur Feilich

As WCAG in soarch is yn jo ûntwerpproses, is Color Safe it bêste ark om te brûken. Mei dizze webapplikaasje kinne jo kleurskema's meitsje dy't perfekt mingje en ryk kontrast biede neffens WCAG-rjochtlinen.

Troch de Color Safe-webapp te brûken, soargje jo derfoar dat jo side foldocht oan WCAG-rjochtlinen en folslein tagonklik is foar elkenien.

3. Adobe Color CC

It is ien fan 'e fergese Adobe-ark makke foar iepenbier gebrûk. It is in útwurke webapplikaasje wêr't elkenien kleurskema's fanôf it begjin kin oanmeitsje. It lit jo kieze út in protte ferskillende kleurmodellen dy't it bêste by jo behoeften passe. De ynterface kin earst in bytsje betiizjend lykje, mar as jo ienris wend binne, moatte jo gjin probleem hawwe om prachtige kleuropsjes te kiezen.

4. Ambiance

Ambiance, in fergese webapplikaasje, biedt foarôf makke webkleurpaletten fan oare kleursites op it web. It wurket as in tradisjonele webapp wêr't jo kleuren op jo profyl kinne bewarje en jo eigen skema's fanôf it begjin kinne oanmeitsje. Al dizze webkleurpaletten komme fan Colorlovers. De Ambiance-ynterface makket it blêdzjen makliker en set mear fokus op kleurynteraksje foar UI-ûntwerp.

5. 0oan255

0to255 is net krekt in kleurskema-generator, mar it kin jo helpe by it fine-tunen fan besteande kleurskema's. De webapp lit jo alle ferskillende tinten sjen, sadat jo kleuren direkt kinne mingje en oerienkomme.

As jo ​​​​it lestich fine om in brûkber kleurskema te meitsjen, kinne jo guon fan 'e boppesteande applikaasjes besjen.

De bêste webkleurpaletten

De folgjende siden brûke in ferskaat oan webkleurpaletten mei in grut effekt. Se wurde mei soarch selektearre foar de emoasjes dy't se oproppe en de emoasjes dy't se oerbringe.

1. Odopod

Odopod waard ûntworpen mei in monotone kleurenpalet, mar wie fan doel om foar te kommen dat der saai útsjen mei in gradient op syn thússide. Grutte typografy biedt geweldige kontrast. It is dúdlik wêr't besikers wolle dat se klikke.

2. Tori syn each

Tori's Eye is in geweldich foarbyld fan in monochrome kleurskema. Hjir binne de effekten te sjen fan in ienfâldich, mar krêftich kleurenpalet sintraal om skaden fan grien. Dit kleurskema is normaal maklik te lûken, om't ien skaad fan ien kleur hast altyd wurket mei in oare skaad fan deselde kleur.

3. Cheese Survival Kit

Red is in ekstreem populêre kleur foar in websidekleurpalet. It kin in rike miks fan emoasjes oerbringe, wêrtroch it alsidich is. Lykas jo kinne sjen op 'e Cheese Survival Kit-webside, is it foaral krêftich as it wurdt brûkt yn lytse doses. Red wurdt sêftere troch mear neutrale kleuren, en blau helpt mei CTAs en oare gebieten dêr't it bedriuw wol lûke de besiker syn oandacht.

4. Ahrefs

Ahrefs is in foarbyld fan in webside dy't it kleurenpalet frij brûkt. Dûnkerblau fungearret as de oerhearskjende kleur, mar fariaasjes besteane oer de hiele side. Itselde jildt foar de kleuren oranje, rôze en turquoise.

Meast stelde fragen oer kleuren

1. Wat is de bêste kleur foar in webside?

Blau is perfoarst de feilichste kar, om't it de populêrste kleur is mei 35%. As jo ​​​​konkurrinten lykwols allegear blau brûke, kin it sin wêze om jo oanbod en merk te "differinsjearje". Mar jo moatte derfoar soargje dat jo de besikers net oerweldigje.

2. Hoefolle kleuren moat de webside hawwe?

Tink derom dat 51% fan merken monochrome logo's hawwe, 39% brûke twa kleuren, en mar 19% fan bedriuwen leaver folsleine kleurlogo's. Hjirwei kinne jo sjen dat websiden mei 1, 2 en 3 kleuren mear sin meitsje dan besykje in webside te meitsjen mei reinbôgekleuren. Marken lykas Microsoft en Google leauwe lykwols yn it foardiel fan wurkjen mei mear kleuren, om't se op syn minst 4 solide kleuren brûke yn har ûntwerpen.

3. Wêr moat ik de kleuren brûke?

Opfallende kleuren moatte sparsam brûkt wurde, oars sille se har effekt ferlieze. Dit effekt moat wêze yn konverzje punten lykas "Keapje no" knoppen.