Profesionalni web dizajn nije potpun bez sheme boja. Ovaj članak će vam pokazati 20 fantastičnih alata koji će vam pomoći da dobijete savršenu shemu boja.

Na World Wide Webu postoji mnogo alata za postizanje nirvane boja. Čini se da su potpuno drugačiji, ali mnogi od njih su samo modificirane verzije popularnijih i korisnijih alata.

Stoga, kako bismo pojednostavili proces odabira sheme boja, sastavili smo 20 najboljih dostupnih alata. Oni će vam pomoći da se ne izgubite u potrazi za odgovarajućom opcijom i osjetite "blaženstvo u boji"

01. Kuler

Kuler je vjerovatno najpoznatiji alat za boje.

Adobe Kuler je nedvojbeno najpopularniji online alat za bojenje, a od jednostavnog alata za boje na webu postao je kompletan resurs za kreiranje tema i dijeljenje s drugima. Dodaci su dostupni za sve glavne Adobe aplikacije, uključujući Photoshop, Illustrator i InDesign, što Kuler čini odličnim alatom sve u jednom za redovne korisnike Creative Suite-a.

02. ColorExplorer

ColorExplorer može obavljati mnogo različitih funkcija.

Možemo reći da je to jedan od najsofisticiranijih alata na Internetu. Nudi širok raspon alata za dizajniranje, prilagođavanje i analizu vaših paleta boja. Na primjer, alati koji pomažu u određivanju dostupnosti WCAG birači boja, alati za konverziju koji vam omogućavaju navigaciju između različitih sistema i sve što vam je potrebno za odabir boja i kreiranje paleta.

03. Boje na webu

Boje na webu pokreće Flash.

Boje na Webu učitavaju čvrste boje u HEX ili RGB kodovima i stvaraju skup šema zasnovanih na različitim matematičkim proporcijama. Ovaj alat ne radi na iPadu ili iPhoneu jer koristi Flash za pokretanje programa.

04. COLOURlovers

COLOURlovers malo podsjeća na Pinterest za boje

05. Pictaculoous

Pictaculous vam omogućava da otpremite sliku i generišete šemu boja na osnovu nje.

Ovaj alat kreatora MailChimp-a omogućava vam da otpremite sliku i kreirate šemu boja na osnovu sopstvenih boja. Kompatibilan je sa nekoliko drugih instrumenata kao što su Kuler i Colourlovers. Pictaculous ima zgodnu temu za preuzimanje Adobe Swatch koja vam omogućava da brzo i jednostavno "zgrabite boje" koje su vam potrebne da upotpunite svoju fotografiju.

06. Kontrast-A

Contrast-A stvara imitaciju različitih vizuelnih nedostataka.

Ovo nije uobičajen alat za šemu boja. Dizajniran je da osigura da kreirate šemu boja usaglašenu sa WCAG pregledom nivoa kontrasta i upotrebom tehnike niske vidljivosti i daltonizma. Contrast-A ima gomilu veza do priručnika koji su jednostavniji za upotrebu od samog dokumenta sa specifikacijama.

07. ColoRotate

ColoRotate se može pohvaliti prekrasnom vizualizacijom "točka u boji"

ColoRotate ima slične funkcije kao i Kuler, ali se razlikuje po tome što prikazuje paletu na lijepom 3D konusu i mogućnost generiranja više od 5 boja u jednoj shemi. Alat se može integrirati s nekim Creative Suite aplikacijama. Dostupan je i kao iPad aplikacija i može raditi u kombinaciji sa Photoshopom u načinu konzole u boji.

08. Hex generator sheme boja

HEX stvara boje koje se dobro slažu s dostupnim rasponom boja.

HEX je mali praktičan alat za generiranje boja. Samo unesite kod boje i on će prikazati skup ugodnih boja koje savršeno odgovaraju vašim osnovnim bojama.

09. Dizajner sheme boja

Dizajner sheme boja ima nekoliko zanimljivih načina za kreiranje tema boja.

