Spalvų kodai ir teorija tinklalapių kūrime

Tinklalapių dizaine ir spaudos darbuose spalva yra vienas iš dažniausiai naudojamų atributų bei pagrindinių priemonių, lemiančių gražų dizainą ir formuojančių vizualinį turinį. Tinkamai parinktos spalvos gali padaryti didelę įtaką vartotojui, todėl labai svarbu atidžiai apgalvoti, kokias spalvas naudoti kuriant internetinės svetainės dizainą.

Spalvų reikšmė ir psichologija

Nekyla nė abejonės, kad spalvos tiek spaudos, tiek tinklalapio dizaine yra vienas iš svarbiausių rodiklių, lemiančių gražų dizainą. Atrodo, jog spalvas galima rinktis pagal nuožiūrą, tačiau, deja, tai ne visada pasiteisina. Spalvos sukelia emocijas, kurios vienaip ar kitaip paveikia mūsų būseną ir įprasmina tam tikras asociacijas. Pavyzdžiui, pamačius raudoną spalvą truputį pakyla kraujospūdis.

Spalvų asociacijos ne iš piršto laužtos - tuo įsitikinti galite pamąstę apie įvairias gyvenimiškas situacijas. Pavyzdžiui, raudonos rožės yra dažnas romantikos simbolis, tačiau raudona spalva taip pat gali reikšti pavojų, klaidą. Užtenka prisiminti, kad kompiuterio programose klaidų ikona dažnai yra raudonos spalvos. Kita vertus, žalios spalvos ikonos nurodo, kad tam tikras programos veiksmas buvo įvykdytas sėkmingai. Tačiau, negalima kiekvienai spalvai priskirti konkrečią, vienintelę asociaciją.

Spalvų modeliai ir kodai HTML kalboje

RGB spalvų modelis ir šešioliktainiai kodai (HEX)

HTML kalboje ir kitose programavimo kalbose bei grafikos programose dažnai naudojamas trijų bazinių spalvų - raudonos, žalios ir mėlynos (sutrumpintai RGB, iš angl. red-green-blue) kodas. Šis žodis (tiksliau, trumpinys) išvestas iš pirmųjų trijų spalvų pavadinimų raidžių. RGB modelis naudojamas elektronikos prietaisuose, kuriuose integruotos funkcijos atvaizduoti ar gauti spalvoms, pavyzdžiui, televizoriuose, kompiuterių monitoriuose, telefonų ekranuose, projektoriuose, skaitytuvuose, vaizdo kamerose ir skaitmeniniuose fotoaparatuose.

Spalvos intensyvumas RGB modelyje nurodomas procentaline skale nuo 0 iki 100 procentų arba šešioliktaine skaičių sistema (HEX). HEX kodas yra šešių pozicijų šešioliktainis skaičius, kurio pirmi du skaitmenys atitinka raudonos, antri - žalios, treti - mėlynos spalvos intensyvumą. Pavyzdžiui, juodą spalvą galime nurodyti RGB(0, 0, 0), o HEX - #000000. Baltą spalvą atitinka kodas “#FFFFFF“. Visų kitų spalvų kodai yra tarp šių dviejų kodų. Skaičiavimuose RGB reikšmės nurodomos nuo 0 iki 255. Pavyzdžiui, raudoną spalvą galima nurodyti RGB(255, 0, 0), o HEX - #FF0000.

RGB modelyje spalva nagrinėjama kaip spinduliavimas, o visų trijų maksimalios reikšmės sudaro baltą spalvą. Daugelis spalvų turi ne tik kodus, bet ir savo pavadinimus, kurie gali būti naudojami vietoje tų spalvų kodų, jei taip yra patogiau.

CMY ir CMYK spalvų modeliai

CMY modelį sudaro trys pirminės spalvos: cianas (ciano mėlis), purpurinė ir geltona. Trumpinys, kaip ir RGB atveju, išvestas iš pirminių spalvų pavadinimų pirmųjų raidžių: Cyan, Magenta, Yellow. Priešingai negu RGB modelyje, CMY modelyje trijų spalvų nulinės reikšmės sudaro baltą spalvą, o maksimaliosios - juodą. Tačiau čia trijų spalvų nulinės reikšmės sudaro baltą spalvą, o maksimaliosios - juodą.

Spaudoje naudojamas CMYK modelis, kuris yra beveik tas pats CMY, tačiau skiriasi vienu dalyku. Teoriškai, sumaišius spalvas CMY maišymo būdu turėtume gauti juodą spalvą, tačiau praktikoje taip nėra. Iš tikrųjų sumaišytos spalvos sudaro tamsiai rudą spalvą. Taip pat, pastoviai maišant visas tris spalvas juodai spalvai gauti nėra ekonomiška - išnaudojama daug dažų, o popierius tiesiog persigeria dažais, todėl spausdinys ilgiau džiūna.

