Generatori paleta za pomoć web dizajneru. Generatori paleta za pomoć web dizajneru Kako generator stvara boje

Jedna od važnih komponenti rada web dizajnera je kreiranje palete, odabir boja koje se harmonično kombinuju jedna s drugom. Proces je prilično složen i zahtijeva kreativan pristup. Postoji niz resursa koji rad s bojom mogu učiniti mnogo lakšim.

Nedavno ste možda naišli na detaljan članak o. Nešto ranije objavio sam sličnu napomenu o alatima za selekciju s pregledom Kulera i ColorBlendera. Danas sam odlučio proširiti temu i pružiti malo više opcija za odabir paleta boja za stranicu.

ColoRotate

Alat ColoRotate omogućava vam da odaberete najprikladnije sheme boja iz velikog broja gotovih prijedloga ili kreirate vlastite. Odabirom boja na različitim mjestima na rotirajućoj 3D paleti, možete dobiti kombinacije zasnovane na harmoniji ili kontrastu, raditi sa nijansama, svjetlinom, zasićenošću i miješati različite boje. Također možete izdvojiti boje iz gotovih slika. Postoji verzija za iPad, dostupna je sinhronizacija sa Photoshopom. Vrlo lijepa usluga.

Adobe Color CC

Adobe Color CC paleta i generator šeme boja omogućava vam da:

• eksperimentirajte sa kombinacijama boja na interaktivnom kotaču boja (dostupno je 7 vrsta sistema boja);
• generirati teme boja koristeći unaprijed definirane stilove;
• kreirajte sheme boja koristeći boje s fotografije ili bilo koje druge gotove slike;
• podijelite svoj rad i upoznajte druge, crpeći inspiraciju iz njih.

Kreirane teme u boji mogu se sačuvati u aplikacijama za PC ili mobilne uređaje, kao iu odjeljku „Moje teme“ na web stranici.

DeGraeve

Web stranica DeGraeve nudi razne alate, uključujući generator sheme boja zasnovan na unaprijed napravljenim slikama. Sve što trebate učiniti je pronaći sliku na internetu sa zanimljivom shemom boja, učitati URL ove slike u odgovarajući red na web stranici i kliknuti na dugme za generisanje palete. Nakon nekoliko sekundi, program će razložiti sliku na 10 primarnih boja, 5 prigušenih (mutnih) i 5 svijetlih (živih), dodjeljujući svakoj svoj vlastiti kod. Generirana paleta je zgodna za korištenje prilikom rada na dizajnu web stranice; boje će se savršeno kombinirati jedna s drugom.

Contrast-A

Sa sloganom „Pronađi pristupačnu kombinaciju boja“, Contrast-A je dizajniran da vam pomogne da kreirate prilagođene palete dok eksperimentišete sa kombinacijama boja. Program se temelji na vodiču o kompatibilnosti boja web sadržaja (tekst i pozadina). Za rad s njim, poželjno je osnovno znanje o ovoj temi.

Usluga vam omogućava da odaberete 2 boje na paleti i procijenite kako će izgledati zajedno kada se koriste kao tekst i pozadina. Štaviše, prikazani su rezultati za normalan vid boja i različite oblike sljepoće za boje.

ColorZilla

Aplikacija ColorZilla za Firefox (dostupna i za Google Chrome) za pomoć webmasterima i grafičkim dizajnerima u radu s bojom. Biće korisno i za početnike i za napredne korisnike. Program vrši analizu boja bilo koje tačke i bilo koje stranice u pretraživaču i izdvaja boje potrebne za upotrebu u drugim aplikacijama. Definiranje palete boja stranice, odabir boja iz unaprijed postavljenog skupa, čuvanje onih koje se najčešće koriste kao dio korisničke palete - to je raspon njegovih mogućnosti.

Pictaculoous