Ovaj online alat ima sličnu funkcionalnost kao Adobe Kuler. Ali zahvaljujući zanimljivim trikovima za kreiranje tema boja, omogućava vam da odaberete parametre svjetline/zasićenosti i kontrasta iz svojstava sheme, umjesto da se "petljate" s pojedinačnim bojama koje čine temu. Color Scheme Designer pruža pristup skupu standardnih matematičkih metoda, uključujući mogućnost skladnog usklađivanja sheme boja dizajna za jedan (mono), dva (dopuna), tri (trijada) ili četiri (tetrada) boje sa nijansama i polutonovima.

10. COPASO

COPASO je odličan alat za rješavanje nekoliko problema odjednom.

Jedan od alata sajta COLOURlovers, COPASO zaslužuje posebnu pažnju, jer vam omogućava da istovremeno riješite mnoge probleme prilikom kreiranja paleta. Pruža kompletan set alata za odabir boja na jednostavnom interfejsu. Omogućuje vam da označite palete, otpremite slike, odmah pratite CMYK veze i odaberete kako da kreirate svoju šemu boja.

11. Colourmod

Colourmod widget na radnoj površini olakšava odabir i definiranje boja.

Colourmod je desktop alat koji vam omogućava da lako odaberete jednu od boja u području gdje se widgeti nalaze, čak i ako koristite Dashboard za MacBook ili Konfabulator za Windows. Colourmod sam po sebi nije alat za odabir palete, ali se ipak može koristiti za odabir i definiranje boje. U tom slučaju ne morate pokretati druge teže programe.

12. ColorZilla

ColorZilla radi u Chromeu i Firefoxu.

Ova aplikacija je prvobitno razvijena kao dodatak za Firefox, ali se može koristiti i u pregledniku Google Chrome. ColorZilla je ekstenzija koja ima mnoštvo različitih alata za rad sa bojom, uključujući: birač boja, kapaljku, kreiranje css gradijenta i pregled palete.

13. Colormunki

Colormunki vam omogućava da kreirate šemu boja na osnovu Pantone uzoraka.

Zgodan alat za rad na mreži, koji su predstavili kreatori Colormunki za kalibraciju boja. Možete kreirati palete od Pantone uzoraka boja na mreži i koristiti različite tehnike kako biste pronašli ugodne kombinacije.

14.colr.org

Uz Colr.org možete vidjeti raspon boja vaših slika.

Ovaj jednostavan alat pruža jedinstvenu priliku za analizu sheme boja slike (u drugim programima ova funkcija se izvodi automatski). Na ovaj način možete vidjeti od kojih boja je napravljena vaša slika i odabrati one koje želite da ih postavite kao glavne boje teme.

15. ColourGrab

ColourGrab je odličan kompaktni generator sheme boja za slike.

Ovaj zgodan alat kreira paletu boja od bilo koje slike na webu. Samo unesite URL slike koju želite da analizirate, sajt će je "zgrabiti", odrediti njen raspon boja i kreirati jednostavan 3D dijagram koji odražava upotrebu različitih boja za ovu sliku. Možda nije najbolja opcija za standardne teme, ali ColourGrab je savršen za analizu raspodjele boja na slikama.

16. ColorBlender

ColorBlender kreira set od pet boja koje se dobro stapaju jedna s drugom.

Ova stranica je jednostavan alat koji vam omogućava uzorkovanje slike, prilagođavanje boja i praćenje u realnom vremenu kako se uparuje set od 5 savršeno usklađenih boja. Palete se mogu učitati direktno u Photoshop ili Illustrator kao EPS fajl.

17. GrayBit

GrayBit ​​vam omogućava da analizirate svoju web lokaciju da vidite kako izgleda u sivim tonovima.

Ovaj zgodan alat ne odgovara direktno temama u boji, ali vam omogućava da analizirate svoju web stranicu da vidite kako izgleda kada se pretvori u sivu ton. Ovo će vam pomoći da provjerite jeste li postigli dovoljno kontrasta u paleti boja da biste je lakše čitali.

18.COLRD

COLRD je savršen za dijeljenje vaših shema boja i učenje o novima.