Šioms problemoms išspręsti į CMY sistemą buvo įvestas tamsumą ir šviesumą reguliuojantis raktas (juoda spalva), todėl ir atsirado CMYK modelis, kur K reiškia Key (juoda). Tokiu atveju į maišymą įtraukiami juodi dažai, kuriais galima išgauti ryškią juodą spalvą ar papildomus atspalvius.

Atliekant spaudos darbus su grafikos programomis, pravartu nustatyti CMYK spalvų sistemą, kadangi to dažniausiai prašys klientai. Be to, taip išvengsite problemų su spalvų netikslumais, kadangi spalvų konvertavimas iš RGB į CMYK yra sudėtingas, todėl konvertuojant atsiranda paklaidos. Gali būti atvejų, kai spaudos darbas kompiuterio monitoriuje skirsis nuo jau atspausdinto varianto (spalvų atžvilgiu).

Spalvų teorijos pagrindai ir spalvų ratas

Spalvų teorija - tai mokslas apie spalvų veikimą. Nors tai skamba sudėtingai, yra kelios paprastos sąvokos, kurias galite perimti, kad praturtintumėte savo žiniatinklio svetainės dizaino spalvų supratimą.

Pirminės, antrinės ir tretinės spalvos

Pirmiausia, turite suprasti pagrindines, antrines ir tretines spalvas. Standartiniame RYB (red, yellow, blue) spalvų modelio rate yra 3 pirminės spalvos: mėlyna, raudona ir geltona. Tai yra spalvos, kurių negalima sukurti sumaišius bet kurias kitas dvi spalvas.

Antrinės spalvos sukuriamos maišant dvi pirmines spalvas. Pavyzdžiui, sumaišius mėlyną ir geltoną gaunama žalia. Taigi, antrinės spalvos yra oranžinė, žalia ir violetinė.

Tretinės spalvos sukuriamos maišant pagrindinę ir antrinę spalvą, kurios spalvų rate yra viena šalia kitos. Taip sukuriamos sudėtinės spalvos, pavyzdžiui, sumaišius mėlyną (pagrindinę) ir violetinę (antrinę), gaunama mėlynai violetinė. Kiti pavyzdžiai: raudonai oranžinė, geltonai oranžinė, geltonai žalia (liaudiškai - salotinė), mėlynai žalia, mėlynai violetinė ir raudonai violetinė (rausva, rožinė).

Spalvų rato paskirtis

Spalvų ratas - tai vizualinė spalvų reprezentacija, kurioje susiję atspalviai vaizduojami aplink apskritimą. Spalvų rato paskirtis - padėti dizaineriams vizualizuoti spalvas ir suprasti, kaip jos susijusios viena su kita. Tai leidžia lengviau kurti harmoningus spalvų derinius. Galima daryti išvadą, kad gebėjimas skirti spalvas yra ne tik papildomas „priedas“ prie mūsų kūno, bet ir menas, kuris reikalauja tam tikrų žinių ir įgūdžių.

Spalvų derinimo principai ir schemos

Kaip jau anksčiau minėjau, kiekviena spalva sukuria tam tikrą įspūdį, sukelia jausmus, emocijas, tačiau dar kitokį efektą galima sukurti panaudojus keletą spalvų - sukūrus spalvų kombinaciją arba, kitaip sakant, derinį. Spalvų derinimo klaidos yra viena iš pagrindinių priežasčių, kodėl atsiranda prastas dizainas. Egzistuoja kelios derinių kūrimo variacijos (schemos).

Yra penki pagrindiniai spalvų deriniai: monochromatiniai, analogiški, komplementarūs (papildomieji), daliniai komplementarūs (skiriamieji papildomieji), triadiniai ir tetradiniai.

Monochromatinė spalvų schema

Naudojant monochromatinę spalvų schemą pasirenkama tam tikra viena spalva, o po to iš jos išvedami papildomi atspalviai tamsinant, šviesinant arba keičiant tos spalvos sodrumą (angl. saturation). Šią schemą pravartu naudoti tada, kai norima sukurti solidarumo įspūdį (ypatingai tam tinka mėlyna spalva). Tiesa, kas turi pliusų, turi ir minusų. Pagrindinė problema naudojant šią schemą iškyla tada, kai norima išryškinti tam tikrą tinklalapio dizaino elementą (nors ta pati situacija tinka ir spaudos dizainui), mat tarp panašių atspalvių norimas elementas gali „pasimesti“, todėl svetainės lankytojai gali paprasčiausiai pražiopsoti informaciją, kurią jūs norite jiems parodyti. Kitaip sakant, tinkamai neišryškinus svarbios informacijos, lankytojai gali jos nepastebėti.

