Webové Farebné Palety

Čo sú webové farebné palety?

Farby sú pre web dizajnérov a grafikov veľmi dôležité. Dizajnéri opisujú farby, ktoré v každodennom živote popisujeme ako modrú, červenú a zelenú, pomocou kódov ako #fff002, #426215. Bez ohľadu na to, aký typ projektu kódovania vykonávate, pravdepodobne v určitom okamihu začnete pracovať s farbami. To bude obzvlášť užitočné, ak sa naučíte kódovať pomocou HTML, ako to robí veľa ľudí pri navrhovaní webových stránok.

Čo znamená hexadecimálny kód vo farbách?

Hexadecimálny kód je spôsob, ako reprezentovať farbu vo formáte RGB kombináciou troch hodnôt. Tieto farebné kódy sú neoddeliteľnou súčasťou HTML pre webový dizajn a zostávajú dôležitým spôsobom digitálnej reprezentácie farebných formátov.

Hexadecimálne farebné kódy začínajú znakom libry alebo hashtagom (#), za ktorým nasleduje šesť písmen alebo číslic. Prvé dve písmená/čísla zodpovedajú červenej, ďalšie dve zelenej a posledné dve modrej. Hodnoty farieb sú definované v hodnotách medzi 00 a FF.

Čísla sa používajú, keď je hodnota 1-9. Písmená sa používajú, ak je hodnota väčšia ako 9. napr.

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

Hexadecimálne farebné kódy a RGB ekvivalenty

Zapamätanie si niektorých najbežnejších hexadecimálnych farebných kódov vám môže pomôcť lepšie predpovedať, aké budú iné farby, keď uvidíte hexadecimálny farebný kód, nielen vtedy, keď budete chcieť použiť tieto presné farby.

• Červená = #FF0000 = RGB (255, 0, 0)
• Zelená = #008000 = RGB (1, 128, 0)v
• Modrá = #0000FF = RGB (0, 0, 255)
• Biela = #FFFFFF = RGB (255 255 255)
• Slonovina = #FFFFF0 = RGB (255, 255, 240)
• Čierna = #000000 = RGB (0, 0, 0)
• Sivá = #808080 = RGB (128, 128, 128)
• Strieborná = #C0C0C0 = RGB (192, 192, 192)
• Žltá = #FFFF00 = RGB (255, 255, 0)
• Fialová = #800080 = RGB (128, 0, 128)
• Oranžová = #FFA500 = RGB (255, 165, 0)
• Bordová = #800000 = RGB (128, 0, 0)
• Fuchsiová = #FF00FF = RGB (255, 0, 255)
• Lime = #00FF00 = RGB (0, 255, 0)
• Aqua = #00FFFF = RGB (0, 255, 255)
• Modrozelená = #008080 = RGB (0, 128, 128)
• Olivový = #808000 = RGB (128, 128, 0)
• Námornícka modrá = #000080 = RGB (0, 0, 128)

Prečo sú farby webových stránok dôležité?

Možno si myslíte, že vás farby neovplyvňujú, no podľa štúdie 85 % ľudí tvrdí, že farba má veľký vplyv na produkt, ktorý kupujú. Hovorí tiež, že keď niektoré spoločnosti zmenia farbu tlačidiel, zaznamenali prudký nárast alebo pokles konverzií.

Napríklad spoločnosť Beamax, ktorá vyrába premietacie plátna, zaznamenala masívny 53,1% nárast kliknutí na červené odkazy v porovnaní s modrými odkazmi.

Farby majú obrovský vplyv nielen na kliknutia, ale aj na rozpoznanie značky. Štúdia o mentálnom vplyve farieb zistila, že farby zvyšujú rozpoznanie značky v priemere o 80 %. Napríklad, keď si spomeniete na Coca-Colu, pravdepodobne si predstavíte žiarivé červené plechovky.

Ako si vybrať farebnú schému pre webové stránky?

Aby ste sa mohli rozhodnúť, ktoré farby by ste si mali vybrať na svojej webovej stránke alebo webovej aplikácii, musíte najprv dobre rozumieť tomu, čo predávate. Ak sa napríklad snažíte dosiahnuť vyššiu kvalitu obrazu vyššej kategórie, mali by ste zvoliť fialovú farbu. Ak však chcete osloviť širšie publikum, modrá; Je to upokojujúca a jemná farba, ktorá sa dobre hodí na citlivejšie témy, ako je zdravie alebo financie.

Vyššie uvedené príklady boli dokázané mnohými štúdiami. Farba, ktorú si vyberiete pre svoj web, však závisí od zložitosti vášho dizajnu a typov farebných kombinácií. Ak napríklad používate čiernobielu paletu webového dizajnu, možno budete potrebovať sedem alebo viac odtieňov tejto farby, aby ste na obrazovke získali dostatočnú rozmanitosť. Musíte nastaviť farby pre určité časti vašej lokality, ako je text, pozadie, odkazy, farby pri kurzore, tlačidlá CTA a hlavičky.

Teraz "Ako si vybrať farebnú schému pre webové stránky a webové aplikácie?" Poďme sa na to pozrieť krok za krokom:

1. Vyberte si primárne farby.

Najlepší spôsob, ako sa rozhodnúť pre primárnu farbu, je preskúmať farby, ktoré zodpovedajú nálade vášho produktu alebo služby.

Nižšie uvádzame niekoľko príkladov:

• Červená: Znamená vzrušenie alebo šťastie.
• Oranžová: Označuje priateľský a zábavný čas.
• Žltá znamená optimizmus a šťastie.
• Zelená: Znamená sviežosť a prírodu.
• Modrá: znamená spoľahlivosť a istotu.
• Fialová: Predstavuje významnú značku s históriou kvality.
• Hnedá: Znamená spoľahlivý produkt, ktorý môže používať každý.
• Čierna znamená luxus alebo eleganciu.
• Biela: Označuje štýlové, užívateľsky prívetivé produkty.

2. Vyberte si ďalšie farby.

Vyberte si jednu alebo dve ďalšie farby, ktoré dopĺňajú vašu hlavnú farbu. V ideálnom prípade by to mali byť farby, vďaka ktorým bude vaša hlavná farba „ohromujúca“.

3. Vyberte farbu pozadia.

Vyberte farbu pozadia, ktorá bude menej „agresívna“ ako vaša primárna farba.

4. Vyberte farbu písma.

Vyberte si farbu textu na svojom webe. Upozorňujeme, že plné čierne písmo je zriedkavé a neodporúča sa.

Najlepšie webové farebné palety pre dizajnérov

Ak nemôžete nájsť farbu, ktorú hľadáte v kolekcii webových farebných paliet Softmedal, môžete sa pozrieť na alternatívne farebné stránky nižšie:

Výber farieb je dlhý proces a často vyžaduje veľa dolaďovania, aby ste našli tie správne farby. V tomto bode môžete ušetriť čas používaním 100% bezplatných webových aplikácií, ktoré vytvárajú príslušné farebné schémy od začiatku.

1. Paletton

Paletton je webová aplikácia, ktorú by mali poznať všetci webdizajnéri. Stačí zadať farbu semena a aplikácia urobí zvyšok za vás. Paletton je spoľahlivá voľba a skvelá webová aplikácia pre tých, ktorí nevedia nič o dizajne a pre začiatočníkov.

2. Bezpečná farba

Ak je WCAG akýmkoľvek problémom vo vašom procese navrhovania, Color Safe je najlepší nástroj na použitie. Pomocou tejto webovej aplikácie môžete vytvárať farebné schémy, ktoré sa dokonale prelínajú a ponúkajú bohatý kontrast podľa smerníc WCAG.

Používaním webovej aplikácie Color Safe zaistíte, že vaša stránka bude v súlade s usmerneniami WCAG a bude plne dostupná pre každého.

3. Adobe Color CC

Je to jeden z bezplatných nástrojov Adobe vytvorených na verejné použitie. Ide o prepracovanú webovú aplikáciu, v ktorej môže každý vytvárať farebné schémy úplne od začiatku. Umožňuje vám vybrať si z mnohých rôznych farebných modelov, ktoré najlepšie vyhovujú vašim potrebám. Rozhranie sa môže na prvý pohľad zdať trochu mätúce, ale keď si naň zvyknete, nemali by ste mať problém s výberom krásnych farebných možností.

4. Atmosféra

Bezplatná webová aplikácia Ambiance ponúka vopred pripravené webové farebné palety z iných farebných stránok na webe. Funguje to ako tradičná webová aplikácia, kde si môžete uložiť farby do svojho profilu a vytvoriť si vlastné schémy od začiatku. Všetky tieto webové farebné palety pochádzajú od Colorlovers. Rozhranie Ambiance uľahčuje prehliadanie a viac sa zameriava na farebnú súhru pri návrhu používateľského rozhrania.

5. 0 až 255

0 až 255 nie je presne generátor farebných schém, ale môže vám pomôcť doladiť existujúce farebné schémy. Webová aplikácia vám ukáže všetky rôzne odtiene, takže môžete okamžite kombinovať farby.

Ak je pre vás ťažké vytvoriť použiteľnú farebnú schému, môžete si prezrieť niektoré z vyššie uvedených aplikácií.

Najlepšie webové palety farieb

Nasledujúce stránky používajú rôzne webové farebné palety s veľkým efektom. Sú starostlivo vyberané pre emócie, ktoré vyvolávajú, a emócie, ktoré sprostredkúvajú.

1. Odopod

Odopod bol navrhnutý s monotónnou farebnou paletou, ale jeho cieľom bolo vyhnúť sa nudnému vzhľadu s prechodom na domovskej stránke. Veľká typografia ponúka skvelý kontrast. Je jasné, kam chcú návštevníci kliknúť.

2. Toriho oko

Tori's Eye je skvelým príkladom monochromatickej farebnej schémy. Tu sú vidieť efekty jednoduchej, ale výkonnej farebnej palety sústredenej okolo odtieňov zelenej. Táto farebná schéma sa zvyčajne dá ľahko stiahnuť, pretože jeden odtieň jednej farby bude takmer vždy fungovať s iným odtieňom rovnakej farby.

3. Súprava na prežitie syra

Červená je mimoriadne populárna farba pre paletu farieb webových stránok. Dokáže sprostredkovať bohatú zmes emócií, vďaka čomu je všestranný. Ako môžete vidieť na webovej stránke Cheese Survival Kit, je obzvlášť účinný, keď sa používa v malých dávkach. Červenú zjemňujú neutrálnejšie farby a modrá pomáha pri CTA a iných oblastiach, kde chce podnik upútať pozornosť návštevníka.

4. Ahrefs

Ahrefs je príkladom webovej stránky, ktorá voľne používa farebnú paletu. Tmavomodrá pôsobí ako prevládajúca farba, ale variácie existujú na celom webe. To isté platí pre farby oranžová, ružová a tyrkysová.

Najčastejšie otázky o farbách

1. Aká je najlepšia farba pre webovú stránku?

Modrá je určite najbezpečnejšia voľba, pretože je to najobľúbenejšia farba s 35%. Ak však všetci vaši konkurenti používajú modrú farbu, môže mať zmysel „odlíšiť“ vašu ponuku a značku. Musíte sa však uistiť, že návštevníkov nepretlačíte.

2. Koľko farieb by mala mať stránka?

Zoberme si, že 51 % značiek má monochromatické logá, 39 % používa dve farby a iba 19 % spoločností preferuje plnofarebné logá. Odtiaľto môžete vidieť, že webové stránky s 1, 2 a 3 farbami majú väčší zmysel, ako sa snažiť vytvoriť webovú stránku s farbami dúhy. Značky ako Microsoft a Google však veria vo výhodu práce s viacerými farbami, keďže vo svojich návrhoch používajú aspoň 4 plné farby.

3. Kde mám použiť farby?

Pútavých farieb treba používať s mierou, inak stratia účinok. Tento efekt musí byť v bodoch konverzie, ako sú tlačidlá „Kúpiť teraz“.