Web-väripaletit

Mitä verkkoväripaletit ovat?

Värit ovat erittäin tärkeitä web-suunnittelijoille ja graafisille suunnittelijoille. Suunnittelijat kuvaavat värejämme siniseksi, punaiseksi ja vihreäksi jokapäiväisessä elämässä koodeilla, kuten #fff002, #426215. Riippumatta siitä, minkä tyyppistä koodausprojektia olet tekemässä, alat todennäköisesti työskennellä värien kanssa jossain vaiheessa. Tämä on erityisen hyödyllistä, jos opit koodaamaan HTML:n avulla, kuten monet ihmiset tekevät web-sivujen suunnittelussa.

Mitä Hex-koodi tarkoittaa väreissä?

Heksakoodi on tapa esittää väriä RGB-muodossa yhdistämällä kolme arvoa. Nämä värikoodit ovat olennainen osa verkkosuunnittelun HTML-koodia ja ovat edelleen tärkeä tapa esittää värimuotoja digitaalisesti.

Hex-värikoodit alkavat puntamerkillä tai hashtagilla (#), jota seuraa kuusi kirjainta tai numeroa. Kaksi ensimmäistä kirjainta/numeroa vastaavat punaista, kaksi seuraavaa vihreää ja kaksi viimeistä sinistä. Väriarvot määritellään arvoina 00 ja FF välillä.

Numeroita käytetään, kun arvo on 1-9. Kirjaimia käytetään, kun arvo on suurempi kuin 9. Esim:

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

Hex-värikoodit ja RGB-vastineet

Joidenkin yleisimpien hex-värikoodien muistaminen voi auttaa sinua ennustamaan paremmin, mitä muita värejä tulee olemaan, kun näet hex-värikoodin, ei vain silloin, kun haluat käyttää juuri noita värejä.

• Punainen = #FF0000 = RGB (255, 0, 0)
• Vihreä = #008000 = RGB (1, 128, 0) v
• Sininen = #0000FF = RGB (0, 0, 255)
• Valkoinen = #FFFFFF = RGB (255 255 255)
• Norsunluu = #FFFFF0 = RGB (255, 255, 240)
• Musta = #000000 = RGB (0, 0, 0)
• Harmaa = #808080 = RGB (128, 128, 128)
• Hopea = #C0C0C0 = RGB (192, 192, 192)
• Keltainen = #FFFF00 = RGB (255, 255, 0)
• Violetti = #800080 = RGB (128, 0, 128)
• Oranssi = #FFA500 = RGB (255, 165, 0)
• Burgundy = #800000 = RGB (128, 0, 0)
• Fuksia = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Sinivihreä = #008080 = RGB (0, 128, 128)
• Oliivi = #808000 = RGB (128, 128, 0)
• Tummansininen = #000080 = RGB (0, 0, 128)

Miksi verkkosivujen värit ovat tärkeitä?

Saatat ajatella, että värit eivät vaikuta sinuun, mutta tutkimuksen mukaan 85 % ihmisistä sanoo, että värillä on suuri vaikutus heidän ostamaansa tuotteeseen. Hän sanoo myös, että kun jotkin yritykset vaihtavat painikkeidensa värejä, ne ovat havainneet konversioiden jyrkkää kasvua tai laskua.

Esimerkiksi projektiokankaita valmistava Beamax huomasi punaisten linkkien napsautusten lisääntyneen 53,1 % sinisistä linkeistä.

Värit vaikuttavat valtavasti paitsi napsautuksiin myös tuotemerkin tunnistukseen. Tutkimus värien henkisestä vaikutuksesta totesi, että värit lisäävät brändin tunnettuutta keskimäärin 80%. Kun esimerkiksi ajattelet Coca-Colaa, luultavasti kuvittelet kirkkaan punaiset tölkit.

Kuinka valita värimaailma verkkosivustoille?

Päättääksesi, mitkä värit sinun tulisi valita verkkosivustollesi tai verkkosovelluksellesi, sinun on ensin ymmärrettävä hyvin, mitä myyt. Jos esimerkiksi yrität saavuttaa korkealaatuisemman, korkealaatuisemman kuvan, valitse violetti väri. Jos kuitenkin haluat tavoittaa laajemman yleisön, sininen; Se on rauhoittava ja pehmeä väri, joka sopii hyvin herkempiin aiheisiin, kuten terveys tai talous.

Yllä olevat esimerkit on todistettu useilla tutkimuksilla. Mutta verkkosivustollesi valitsemasi väri riippuu suunnittelusi monimutkaisuudesta ja väriyhdistelmien tyypeistä. Jos esimerkiksi käytät yksiväristä web-suunnittelupalettia, saatat tarvita vähintään seitsemän sävyä kyseisestä väristä, jotta saat tarpeeksi vaihtelua näytölle. Sinun on määritettävä värit tietyille sivustosi osille, kuten tekstille, taustoille, linkeille, hover-väreille, toimintakehotuspainikkeille ja otsikoille.

Nyt "Kuinka valita väriteema verkkosivustoille ja verkkosovelluksille?" Katsotaanpa sitä askel askeleelta:

1. Valitse päävärisi.

Paras tapa päättää pääväristä on tutkia värejä, jotka sopivat tuotteesi tai palvelusi tunnelmaan.

Alla olemme listanneet sinulle esimerkkejä:

• Punainen: Se tarkoittaa jännitystä tai onnea.
• Oranssi: Se tarkoittaa ystävällistä, hauskaa aikaa.
• Keltainen tarkoittaa optimismia ja onnea.
• Vihreä: Se tarkoittaa tuoreutta ja luontoa.
• Sininen: tarkoittaa luotettavuutta ja varmuutta.
• Violetti: Edustaa tunnettua merkkiä, jolla on historian laatu.
• Ruskea: Se tarkoittaa luotettavaa tuotetta, jota kaikki voivat käyttää.
• Musta tarkoittaa ylellisyyttä tai eleganssia.
• Valkoinen: Viittaa tyylikkäisiin, käyttäjäystävällisiin tuotteisiin.

2. Valitse lisävärit.

Valitse yksi tai kaksi lisäväriä, jotka täydentävät pääväriäsi. Ihannetapauksessa näiden pitäisi olla värejä, jotka tekevät pääväristäsi "upeaa".

3. Valitse taustaväri.

Valitse taustaväri, joka on vähemmän "aggressiivinen" kuin päävärisi.

4. Valitse fontin väri.

Valitse verkkosivusi tekstin väri. Huomaa, että kiinteä musta fontti on harvinainen eikä sitä suositella.

Parhaat web-väripaletit suunnittelijoille

Jos et löydä etsimääsi väriä Softmedal-verkkoväripalettien kokoelmasta, voit vilkaista alla olevia vaihtoehtoisia värisivustoja:

Värien valinta on pitkä prosessi ja vaatii usein paljon hienosäätöä oikeiden värien löytämiseksi. Tässä vaiheessa voit säästää aikaa käyttämällä 100 % ilmaisia ​​verkkosovelluksia, jotka luovat tarvittavat väriteemat tyhjästä.

1. Paletton

Paletton on verkkosovellus, joka kaikkien web-suunnittelijoiden tulisi tietää. Syötä vain siemenväri ja sovellus hoitaa loput puolestasi. Paletton on luotettava valinta ja loistava verkkosovellus niille, jotka eivät tiedä suunnittelusta mitään, ja aloittelijoille.

2. Väritön

Jos WCAG on huolenaihe suunnitteluprosessissasi, Color Safe on paras työkalu käytettäväksi. Tämän verkkosovelluksen avulla voit luoda väriteemoja, jotka sulautuvat täydellisesti ja tarjoavat rikkaan kontrastin WCAG-ohjeiden mukaisesti.

Käyttämällä Color Safe -verkkosovellusta varmistat, että sivustosi noudattaa WCAG-ohjeita ja on täysin kaikkien käytettävissä.

3. Adobe Color CC

Se on yksi ilmaisista julkiseen käyttöön luoduista Adoben työkaluista. Se on monimutkainen verkkosovellus, jossa kuka tahansa voi luoda väriteemoja tyhjästä. Sen avulla voit valita useista eri värimalleista, jotka sopivat parhaiten tarpeisiisi. Käyttöliittymä voi aluksi tuntua hieman hämmentävältä, mutta kun olet tottunut siihen, sinun ei pitäisi olla ongelmia kauniiden värivaihtoehtojen valinnassa.

4. Tunnelma

Ambiance, ilmainen verkkosovellus, tarjoaa valmiita web-väripaletteja muista verkon värisivustoista. Se toimii kuin perinteinen verkkosovellus, jossa voit tallentaa värejä profiiliisi ja luoda omia mallejasi tyhjästä. Kaikki nämä verkkoväripaletit tulevat Colorloversilta. Ambiance-käyttöliittymä helpottaa selaamista ja keskittyy enemmän värien yhteensovittamiseen käyttöliittymäsuunnittelussa.

5. 0-255

0to255 ei ole varsinainen väriteeman generaattori, mutta se voi auttaa sinua hienosäätämään olemassa olevia väriteemoja. Verkkosovellus näyttää kaikki eri sävyt, jotta voit sekoittaa ja yhdistää värejä välittömästi.

Jos käyttökelpoisen väriteeman luominen on vaikeaa, voit tarkastella joitain yllä olevista sovelluksista.

Parhaat web-väripaletit

Seuraavat sivustot käyttävät erilaisia ​​verkkoväripaletteja erinomaisesti. Ne valitaan huolellisesti niiden herättämien ja välittämien tunteiden mukaan.

1. Odopod

Odopod suunniteltiin yksitoikkoisella väripaletilla, mutta sen tarkoituksena oli välttää näyttävän tylsältä kotisivun kaltevuudella. Suuri typografia tarjoaa upean kontrastin. On selvää, mihin vierailijat haluavat napsauttaa.

2. Torin silmä

Tori's Eye on loistava esimerkki yksivärisestä värimaailmasta. Tässä näkyy yksinkertaisen mutta tehokkaan väripaletin vaikutukset vihreän sävyjen ympärille. Tämä värimaailma on yleensä helppo ottaa pois, koska yhden värin yksi sävy toimii melkein aina saman värin toisen sävyn kanssa.

3. Juuston selviytymispakkaus

Punainen on erittäin suosittu väri verkkosivustojen väripaletissa. Se voi välittää rikkaan yhdistelmän tunteita, mikä tekee siitä monipuolisen. Kuten näet Cheese Survival Kit -sivustolta, se on erityisen tehokas pieninä annoksina käytettynä. Punaista pehmentävät neutraalimmat värit, ja sininen auttaa CTA:ssa ja muilla aloilla, joihin yritys haluaa kiinnittää vierailijan huomion.

4. Ahrefs

Ahrefs on esimerkki verkkosivustosta, joka käyttää väripalettia vapaasti. Tummansininen toimii vallitsevana värinä, mutta variaatioita on kaikkialla sivustolla. Sama koskee värejä oranssi, pinkki ja turkoosi.

Usein kysytyt kysymykset väreistä

1. Mikä on paras väri verkkosivustolle?

Sininen on ehdottomasti turvallisin valinta, sillä se on suosituin väri 35 %:lla. Kuitenkin, jos kaikki kilpailijasi käyttävät sinistä, saattaa olla järkevää "erottaa" tarjouksesi ja brändisi. Mutta sinun on varmistettava, ettet hukuta kävijöitä.

2. Kuinka monta väriä verkkosivulla tulisi olla?

Ota huomioon, että 51 prosentilla brändeistä on yksivärisiä logoja, 39 prosentilla kaksivärisiä logoja ja vain 19 prosenttia yrityksistä suosii täysivärisiä logoja. Tästä näet, että 1-, 2- ja 3-väreillä varustetut verkkosivustot ovat järkevämpiä kuin sateenkaaren väreillä varustetun verkkosivuston luominen. Microsoftin ja Googlen kaltaiset tuotemerkit uskovat kuitenkin useammilla väreillä työskentelyn etuun, koska ne käyttävät suunnittelussaan vähintään neljää yhtenäistä väriä.

3. Missä minun pitäisi käyttää värejä?

Silmäänpistäviä värejä tulee käyttää säästeliäästi, muuten ne menettävät tehonsa. Tämän tehosteen on oltava muuntopisteissä, kuten "Osta nyt" -painikkeissa.