Ova šarena stranica je odličan izvor inspiracije, gdje korisnici dijele svoje palete boja, kao i gradijente i slike. To nije samo stranica za kreiranje shema boja, već je to pravi praznik za estetiku i vrijedi pogledati za nekoliko nevjerovatnih otkrića.

19. Lovac u boji

Colour Hunter je odlična stranica za pronalaženje novih boja.

Colour Hunter vam pomaže da brzo uskladite shemu boja učitanih slika traženjem odgovarajuće oznake ili korištenjem HEX veza. Brza i jednostavna za korištenje, stranica omogućava zanimljiva otkrića boja.

20. Stripe Generator 2.0

Stripe Generator 2.0 pomaže vam da skrenete pažnju na svoje izbore boja.

Često se naziva "najnoviji alat za web2.0". Stripe Generator 2.0 je dobar alat za stvaranje lijepih kombinacija boja i neobičnih slika u isto vrijeme.

Boja je jedan od najvažnijih elemenata u radu dizajnera. Ali kao koncept, prilično ga je teško savladati: zbog brojnih kombinacija paleta, često je teško odlučiti kako najbolje dizajnirati sučelje web stranica i aplikacija. Ranije smo objavili recenzije alata za odabir i. A danas želimo proširiti temu postavljanjem na blog prijevoda članka Osnovni alati za boje za UX dizajnere Nicka Babicha.

Ovaj post sadrži listu najboljih usluga za usklađivanje boja web stranice i UX dizajna koji vam mogu uštedjeti puno vremena. Zahvaljujući ovim projektima 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

Prirodne boje

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 su u prirodi. Možete dobiti šemu boja sa bilo koje fotografije

Behance

U popularnom servisu pronać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 biste vidjeli neke sjajne primjere novih projekata, samo odaberite boju koju želite.

Dribbble Colors

Dribbble je jedan od najboljih koji dobro dođe prilikom kreiranja korisničkog interfejsa. Ako želite vizualno razumjeti kako su drugi profesionalci 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 odrediti minimalni postotak određene boje u Dribbbleu

Designspiration

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

Designspiration pruža primjere kombinacija boja.

Tineye Multicolr

Uz pomoć Tineye Multicolr usluge usklađivanja boja, možete odrediti željeni raspon slike, pa čak i postaviti postotak svake od njih (omjer). Stranica je integrirana s 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 kapaljka, preglednik 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 izbora boja za dizajn web stranice uključuje ovu funkciju, ali Shutterstock Spectrum ima nevjerovatno korisničko sučelje i pregled koji može biti od velike pomoći.

Štaviše, nije vam potrebna pretplata, jer će preliminarna procjena slike biti sasvim dovoljna (iako ima "vodeni žig").

W3Schools

Nedavno je na blogu prikazan izbor iz W3Schools. Postoji mnogo informacija o temi, počevši od njihovih imena/šifra nijansi, teorije kombinovanja paleta pa do opisa različitih formata: HEX, RGB, CMYK, HWB, itd. Naći ćete i jednostavne generatore, pretvarače i slične "mini-usluge". Sve u svemu, zanimljivo za vidjeti.

2. Kreirajte paletu boja

Material Design Color Tool

Usluga odabira boja alata Material Design Color omogućava vam da kreirate, dijelite i pregledate grubo korisničko sučelje za svoje izbore. 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 "razmak". Alat je dobar i po tome što dobijete više od jednog rezultata, ali možete generirati nekoliko opcija mijenjajući samo početne podatke.

Šema boja zasnovana na fotografijama u Coolorsu

Adobe boja cc

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

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

Izbor boje za sajt prema slici

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

Ako koristite desktop verziju, možete jednim klikom izvesti svoj kreirani sistem boja u InDesign, Photoshop i Illustrator.

Paletton

Često se uspoređuje sa prethodnim Adobe Color CC jer su projekti 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

Poremećaji u percepciji boja danas su mnogo češći nego što mislimo. Oko 285 miliona ljudi širom svijeta ima problema s vidom. Uvijek treba provjeriti da li je odabrani dostupan takvim korisnicima.