Pictaculous je još jedan generator palete boja zasnovan na gotovim slikama. Samo trebate postaviti odabranu sliku ne veću od 500 KB na stranicu, a njena analiza boja će odmah početi. Ispod rezultata sa shemom boja slike, prikazuje se još desetak paleta, ali već ručno kreiranih od strane članova resursnih zajednica Kuler i COLOURLovers. Mogu se koristiti i kao shema boja za web stranicu koja se razvija. Rezultat možete poslati na svoju e-poštu i podijeliti ga na društvenim mrežama.

Ako znate još neke generatore palete boja, podijelite linkove u komentarima.

Boja se široko koristi u dizajnu - omogućava vam da "oživite" sadržaj - stvorite semantičku vezu između elemenata, ispunite rad emocijama i raspoloženjem. Dizajneri početnici biraju nasumične boje, ali postoje načini da se boje koriste na smislenije načine. Razmotrimo 4 takve metode, organizirane po principu od jednostavnog do složenog.

1. Koristite poznatu skalu

Web stranica brandcolors.net sadrži više od 500 kombinacija boja poznatih brendova. Yandex, Google, Burger King koriste istu paletu u svim svojim proizvodima. Ove marke i njihove boje su poznate i omiljene od strane mnogih. Unesite naziv u traku za pretragu ili skrolujte kroz stranicu, kliknite na željenu marku i boju: njen kod će biti kopiran u međuspremnik.

2. Odaberite gotovu profesionalnu paletu

Najlakši način je da uzmete gotovu kombinaciju boja. Nije potrebno svaki put iznova izmišljati točak, jer su harmonične kombinacije poznate odavno. Idite na colordrop.io i odaberite. Na sajtu se nalaze stotine profesionalnih paleta u 4 boje. Nakon što odaberete onu koju želite, kliknite i kopirajte kodove boja s panela koji se otvara s desne strane.

Osim toga, usluga sadrži gotov izbor od 24 boje ravnog dizajna. Kliknite na lijevo ispod naziva "Flat Colors" i uzmite kod za nijansu koja vam se sviđa.

3. Odredite paletu boja fotografije ili slike koja vam se sviđa

Ova metoda je malo složenija. Ali i efikasnije.

• Na web stranici coolors.co, u gornjem lijevom panelu, pronađite ikonu kamere i kliknite na nju. Otvoriće se prozor za učitavanje slike.
• Možete odabrati fotografiju ili sliku sa šemom boja koja vam se sviđa sa svog računara ili kopirati vezu u praznu kolonu.
• Usluga će odrediti kombinaciju boja (ispod učitane slike).
• Pojedinačne boje ove palete možete promijeniti tako što ćete ih označiti i odabrati tačku na fotografiji sa koje želite uzeti boju.
• Dugme “Kolaž” pohranjuje rezultirajuću paletu sa kodovima boja na računar.
• Dugme “Auto” generiše nove kombinacije na osnovu iste fotografije.
• Kliknite "U redu" i idite na glavnu stranicu stranice za daljnji rad s paletom.

Glavna stranica stranice nije ništa manje funkcionalna. Ovdje možete odabrati nijanse pojedinačnih boja ili sastaviti novu paletu zamjenom pojedinačnih boja.

4. Kreirajte vlastitu shemu boja na mreži

Učitavanjem fotografije na istu web stranicu coolors.co, ne samo da možete odrediti kod boja, već i kreirati vlastite kombinacije. Da biste to učinili, pritisnite razmaknicu - usluga automatski kreira kombinaciju od 5 boja.

Na svakoj boji 4 dugmeta sa ikonama:

• Alternativne nijanse - Nijanse boja (tamnije i svjetlije),
• Povucite (pomaknite boju udesno ili ulijevo u paleti),
• Prilagodite (podesite nijansu, zasićenost, svjetlinu, itd.),
• Zaključavanje (fiksna boja).

Boje igraju veliku ulogu u web dizajnu. Da biste ispravno odabrali shemu boja za web stranicu, postoje posebne usluge. Siguran sam da svaki web dizajner ima barem jedan od ovih u svojim oznakama.

