Webes Színpaletták

Mik azok a webes színpaletták?

A színek nagyon fontosak a webdesignerek és grafikusok számára. A tervezők az általunk kék, piros és zöld színeket a mindennapi életben olyan kódokkal írják le, mint a #fff002, #426215. Nem számít, milyen típusú kódolási projektet vállal, valószínűleg valamikor elkezd dolgozni a színekkel. Ez különösen akkor lesz hasznos, ha megtanul HTML-kóddal kódolni, ahogy azt sokan teszik weboldalak tervezése során.

Mit jelent a Hex kód a színekben?

A hexadecimális kód a színek RGB formátumú megjelenítésének módja három érték kombinálásával. Ezek a színkódok a HTML szerves részét képezik a webdizájnban, és továbbra is fontos módja a színformátumok digitális megjelenítésének.

A hatszögletű színkódok a font jellel vagy hashtaggal (#) kezdődnek, amelyet hat betű vagy szám követ. Az első két betű/szám a pirosnak, a következő kettő a zöldnek, az utolsó kettő pedig a kéknek felel meg. A színértékek 00 és FF közötti értékekben vannak megadva.

Számokat használunk, ha az érték 1-9. Betűket használunk, ha az érték nagyobb, mint 9. Például:

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

Hexadecimális színkódok és RGB megfelelői

A leggyakoribb hexadecimális színkódok memorizálása segíthet abban, hogy jobban megjósolhassa, milyen más színek lesznek, amikor látja a hexadecimális színkódot, nem csak akkor, amikor pontosan ezeket a színeket szeretné használni.

• Piros = #FF0000 = RGB (255, 0, 0)
• Zöld = #008000 = RGB (1, 128, 0) v
• Kék = #0000FF = RGB (0, 0, 255)
• Fehér = #FFFFFF = RGB (255 255 255)
• Elefántcsont = #FFFFF0 = RGB (255, 255, 240)
• Fekete = #000000 = RGB (0, 0, 0)
• Szürke = #808080 = RGB (128, 128, 128)
• Ezüst = #C0C0C0 = RGB (192, 192, 192)
• Sárga = #FFFF00 = RGB (255, 255, 0)
• Lila = #800080 = RGB (128, 0, 128)
• Narancs = #FFA500 = RGB (255, 165, 0)
• bordó = #800000 = RGB (128, 0, 0)
• Fukszia = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• kékeszöld = #008080 = RGB (0, 128, 128)
• Olive = #808000 = RGB (128, 128, 0)
• Sötétkék = #000080 = RGB (0, 0, 128)

Miért fontosak a weboldal színei?

Azt gondolhatja, hogy nem hatnak rád a színek, de egy tanulmány szerint az emberek 85%-a azt állítja, hogy a szín nagy hatással van a megvásárolt termékre. Azt is elmondja, hogy amikor egyes vállalatok megváltoztatják a gombok színét, konverzióik meredek növekedését vagy csökkenését észlelték.

Például a Beamax, egy vetítővászonokat gyártó cég azt észlelte, hogy a piros linkekre leadott kattintások számában 53,1%-kal nőtt a kék linkekhez képest.

A színek nemcsak a kattintásokra, hanem a márka felismerésére is óriási hatással vannak. A színek mentális hatásával foglalkozó tanulmány szerint a színek átlagosan 80%-kal növelik a márka ismertségét. Például, ha a Coca-Colára gondol, valószínűleg élénk piros dobozokat fog elképzelni.

Hogyan válasszunk színsémát a weboldalakhoz?

Annak eldöntéséhez, hogy melyik színt válasszon webhelyén vagy webalkalmazásában, először alaposan meg kell értenie, hogy mit árul. Például, ha jobb minőségű, csúcsminőségű képet szeretne elérni, a lila színt érdemes választania. Ha azonban szélesebb közönséget szeretne elérni, kék; Ez egy megnyugtató és lágy szín, amely jól illeszkedik az érzékenyebb témákhoz, például az egészséghez vagy a pénzügyekhez.

A fenti példákat számos tanulmány igazolta. A webhelyéhez választott szín azonban a tervezés összetettségétől és a színkombinációk típusától függ. Például, ha monokróm webdesign palettát használ, akkor ennek a színnek hét vagy több árnyalatára lehet szüksége, hogy kellő változatosságot kapjon a képernyőn. Be kell állítania a színeket a webhely bizonyos részeihez, például a szöveghez, a hátterekhez, a hivatkozásokhoz, az egérmutató színéhez, a CTA gombokhoz és a fejlécekhez.

Most „Hogyan válasszunk színsémát webhelyekhez és webes alkalmazásokhoz?” Nézzük meg lépésről lépésre:

1. Válassza ki az elsődleges színeket.

Az elsődleges szín kiválasztásának legjobb módja, ha megvizsgálja a termék vagy szolgáltatás hangulatához illő színeket.

Az alábbiakban felsorolunk néhány példát az Ön számára:

• Piros: Izgalmat vagy boldogságot jelent.
• Narancs: Barátságos, szórakoztató időtöltést jelöl.
• A sárga optimizmust és boldogságot jelent.
• Zöld: frissességet és természetet jelent.
• Kék: a megbízhatóságot és a magabiztosságot jelenti.
• Lila: egy előkelő márkát képvisel, amely minőségi múlttal rendelkezik.
• Barna: Megbízható, mindenki által használható terméket jelent.
• A fekete luxust vagy eleganciát jelent.
• Fehér: Stílusos, felhasználóbarát termékekre utal.

2. Válassza ki a további színeket.

Válasszon egy vagy két további színt, amelyek kiegészítik a fő színt. Ideális esetben ezek azok a színek, amelyek "lenyűgözővé" teszik a fő színt.

3. Válasszon ki egy háttérszínt.

Válasszon olyan háttérszínt, amely kevésbé lesz „agresszív”, mint az elsődleges szín.

4. Válassza ki a betűszínt.

Válasszon színt a webhelyén található szöveghez. Vegye figyelembe, hogy a tömör fekete betűtípus ritka és nem ajánlott.

A legjobb webes színpaletták a tervezők számára

Ha nem találja a keresett színt a Softmedal webes színpaletták kollekciójában, tekintse meg az alábbi alternatív színoldalakat:

A szín kiválasztása hosszú folyamat, és gyakran sok finomhangolást igényel a megfelelő színek megtalálása. Ezen a ponton időt takaríthat meg, ha 100%-ban ingyenes webalkalmazásokat használ, amelyek a semmiből hozzák létre a megfelelő színsémákat.

1. Paletton

A Paletton egy webes alkalmazás, amelyet minden webdesignernek tudnia kell. Csak adja meg a mag színét, és az alkalmazás elvégzi a többit Ön helyett. A Paletton megbízható választás és nagyszerű webalkalmazás azok számára, akik semmit sem tudnak a tervezésről és kezdőknek.

2. Színbiztos

Ha a WCAG aggodalomra ad okot a tervezési folyamat során, a Color Safe a legjobb eszköz. Ezzel a webalkalmazással olyan színsémákat hozhat létre, amelyek tökéletesen illeszkednek és gazdag kontrasztot kínálnak a WCAG irányelveinek megfelelően.

A Color Safe webalkalmazás használatával biztosítja, hogy webhelye megfelel a WCAG irányelveinek, és mindenki számára teljes mértékben elérhető.

3. Adobe Color CC

Ez az egyik ingyenes Adobe-eszköz nyilvános használatra. Ez egy kidolgozott webalkalmazás, ahol bárki a semmiből készíthet színsémákat. Lehetővé teszi, hogy számos különböző színmodell közül válasszon, amelyek a legjobban megfelelnek az Ön igényeinek. A kezelőfelület elsőre kissé zavarosnak tűnhet, de miután megszokta, nem lehet gond a gyönyörű színválaszték kiválasztásával.

4. Hangulat

Az Ambiance egy ingyenes webalkalmazás, amely előre elkészített webes színpalettákat kínál más színoldalakról az interneten. Úgy működik, mint egy hagyományos webalkalmazás, ahol színeket menthet a profiljába, és a semmiből létrehozhatja saját sémáit. Mindezek a webes színpaletták a Colorlovers-től származnak. Az Ambiance felület megkönnyíti a böngészést, és nagyobb hangsúlyt fektet a színek összjátékára a felhasználói felület kialakításánál.

5. 0-255

A 0to255 nem éppen egy színséma-generátor, de segíthet a meglévő színsémák finomhangolásában. A webalkalmazás megmutatja az összes különböző árnyalatot, így azonnal keverheti és párosíthatja a színeket.

Ha nehézséget okoz egy használható színséma létrehozása, tekintse át a fenti alkalmazásokat.

A legjobb webes színpaletták

A következő webhelyek különféle webes színpalettákat használnak a nagyszerű hatás érdekében. Gondosan választják ki őket az általuk kiváltott és az általuk közvetített érzelmek alapján.

1. Odopod

Az Odopodot monoton színpalettával tervezték, de az volt a cél, hogy ne tűnjön unalmasnak a színátmenet a honlapján. A nagy tipográfia nagy kontrasztot kínál. Egyértelmű, hogy a látogatók hova szeretnének kattintani.

2. Tori szeme

A Tori's Eye a monokróm színséma nagyszerű példája. Itt egy egyszerű, de erőteljes színpaletta hatásai láthatók, amelyek a zöld árnyalatai köré összpontosulnak. Ezt a színsémát általában könnyű lehúzni, mivel az egyik szín egyik árnyalata szinte mindig működik azonos színű másik árnyalattal.

3. Cheese Survival Kit

A piros rendkívül népszerű szín a weboldal színpalettáján. Érzelmek gazdag keverékét képes közvetíteni, így sokoldalúvá teszi. Amint az a Cheese Survival Kit webhelyen látható, kis adagokban használva különösen hatásos. A vöröset semlegesebb színek lágyítják, a kék pedig segít a CTA-knál és más olyan területeken, ahol a vállalkozás fel akarja hívni a látogató figyelmét.

4. Ahrefs

Az Ahrefs egy olyan webhely, amely szabadon használja a színpalettát. A sötétkék a domináns szín, de változatok léteznek az egész oldalon. Ugyanez vonatkozik a narancssárga, rózsaszín és türkiz színekre is.

Leggyakrabban feltett kérdések a színekkel kapcsolatban

1. Melyik a legjobb szín egy weboldalhoz?

A kék egyértelműen a legbiztonságosabb választás, mivel 35%-kal ez a legnépszerűbb szín. Ha azonban versenytársai mind kéket használnak, érdemes lehet „megkülönböztetni” ajánlatát és márkáját. De ügyelnie kell arra, hogy ne terhelje túl a látogatókat.

2. Hány színű legyen a weboldal?

Vegyük figyelembe, hogy a márkák 51%-a monokróm logóval rendelkezik, 39%-a két színt használ, és csak a cégek 19%-a részesíti előnyben a színes logókat. Innen látható, hogy az 1, 2 és 3 színt tartalmazó webhelyeknek több értelme van, mintha szivárványszínekkel próbálnánk létrehozni egy webhelyet. Az olyan márkák azonban, mint a Microsoft és a Google, hisznek a több színnel való munka előnyeiben, mivel legalább 4 egyszínű színt használnak a tervezés során.

3. Hol használjam a színeket?

A szemet gyönyörködtető színeket takarékosan kell használni, különben elvesztik hatásukat. Ennek az effektusnak az olyan konverziós pontokban kell lennie, mint a „Vásárlás most” gomb.