WebAIM Color Contrast Checker

Neki tonovi se dobro slažu jedan s drugim, dok su drugi sasvim suprotni. Ogroman broj projekata ne prolazi A/A test, 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 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 u uzorku

Odaberite vrstu problema s vidom koju želite simulirati umjesto normalnog načina rada. Kao rezultat toga, 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 odaberete Achromatopsia u odjeljku Nedostatak boje, vidjet ćete web stranicu u sivoj boji.

Ovako izgleda CNN-ov projekat za osobu sa deuteranopijom.

Zaključak

Sve usluge usklađivanja boja za web stranice i UX dizajn spomenute u ovom članku zasigurno će vam pomoći u potrazi za zanimljivom i učinkovitom paletom. Ali zapamtite, najbolji način da naučite kako da kreirate neverovatne palete je mnogo vežbanje i eksperimentisanje.

Odabir sheme boja za web stranicu jedna je od važnih tačaka u procesu dizajna. Odabir kombinacije boja prilično je kompliciran i kreativan proces. Srećom, postoji mnogo usluga koje mogu pružiti značajnu podršku pri donošenju pravog izbora.

Neki od resursa spomenutih u ovoj recenziji pružaju širok izbor shema boja koje možete izabrati, dok vam drugi omogućavaju da interaktivno izgradite vlastitu shemu.

Kuler

Adobe Kuler sadrži veliku biblioteku gotovih shema boja. Možete pogledati dijagram na mreži i preuzeti ga za upotrebu u seriji Adobe Creative Suite.

Color Lovers trenutno ima skoro 2 miliona šema boja koje su kreirali korisnici. Možete ih pregledati sortiranjem po datumu, ocjeni, broju pregleda.

ColoRotate ima biblioteku gotovih shema boja. Također možete kreirati vlastitu shemu koristeći jedinstveni 3D alat. Šema boja se može koristiti direktno u Photoshopu i Fireworks pomoću dodatka ColoRotate.

Color Scheme Designer vam omogućava da odaberete vrstu sheme boja (mono, besplatna, trijada, tetrada, analogna). Zatim možete podesiti boje i vidjeti djelovanje sheme koristeći primjer.

ColorSchemer ima veliku biblioteku šema boja koje kreiraju korisnici. Možete ih sortirati prema datumu objave, ocjeni ili broju preuzimanja.

Pictaculous je jednostavan alat za generiranje shema boja na mreži. Možete prenijeti sliku, a usluga će generirati dijagram koji će se koristiti sa slikom.

Boja spire

Color Spire je usluga vrlo jednostavna za korištenje. Odaberete osnovnu boju i ona predlaže shemu boja. Također možete vidjeti izgled dijagrama na jednostavnom predlošku.

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

1. Koristite dobro poznati raspon

Stranica brandcolors.net sadrži više od 500 kombinacija boja poznatih brendova. Yandex, Google, Burger King koriste jednu paletu u svim svojim proizvodima. Ovi brendovi i njihove boje su poznati i vole mnogi. Unesite naziv u traku za pretragu ili prelistajte 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. Stranica ima stotine profesionalnih paleta u 4 boje. Nakon što odaberete onu koja vam je potrebna, kliknite i kopirajte kodove boja s panela koji se otvorio s desne strane.

Osim toga, usluga sadrži gotov izbor od 24 boje ravnog dizajna. Kliknite na lijevo ispod naziva "Flat Colors" i uzmite šifru nijanse 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, kliknite na nju. Otvoriće se prozor za preuzimanje slike.
• Možete odabrati fotografiju ili sliku sa svojom omiljenom šemom boja 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ž čuva rezultujuću paletu sa kodovima boja na vašem računaru.
• Dugme Auto generiše nove kombinacije na osnovu iste fotografije.
• Kliknite "OK" 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 stranicu coolors.co, ne možete samo 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 na paleti),
• Prilagodite (podesite nijansu, zasićenost, svjetlinu, itd.),
• Zaključavanje (boja brave).