Ponekad sjedite i razmišljate koju nijansu plave odabrati kao glavnu za stranicu, malo svjetliju ili malo svjetliju, ili možda tamniju... I još trebate odabrati dodatne za to. To, naravno, možete učiniti na oko, ali bolje je koristiti jednu od posebnih usluga.

Neću govoriti o teoriji boja (ovo je preobimna informacija), već ću jednostavno ovdje objaviti usluge koje imam u svojim bookmarkovima i koje koristim.

Prijatelj sam sa ovim instrumentom dugi niz godina. Najprikladniji alat za odabir boja (po mom mišljenju). Ima mnogo dodatnih funkcija. Na primjer, možete vidjeti primjer svijetle i tamne stranice s odabranim bojama.

Moguće je procijeniti kako će osobe s daltonizmom i drugim oštećenjima vida vidjeti vašu shemu boja. Možete odabrati web sigurne boje.

Adobe Kuler je drugi web alat koji često koristim. Izbor shema boja je skoro isti kao na prethodnom sajtu, ali to nije razlog zašto ga volim. Osim što sami kreirate sheme boja, možete pogledati i koristiti sheme koje su kreirali drugi ljudi.

Da biste to uradili, kliknite na dugme u gornjem levom meniju „Gledanje“. I pred vama će se otvoriti galerija svih vrsta kombinacija boja.

Ovaj alat je malo sličan Colorschemeu, ali ima manje funkcija, ali možete vidjeti kako će blokovi boja izgledati.

Jedva koristim ovaj sajt, ali pošto ga imam u obeleživačima, odlučio sam da ga i ja dodam.

Sljedeće dvije stranice generiraju paletu od slike koju odaberete. magija je :)

Vi odaberete bilo koju sliku čije boje volite, servis je analizira i daje vam paletu boja. Jedina razlika između ove dvije stranice je način na koji pružaju sliku.

Ova stranica zahtijeva skinuti sliku sa vašeg računara.

Vrlo zgodan alat za odabir boja. Na osnovu principa „Sviđa mi se – Ne sviđa mi se“.

Kao što ime govori, ovdje možete odabrati boje za sada moderan flat dizajn. Stranica je zanimljiva jer kada odaberete paletu, možete je preuzeti za Corel i Photoshop.

Drugi modni trend je materijalni dizajn. Ova stranica vam pomaže da odaberete kombinacije boja za korisničko sučelje (korisnički interfejs). Osim toga, stranica ima veliki skup ikona.

I konačno, ponovo korisničko sučelje. Evo samo skupa boja za dizajn korisničkog sučelja. Klikom na bilo koju boju možete vidjeti kako će se bijeli tekst čitati na određenoj pozadini.

Ovo su alati koje imam u svojim obeleživačima.

Napišite u komentarima koje stranice za odabir boja za web dizajn koristite?

Boja je jedan od najvažnijih elemenata u radu dizajnera. Ali kao koncept, može biti prilično teško savladati: zbog mnogih kombinacija paleta, često je teško odlučiti kako najbolje dizajnirati sučelje web stranica i aplikacija. Ranije smo objavili recenzije alata po izboru i . A danas želimo proširiti temu objavljivanjem prijevoda članka Essential Color Tools for UX Designers od Nicka Babicha na blogu.

Bilješka sadrži popis najboljih usluga odabira boja za web stranice i UX dizajn koji će vam pomoći da uštedite mnogo vremena. Kroz ove projekte naučit ćete:

• odakle dobiti inspiraciju;
• kako kreirati vlastitu paletu;
• kako dizajn učiniti dostupnim osobama sa oštećenim vidom boja.

1. U potrazi za inspiracijom

Boje prirode

Crtajte iz svijeta oko sebe. Sve što trebate je samo pogledati okolo. Modna odjeća, korice knjiga, dizajn interijera... toliko je nevjerovatnih stvari oko vas. Ali najbolje kombinacije boja su boje prirode. Uhvatite prekrasan trenutak i pokušajte kreirati vlastiti odabir na osnovu određene slike.

Najbolje kombinacije boja nalaze se u prirodi. Možete dobiti šemu boja sa bilo koje fotografije