Analoginė spalvų schema

Anksčiau užsiminiau apie spalvų ratą ne be reikalo - spalvų schemos remiasi šiuo principu. Analoginė spalvų schema sudaroma pasirinkus vieną bazinę spalvą bei spalvas, esančias šalia pasirinktosios spalvų rate. Analoginės spalvos spalvų rate yra viena šalia kitos. Pavyzdžiui, žalia ir geltonai žalia. Kaip ir monochromatinė spalvų schema, ši taip pat stokoja kontrasto, tačiau čia yra didesnis spalvų pasirinkimas ir visgi galima sukurti žaismingesnį dizainą. Ši schema sudaroma pasirinkus norimą spalvą iš spalvų rato ir šalia esančias spalvas.

Komplementarinė (papildomoji) spalvų schema

Papildomos spalvos spalvų rate yra viena priešais kitą. Papildomoji schema yra pati efektyviausia tuo atveju, kai norima sukurti ryškų spalvinį kontrastą. Kontrastingos spalvos kur kas labiau atkreipia dėmesį, lengva išryškinti norimus dizaino elementus. Turiu jus įspėti, kad tai pati pavojingiausia spalvinė schema, nes netinkamas jos panaudojimas privers kitus žmones šlykštėtis jūsų dizainu. Prašau jūsų, niekada nenaudokite vienos papildomosios schemos spalvos fonui, o kitos - tekstui! Pavyzdžiui, fonui pasirinkote žalią spalvą, o tekstui - raudoną. Galbūt jums, kaip ir man, atrodys visiškas absurdas pasirinkti tokią spalvų kombinaciją, nes jau po vienos perskaitytos pastraipos tokiame puslapyje pajaustumėte mirguliavimą, skausmą akyse. Taip ne tik pravirkdytumėte lankytojus, tačiau taip pat sugadintumėte svetainės įvaizdį.

Skiriamoji papildomoji (Split-Complementary) spalvų schema

Tai panaši schema į papildomąją, tačiau skiriasi spalvų pasirinkimo iš spalvų rato galimybe. Šiuo atveju pasirenkame pirmąją spalvą iš rato, o iš jo priešingos pusės pasirenkame gretimas spalvas (t.y. ne pačią priešingą spalvą, bet tas, kurios yra šalia jos). Kaip ir papildomoji, skiriamoji papildomoji schema taip pat leidžia sukurti ryškų kontrastą, tačiau šios schemos spalvos suteikia daugiau harmonijos. Pavojai ir galimos klaidos yra tos pačios, kurios galioja ir papildomajai schemai.

Triadinė (trijų sudaromosios) spalvų schema

Trijų sudaromosios schemos principas labai paprastas: paimame 3 spalvas, atitolusias viena nuo kitos vienodu atstumu, t. y. kiekvieną spalvą paimame kas 120 laipsnių. Viena iš galimų šios schemos spalvų kombinacijų: mėlynai violetinė, raudonai oranžinė ir geltonai žalia.

Tetradinė spalvų schema

Tetradinės spalvos - tai keturios spalvos, sudarytos iš dviejų porų viena kitą papildančių spalvų (pavyzdžiui, raudona, žalia, mėlyna ir oranžinė).

Spalvų pasirinkimo gairės ir dažniausios klaidos tinklalapio dizaine

Kuriant internetinės svetainės dizainą reiktų gerai apgalvoti, kokias spalvas naudoti. Gali užtekti vienos sekundės, jog svetainė nepritrauktų naudotojo dėmesio ir jis išeis. Todėl labai svarbu pasirinkti tinkamas spalvas svetainei. Pagrindinis patarimas - išlaikyti paprastumą. Štai keletas patarimų, kaip susikurti tinkamą spalvų paletę svetainės dizainui:

1. Išlaikykite paprastumą. Gali atrodyti, kad tai yra labai sudėtinga, bet taip neturėtų būti. Rinkdamiesi spalvų schemą, galvokite apie paprastumą. Tikrai sudėtinga, įtempta spalvų schema dažnai klaidina akį. Paprastumas gali lengvai sujungti spalvų schemą. Jei įdarbinsite tik kelias spalvas, viskas atrodys vientisa. Be to, vartotojams nereikia sudėtingai mąstyti, kad suvoktų, kas vyksta. Tai vienas iš puikios svetainės požymių. Jei persistengsite su spalvomis, jūsų vartotojai bus dar labiau sutrikę.
2. Kontrastuokite spalvas. Tai vienas svarbiausių gero dizaino elementų, kurį galite naudoti kurdami svetainės spalvų schemą. Kontrastas sukuria poveikį ir gali atkreipti dėmesį į tam tikras puslapio dalis. Pavyzdžiui, raudonas CTA (kvietimas veikti) mygtukas violetiniame fone yra puikus kontrasto veikimo pavyzdys. Yra atlikta stebėtinai daug CTA spalvų pasirinkimo tyrimų, kurie įrodo, kad išsiskiriantys mygtukai geriau konvertuoja. Taigi, jei turite kažką, ką tikrai norite, kad naudotojai pastebėtų, padarykite, kad tai kontrastuotų su likusia puslapio dalimi.
3. Įtraukite savo prekinio ženklo firminį stilių. Jeigu turite savo prekinį ženklą, greičiausiai jau turite savo firminį stilių. Tokiu atveju reikėtų įtraukti savo prekinio ženklo stilistiką į savo internetinę svetainę.

Dažniausios klaidos ir pavyzdžiai

Spalvų derinimo klaidos yra viena iš pagrindinių priežasčių, kodėl dizainas neatrodo gerai. Per keletą metų pastebėta, kad pradedantieji tinklalapių dizaineriai piktnaudžiauja pilka spalva. Susidaro įspūdis, kad Lietuvos žmonės yra prislėgti, kupini skausmo, nusivylimo ir depresiją keliančių minčių. Žinoma, taip rašau ironizuodamas, tačiau situacija yra būtent tokia.

1. Nepakankamas kontrastas. Tekstas, esantis turinio srityje, beveik susilieja su fonu, kadangi tarp teksto ir fono spalvos nesudarytas tinkamas kontrastas.
2. Mirguliuojančios antraštės. Antraštė „Svetainės pavadinimas“ mirguliuoja akyse dėl esančios ryškios fono spalvos, kuri, beje, labai blaško dėmesį bandant perskaityti antraštę. Kaip ir turinio dalyje, nėra tinkamo kontrasto tarp teksto ir fono.
3. Monotoniškas dizainas. Dizainas, kuriame „persūdyta“ pilkos spalvos, dažniausiai atrodo labai monotoniškas, neišvaizdus ir neįdomus (tik nemaišykite su paprastumu - tai visai kas kita). Tokiu atveju labai sunku prie pilkų atspalvių pritaikyti ryškesnes spalvas, jas subalansuoti taip, kad per daug neišryškėtų nepirminiai dizaino elementai.

Tačiau ne visais atvejais dominuojanti pilka spalva yra blogis - kartais to reikalauja pati tinklalapio idėja, tema. Pavyzdžiui, apsilankę „Colour Lovers“ svetainėje pamatysite, kad dizaine dominuoja pilka spalva. „Color + Design Community for Creative Inspiration“ („Spalvos + dizaino bendruomenė kūrybiniam įkvėpimui“) - kontraversiškas šūkis svetainei, kurios dizaine dominuoja pilka spalva, tiesa? Deja, ne viskas taip paprasta, kaip atrodo. Atminkite, kad svetainėje publikuojamos spalvų paletės, kombinacijos, todėl žiūrint kokią nors paletę (pavyzdžiui: „Green Door“) aplink tą sritį, kurioje rodoma paletė, turėtų būti neutralios spalvos, kurios netrikdytų pamatyti bendro paletės vaizdo, harmonijos.

Taip pat atkreipkite dėmesį, kokia teksto spalva buvo parinkta skirtingose tinklalapio dalyse. Pažvelgę į prisijungimo sritį pamatysite, kad registracijos mygtukas („REGISTER“) išsiskiria iš kitų mygtukų („LOST PASSWORD“, „GO“) bei apskritai iš visų kitų elementų, esančių prisijungimo srityje (tinklalapyje), kadangi registracijos mygtuko fono spalva yra raudona. Tokiu būdu siekiama lankytojų žvilgsnius nukreipti būtent ties registracijos mygtuku. Tačiau rekomenduoju atsargiai naudoti pilką spalvą ir ja nepiktnaudžiauti kiekviename dizaine.

Naudingi įrankiai spalvų paletėms kurti