Behance

U ovoj popularnoj usluzi naći ćete zanimljive radove uključene u najbolje online portfelje pravih profesionalaca u svojoj oblasti. Ova stranica je također odličan izvor inspiracije. Da vidite nove vrijedne primjere projekata, jednostavno odaberite boju koju želite.

Dribbble Colors

Dribbble je jedan od najboljih koji će vam dobro doći prilikom kreiranja korisničkog interfejsa. Ako želite vizualno razumjeti kako su drugi koristili određenu boju, idite na dribbble.com/colors i unesite željenu vrijednost.

Prilikom odabira boje za stranicu, ovdje možete postaviti njen minimalni postotak - eksperimentirajte, na primjer, pokušajte postaviti 30% plave.

Pokušajte postaviti minimalni postotak određene boje u Dribbbleu

Dizajn inspiracija

Designspiration je koristan alat prvenstveno za one koji već imaju ideje za kombinacije boja i žele vidjeti primjere takvih kombinacija. Odaberite od 1 do 5 opcija i naći ćete slike koje odgovaraju navedenim parametrima.

U Designspiration ćete pronaći različite primjere kombinacija boja

Tineye Multicolr

Koristeći Tineye Multicolr uslugu usklađivanja boja, možete odrediti željenu gamu slike, pa čak i postaviti postotak svake od njih (omjer). Sajt je integrisan sa bazom podataka od 20 miliona Creative Commons fotografija sa Flickr-a. Ovo je definitivno jedan od najbržih načina da pronađete savršenu paletu.

Colorzilla

ColorZilla je ekstenzija za instalaciju u preglednike Chrome i Mozilla Firefox. Uključuje alate kao što su kapaljke, pregledavanje paleta, kreiranje i još mnogo toga.

ColorZilla ekstenzija dostupna u Chromeu i Firefoxu

Shutterstock Spectrum

Jedan od najboljih načina da zamislite kako će izgledati shema boja je da pogledate odgovarajuće slike. Većina rješenja koja nude izbor boja za dizajn web stranica uključuju ovu funkciju, ali Shutterstock Spectrum ima nevjerovatno korisničko sučelje i pregled koji zaista može biti koristan.

Štaviše, neće vam trebati pretplata, jer će preliminarna procjena slike biti sasvim dovoljna (iako ima „vodeni žig“).

W3Schools

Nedavno je blog pregledao izbor iz W3Schools. Tamo je prikupljeno mnogo informacija o ovoj temi, počevši od njihovih naziva/šifra nijansi, teorije kombinovanja paleta i završavajući opisom različitih formata: HEX, RGB, CMYK, HWB, itd. Naći ćete i jednostavne generatori, pretvarači i slične „mini-usluge“. Sve u svemu, zanimljivo za gledati.

2. Kreirajte paletu boja

Material Design Color Tool

Alat za boje materijala dizajna vam omogućava da kreirate, dijelite sheme boja i pregledate grubo korisničko sučelje za svoje odabire. Jedna od njegovih korisnih funkcija je mjerenje nivoa pristupačnosti bilo koje kombinacije boja.

Coolors

Coolors je stranica za kreiranje višebojne palete. Samo zakačite određenu boju i pritisnite razmaknicu. Alat je također dobar jer ćete dobiti više od jednog rezultata, ali možete generirati nekoliko opcija mijenjajući samo početne podatke.

Šema boja u Coolorsu zasnovana na fotografiji

Adobe Color CC

Usluga usklađivanja boja Adobe Color CC (bivši Kuler) je sada prilično popularna. Dostupan je besplatno na internetu, ali postoji i desektorska verzija. Pomoću ove web aplikacije napravit ćete vlastitu paletu koristeći kotačić boja:

Ili možete dobiti određeni rezultat iz gotove slike:

Odabir boja za web stranicu na osnovu slike

Ovdje se nalaze stotine gotovih kombinacija, potražite ih u odjeljku "Pogledajte":

Ako koristite desktop verziju, možete jednim klikom izvesti sistem boja koji ste kreirali u InDesign, Photoshop i Illustrator.

Paletton

Često se uspoređuje sa prethodnim Adobe Color CC jer su dizajni vrlo slični. Jedina razlika je u tome što u Palettonu niste ograničeni na pet parametara, već možete eksperimentirati s dodatnim tonovima interfejsa.

Dodatno, možete pogledati. Zajedno s drugima, aplikacija vam omogućava da radite bilo gdje, jednostavno koristeći svoj pametni telefon. Pored direktnih zadataka kreiranja/izvoza paleta boja, ovdje možete odabrati određene boje sa slika ili koristiti osnovne opcije.

3. Učiniti paletu dostupnom

Danas su poremećaji vida boja mnogo češći nego što mislimo. Oko 285 miliona ljudi u svijetu ima probleme s vidom. Uvijek treba provjeriti da li je onaj koji odaberete dostupan takvim korisnicima.

WebAIM Color Contrast Checker

Neki tonovi se dobro slažu jedni s drugima, dok drugi - sasvim suprotno. Ogroman broj projekata pada na A/A testu, i to je činjenica. Vrlo je važno provjeriti vizualni dizajn interfejsa i kontrast tonova, posebno ako na stranici ima puno teksta. U ove svrhe koristite pri odabiru boja web stranice.

WebAIM Color Contrast Checker je web-bazirani alat koji provjerava kodove boja u heksadecimalnim vrijednostima.

Coolors

Ovu uslugu smo već spomenuli gore. Između ostalog, Coolors će vam pomoći da provjerite da li imate sljepoću za boje u vašoj izmišljenoj paleti.

Vrsta sljepoće za boje na dijagramu

Umjesto normalnog načina rada, odaberite vrstu problema s vidom koji želite simulirati. Kao rezultat, shvatit ćete kako će osoba koja nije u stanju razlikovati određene boje vidjeti vaš dizajn.

Ovako osoba sa protanomalijom vidi paletu

NoCoffee Vision Simulator za Chrome

Koristeći web stranicu NoCoffee Vision Simulator, možete vidjeti kako će osobe s daltonizmom ili slabovidom percipirati određene web stranice. Na primjer, ako navedete parametar "Achromatopsia" u odjeljku "Nedostatak boje", vidjet ćete web stranicu u sivoj boji.

Ovako izgleda CNN projekat za osobu sa deuteranopijom.

Zaključak

Sve usluge usklađivanja boja web stranice i UX dizajna spomenute u članku će vam svakako pomoći da pronađete zanimljivu i učinkovitu paletu. Ali zapamtite: najbolji način da naučite kako da kreirate neverovatne palete je mnogo vežbanje i eksperimentisanje.

Svaki web dizajner razumije koliko je važno. Uz pomoć boje stavljaju se akcenti - naglašavaju se važni detalji, a skrivaju pomoćni. Boja stvara raspoloženje. Boja je prva stvar koju posjetitelj web stranice vidi, čak i prije nego što pročita jedno slovo ili shvati šta je prikazano na određenoj fotografiji. Paleta boja Vaša stranica može odgoditi posjetitelja ili ga može uplašiti.

Odabir prave palete boja- prvi korak ka izgradnji idealne i besprijekorne web stranice. Boja svakog elementa stranice treba da bude u skladu ne samo sa vizuelno povezanim elementima, već i sa celokupnom šemom boja stranice i sajta u celini.

Kako ne bismo pogriješili na početku putovanja, pripremili smo mali pregled generatora sheme boja, što vam omogućava da odaberete pravi broj i kombinaciju primarnih boja koje ćete koristiti prilikom izrade vaše stranice. Neki od njih su prilično jednostavni i imaju standardnu ​​funkcionalnost, dok drugi imaju niz jedinstvenih funkcija. Ali svi će oni nesumnjivo pružiti neprocjenjivu pomoć u razvoju jedinstvenog dizajna web stranice.

Adobe Color CC

Paletton

Stiliziraj me

Coolors