Pačiam sukurti spalvų paletę be papildomų programų ar aplikacijų yra gana sudėtinga - galima greitai sudarkyti spalvų kombinacijos harmoniją pridėjus spalvą, kuri nedera prie kitų spalvų. Tačiau interneto platybėse slypi daug naudingų įrankių spalvų paletėms sukurti. Pateikiami įrankiai, kurie palengvina dizainerio darbą ir padeda suderinti spalvas, kurios tarpusavyje derėtų.

• Adobe Color (anksčiau Adobe Kuler) - tai vienas iš naudingiausių įrankių spalvų paletėms, deriniams kurti. Kurdami savo paletę galite nurodyti schemą, pagal kurią Adobe Color turi sugeneruoti spalvas iš bazinės spalvos (angl. Base Color). Šis įrankis leidžia peržiūrėti spalvų derinius įvairiose žymėjimų sistemose (RGB, CMYK, HEX, HSV). Jeigu nenorite kurti savo paletės, galite naudoti kitų lankytojų sukurtas paletes. Galima išsaugoti sukurtas paletes, tačiau turite būti užsiregistravęs ir prisijungęs prie Adobe Color sistemos.
• Color Scheme Designer - neturi tokio didelio funkcionalumo kaip Adobe Color, tačiau šį įrankį vis tiek rekomenduoju išbandyti. Ypatingai naudinga funkcija Color Scheme Designer aplikacijoje yra pavyzdžių generavimas pagal pasirinktas spalvas. Tai reiškia, kad galite pasirinkti spalvas, o įrankis parodys, kaip jos atrodytų pavyzdiniame dizaino makete su pasirinktomis spalvomis.
• Colour Lovers - tai ne tik web įrankis spalvų paletėms kurti, o internetinė svetainė, turinti milžinišką bendruomenę - virš 220 000 užsiregistravusių lankytojų. Šiame tinklalapyje galite kurti savo spalvų paletes, derinius, juos publikuoti, taip pat peržiūrėti kitų narių sukurtas paletes, jas komentuoti, įvertinti. Be to, galima sekti populiarias spalvų tendencijas interneto tinklalapių ir žurnalų dizainuose.

Spalvų (HTML) kodų skaičiuoklė ir lentelė

Spalvų (HTML) kodų skaičiuoklė skirta gauti bet kokios spalvos kodui HEX, RGB ar HSL formatu. Šešioliktainiai spalvų kodai yra naudojami dirbant su HTML bei kitomis programavimo kalbomis, taip pat su paveikslėlių bei video redagavimu. Be jų išsiversti praktiškai neįmanoma. Kodas „#000000“ atitinka juodą spalvą, o kodas „#FFFFFF“ - baltą. Visos kitos spalvos yra minėtų spalvų šešioliktainių reikšmių intervale - tarp juodos ir baltos. Nurodę spalvą skaičiuoklėje, priklausomai nuo naudojamos interneto naršyklės ir įrenginio, galite pasirinkti spalvą ir gauti kodą. Arba tiesiog nusikopijuokite iš žemiau esančios spalvų kodų lentelės spalvos kodą, kurio jums reikia!

Spalvų kodų lentelė (HEX)

Šioje lentelėje pateikti šešioliktainiai spalvų kodai (HEX), dažniausiai naudojami HTML bei kitose programavimo kalbose ar paveiksliukų, video redagavimo įrankiuose, tokiuose kaip Adobe Photoshop, MS Paint, Filmora, DaVinci, Excel, Word ir pan.

Apibendrinimas

Apžvelgėme bendrąją spalvos teoriją, spalvų derinimo principus, spalvų schemas ir kombinacijas, išsiaiškinome, kokių klaidų vertėtų vengti ir kaip jas ištaisyti. Kaip matote, nagrinėjant spalvų svarbą dizaine, reikia atsižvelgti ne tik į tai, kokias, tačiau ir kaip tinkamai pasirinkti spalvas. Spalvos tiek puslapio dizaine, tiek žurnaluose ir spaudos darbuose turi nemažą įtaką, ypač reklamose, kurios įtakoja žmonių pasirinkimus. Tinkamai parinktos ir suderintos spalvos gali pritraukti dėmesį ir palikti teigiamą įspūdį. Viliuosi, kad tai, ką perskaitėte šiame straipsnyje, padės jums ateityje kurti patrauklius ir gražius dizainus.

tags: #tinklapiu #kurimo #spalvu #kodai

Populiarūs įrašai:

• Neveikiantis ABS: ar saugu eksploatuoti automobilį?
• Kaip valyti Epson L3060 purkštukus
• Sužinokite apie „Starter Set Blue“ nešiojamą biotualetą
• Kaip tinkamai pasirinkti ir prižiūrėti ratlankius: išsamus gidas
• apie Fendt paskirstymo veleno pavarą