Krug u boji. Varalica s hladnom kombinacijom boja

Boja se naširoko koristi u dizajnu - omogućuje vam "oživljavanje" sadržaja - stvaranje semantičke veze između elemenata, ispunjavanje djela emocijama i raspoloženjem. Dizajneri početnici biraju nasumične boje, ali postoje načini da se boje koriste smislenije. Razmotrite 4 takve metode, organizirane prema načelu od jednostavnog do složenog.

1. Koristite poznatu gamu

Na web stranici brandcolors.net prikupljeno je više od 500 kombinacija boja poznatih marki. Yandex, Google, Burger King koriste istu paletu u svim svojim proizvodima. Ovi brendovi i njihove boje mnogima su poznati i dragi. Upišite naziv u traku za pretraživanje ili se pomičite kroz stranicu, kliknite na željenu marku i boju: njen kod će se kopirati u međuspremnik.

2. Odaberite gotovu profesionalnu paletu

Najlakši način je uzeti gotovu kombinaciju boja. Nije potrebno svaki put iznova izmišljati kotač jer su skladne kombinacije odavno poznate. Idite na colordrop.io i odaberite. Na web stranici postoje stotine profesionalnih paleta od 4 boje. Nakon što odaberete onu koju želite, kliknite i kopirajte kodove boja s ploče koja se otvara s desne strane.

Osim toga, usluga sadrži gotov izbor od 24 boje ravnog dizajna. Kliknite lijevo ispod naziva "Ravne boje" 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 teža. Ali i učinkovitije.

• Na stranici coolors.co na gornjoj ploči s lijeve strane pronađite ikonu kamere, kliknite na nju. Otvorit će se prozor za učitavanje slike.
• Možete odabrati fotografiju ili sliku sa shemom boja koja vam se sviđa sa svog računala ili kopirati vezu u prazan stupac.
• Servis će odrediti kombinaciju boja (ispod, ispod postavljene slike).
• Pojedinačne boje ove palete možete promijeniti tako da ih označite i odaberete točku na fotografiji iz koje želite preuzeti boju.
• Gumb "Kolaž" sprema dobivenu paletu s kodovima boja na računalo.
• Gumb "Auto" generira nove kombinacije na temelju iste fotografije.
• Kliknite "U redu" i idite na glavnu stranicu web mjesta 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. Napravite vlastitu shemu boja online

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

Na svakoj boji 4 ikone gumba:

• Alternativne nijanse - Nijanse boja (tamnije i svjetlije),
• Povlačenje (pomicanje boje udesno ili ulijevo na paleti),
• Podešavanje (podešavanje nijanse, zasićenosti, svjetline itd.),
• Zaključaj (popravi boju).

Boja je jedna od naj važni elementi u radu dizajnera. No, kao koncept, prilično ga je teško svladati: mnoge kombinacije paleta često otežavaju odluku kako najbolje stilizirati sučelje web stranica i aplikacija. Prethodno smo objavili recenzije alata po izboru i. A danas želimo proširiti temu objavljivanjem prijevoda članka Essential Color Tools for UX Designers Nicka Babicha na blogu.

Ovaj post sadrži popis najboljih usluga usklađivanja boja za web stranice i UX dizajn koji će vam uštedjeti mnogo vremena. Kroz ove projekte naučit ćete:

• odakle crpiti inspiraciju;
• kako izraditi vlastitu paletu;
• kako dizajn učiniti dostupnim osobama s oštećenjem kolornog vida.

1. U potrazi za inspiracijom

Boje prirode

Crpite iz svijeta oko sebe. Sve što trebate je samo pogledati oko sebe. Modna odjeća, naslovnice za knjige, dizajn interijera... toliko je nevjerojatnih stvari oko vas. Ali najbolje kombinacije boja su boje prirode. Uhvatite prekrasan trenutak i pokušajte kreirati vlastiti odabir na temelju određene slike.

Najbolje kombinacije boja nalaze se u prirodi. Možete dobiti shemu boja iz bilo koje fotografije

Behance

U popularnoj usluzi pronaći ćete zanimljive radove uključene u najbolje internetske portfelje pravih profesionalaca u svom području. Ova je stranica također izvrstan izvor inspiracije. Da biste vidjeli nove vrijedne primjere projekata, samo odaberite boju koju želite.

Dribbble boje

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

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

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

inspiracija za dizajn

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

U Designspirationu ćete pronaći različiti primjeri kombinacije boja

Tineye Multicolr

Pomoću usluge usklađivanja boja Tineye Multicolr možete odrediti željenu gamu slike, pa čak i postaviti postotak svake od njih (omjer). Stranica je integrirana s bazom podataka od 20 milijuna Creative Commons fotografija s Flickra. Ovo je definitivno jedan od naj brzi načini pronaći u savršenoj paleti.

Colorzilla

ColorZilla je proširenje za instalaciju u preglednike Chrome i Mozilla Firefox. Uključuje alate kao što su kapaljka, pregledavanje paleta, stvaranje i još mnogo toga.

ColorZilla proširenje dostupno u Chromeu i Firefoxu

Shutterstock Spectrum

Jedan od najboljih načina da dobijete ideju o tome kako će shema boja izgledati je da pogledate odgovarajuće slike. Većina rješenja koja nude izbor boja dizajna web stranice uključuju ovu značajku, ali Shutterstock Spectrum ima nevjerojatno korisničko sučelje i pregled koji stvarno može dobro doći.

Štoviše, nije vam potrebna pretplata, jer će preliminarna procjena slike biti sasvim dovoljna (čak i unatoč činjenici da ima "vodeni žig").

W3Schools

Nedavno je jedan blog pregledao izbor iz W3Schools. Postoji mnogo informacija o ovoj temi, u rasponu od njihovih naziva / kodova nijansi, teorije kombinacija paleta i završavajući opisom različitih formata: HEX, RGB, CMYK, HWB, itd. Također ćete pronaći jednostavne generatore, pretvarače i slične "mini usluge". Sve u svemu, zanimljivo za vidjeti.

2. Napravite paletu boja

Alat za boje materijalnog dizajna

Usluga alata za odabir boja web-mjesta Material Design Color Tool omogućuje vam stvaranje, dijeljenje i pregled shema boja za vaše odabire. Jedna od njegovih korisnih funkcija je mjerenje razine pristupačnosti bilo koje kombinacije boja.

coolors

Coolors je stranica za izradu višebojne palete. Samo popravite 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 promjenom samo početnih podataka.

Shema boja u Coolorsu na temelju fotografije

Adobe Color CC

Usluga usklađivanja boja Adobe Color CC (bivši Kuler) sada je prilično popularna. Slobodno je dostupan na internetu, ali postoji i deskriptorska verzija. Pomoću ove web aplikacije izradit ćete svoju paletu pomoću kotača boja:

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

Odabir boje za mjesto prema slici

Ovdje ima stotine gotovih kombinacija, potražite ih u rubrici "Gledaj":

Ako koristite desktop verziju, možete izvoziti sustav boja koji ste stvorili u InDesign, Photoshop i Illustrator jednim klikom.

paleta

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

Dodatno, možete pogledati. Zajedno s drugima, aplikacija vam omogućuje da radite bilo gdje, samo koristeći svoj pametni telefon. Osim izravnog stvaranja/izvoza paleta boja, ovdje možete odabrati određene boje sa slika ili koristiti osnovne opcije.

3. Učinite paletu dostupnom

Trenutno su poremećaji percepcije boja mnogo češći nego što mislimo. Oko 285 milijuna ljudi u svijetu ima problema s vidom. Uvijek trebate provjeriti je li onaj koji odaberete dostupan takvim korisnicima.

WebAIM alat za provjeru kontrasta boja

Neki tonovi savršeno se međusobno kombiniraju, dok su drugi sasvim suprotni. Ogroman broj projekata ne prolazi A/A test i to je činjenica. Vrlo je važno provjeriti vizualni dizajn sučelja i kontrast tonova, pogotovo ako je na stranici puno teksta. U ove svrhe koristite pri odabiru boja stranice.

WebAIM Color Contrast Checker alat je temeljen na webu koji provjerava kodove boja u heksadecimalnim vrijednostima.

coolors

Već smo spomenuli ovu uslugu gore. Između ostalog, Coolors će vam također pomoći da provjerite sljepoću za boje koju ste izmislili.

Vrsta sljepoće za boje u shemi

Umjesto "Normalnog" načina, odaberite vrstu problema s vidom koji želite simulirati. Kao rezultat toga, shvatit ćete točno kako će osoba koja ne može razlikovati određene boje vidjeti vaš dizajn.

Ovako osoba s protanomalijom vidi paletu

NoCoffee Vision Simulator za Chrome

Uz pomoć web stranice NoCoffee Vision Simulator možete vidjeti kako će osobe s daltonizmom ili slabovidnost percipirati pojedine web stranice. Na primjer, ako navedete opciju "Achromatopsia" u odjeljku "Color Deficiency", vidjet ćete web stranicu u sivoj boji.

Ovako izgleda projekt CNN-a za osobu s deuteranopijom

Zaključak

Sve usluge usklađivanja boja za web stranice i UX dizajn spomenute u članku svakako će vam pomoći u potrazi za zanimljivim i učinkovitim asortimanom. Ali zapamtite: Najbolji način naučite kako stvoriti nevjerojatne palete - puno vježbajte i eksperimentirajte.

Predstavljamo koristan alat za odabir boja - Ittenov kotačić boja.

Što je?

Ukratko, radi se o tri diska postavljena na istoj osi na čijim su površinama prikazane sve primarne boje svjetlosnog spektra, najveći mogući broj nijansi i kontrastna ljestvica.

Međusobni raspored boja, nijansi, utora i pokazivača na krugu provodi se na temelju zakona "koloristika" (teorija boja), tako da je uz njegovu pomoć vrlo prikladno odabrati skladne kombinacije nijansi gdje je to potrebno.

To jest, zapravo, to je "živa", materijalna varalica, koja prikazuje sve glavne sheme boja. "Uživo", jer se može podići, za razliku od slike na ekranu.

uređaj kotača boja

Dizajnerska strana Umjetnička strana

Kupiti

Naravno, morate znati koristiti tako naizgled složen uređaj, pa na našoj web stranici možete ne samo kupiti kotačić u boji, već se i detaljno upoznati s njegovim uređajem, pročitati upute za korištenje, pogledati razne videozapise o ova tema.

Također preporučujemo da se upoznate s online uslugom za odabir boja u odjeći.

Krug za odabir kombinacije boja

Prethodnik ovog uređaja u svom moderni oblik je Ittenov prsten u boji (vidi sliku dolje).

Upravo je Johannes Itten prvi izdvojio točno dvanaest boja iz čitavog spektra i poredao ih u krug na način da parovi koji su međusobno što više kontrastni budu jedni nasuprot drugima. U središte je postavio trokut s tri osnovne boje - crvenom, plavom i žutom (od njih se sve ostale mogu dobiti miješanjem u različitim omjerima). Itten je ovaj trokut zatvorio u šesterokut, unutar kojeg je naznačio koje će se nijanse dobiti miješanjem primarnih boja u jednakim omjerima.

Odnosno, prva informativna poruka koju takav raspored nosi upućena je umjetnicima početnicima - oni mogu jasno vidjeti rezultate miješanja različitih boja.

Pogledajmo pobliže ovu točku.

Zašto postoji dvanaest osnovnih boja?

• Kao što vidite na slici, postoji tri primarni boje (koje se nazivaju i primarnima).
• Miješajući ih u parovima u jednakom omjeru, možete dobiti tri sekundarni, ukupno - šest.
• Smjesa primarni sa susjednim krugom sekundarni daje tercijarni boja. Ispada još šest kombinacija, ukupno - dvanaest.(Također, tercijarne boje se mogu dobiti miješanjem primarnih boja u nejednakim omjerima)

Naravno, dvanaest boja nije dovoljno za navigaciju okolnom raznolikošću boja i pronalaženje željene nijanse ili vidjeti što se događa kada se miješaju ne susjedne, već potpuno proizvoljne boje. Stoga su oni krugovi koje možete pronaći u prodaji ili naručiti na ovim stranicama kompliciraniji i nose puno više korisna informacija nego jednostavan "dvanaestodijelni Ittenov prsten".

Vodič za miješanje boja

Pomoću njega možete odrediti rezultat miješanja proizvoljnih boja i nijansi - broj kombinacija je dovoljan da umjetnik shvati koje boje treba miješati da bi se dobila određena nijansa. Ovo je prekrasna pomoć pri crtanju, posebno za umjetnike početnike.

Čak i ako se nijansa malo razlikuje od željene, željeni rezultat može se postići promjenom omjera miješanih boja.

Ali kako odrediti te iste proporcije? Je li nasumično? Ne, kotačić boja također može pomoći u tome.

skala zasićenja

Ova se ljestvica nalazi na istoj strani kao i vodič za miješanje jer dvije funkcije rade u tandemu.

Ljestvica zasićenja je gradacija tonova sive od crne do bijele. Iz sivih ćelija različite svjetline prikazanih na ljestvici uvijek možete pronaći sivu nijansu koja je što bliža zasićenosti željenoj nijansi, nakon čega će postati jasno koliko trebate potamniti ili posvijetliti boju.

Da vidite kako se to radi u praksi, pogledajte ovaj video:

Sheme kombinacija boja

Stražnja strana diska ne sadrži manje korisne informacije, a možda čak i više - pomaže u odabiru kombinacija boja na temelju odabrane sheme.

Shema kombinacije boja- ovo je figura, u najjednostavnijem slučaju, linija koja povezuje "prikladne" boje jedna s drugom. Formulacija je vrlo nejasna, budući da je odabir kromatske ljestvice i znanost i umjetnost.

Prvo, sklad ili nesklad boja vrlo je subjektivan pojam. Kako se kaže, "za okus i boju nema prijatelja".

Drugo, jesu li "prikladni" ili "neprikladni" - sve ovisi o konkretnoj situaciji, raspoloženju, što točno umjetnik ili dizajner želi reći, o stilu u kojem je ovaj rad napravljen, je li potrebno istaknuti bilo koji element, ili obrnuto - učiniti ga nevidljivim.

Kotač boja je alat na kojem možete vizualno prikazati sve glavne sheme boja, ali morate znati koristiti ovaj alat. Morate sami znati ili barem osjetiti koja je od shema najprikladnija za vaš zadatak. S naše strane, pokušat ćemo na ovu stranicu staviti najviše korisnih informacija o tome kako koristiti kotačić u boji (vidi odjeljak

Boje igraju veliku ulogu u web dizajnu. Da biste pravilno odabrali shemu boja za web mjesto, postoje posebne usluge. Siguran sam da svaki web dizajner ima barem jednu u svojim oznakama.

Ponekad sjedite i razmišljate o tome koju nijansu plave odabrati kao glavnu za mjesto, malo svjetliju ili malo svjetliju, ili možda tamniju ... I još uvijek trebate odabrati dodatne za nju. Naravno, to možete učiniti okom, ali bolje je koristiti jednu od posebnih usluga.

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

Prijatelj sam s ovim instrumentom dugi niz godina. Najprikladniji alat za odabir boja (po mom mišljenju). Ima mnoge dodatne značajke. Na primjer, možete vidjeti primjer svijetle i tamne stranice s odabranim bojama.

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

Adobe Kuler je drugi web alat koji često koristim. Odabir sheme boja je gotovo isti kao na prethodnoj stranici, ali ne volim je zbog toga. Osim što sami možete izraditi sheme boja, možete pregledavati i koristiti sheme koje su izradili drugi ljudi.

Da biste to učinili, kliknite gumb u gornjem lijevom izborniku "Gledaj". I vidjet ćete galeriju svih vrsta kombinacija boja.

Ovaj je alat pomalo sličan Colorschemeu, ali ima manje značajki, no moguće je vidjeti kako će izgledati blokovi boja.

Ovu stranicu rijetko koristim, ali pošto je već imam u svojim bookmarkovima, odlučio sam je dodati.

Sljedeće dvije stranice generiraju paletu iz slike po vašem izboru. To je magija :)

Vi birate bilo koju sliku čije vam se boje sviđaju, servis je analizira i daje vam paletu boja. Ove dvije stranice razlikuju se samo u tome kako im dati sliku.

Ova stranica treba preuzimanje datoteka sliku s vašeg računala.

Vrlo zgodan birač boja. Po principu "Like - Dislike".

flatcolors.net

Kao što naziv implicira, ovdje možete odabrati boje za sada trendi, ravni dizajn. Stranica je zanimljiva po tome što odabirom palete možete istu preuzeti za programe Corel i Photoshop.

materialpalette.com

Još modni trend- dizajn materijala. Ova stranica pomaže u odabiru kombinacija boja za UI (korisničko sučelje). Osim toga, stranica ima velik skup ikona.

I na kraju opet korisničko sučelje. Ovo je samo skup 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 oznakama.

Napišite u komentarima koje stranice za usklađivanje boja za web dizajn koristite?

Trebate web stranicu s pravim bojama? učinimo to :)

Pronašli ste grešku? Označite dio teksta i kliknite CTRL+ENTER

Dečki, uložili smo dušu u stranicu. Hvala na tome
za otkrivanje ove ljepote. Hvala na inspiraciji i naježenosti.
Pridružite nam se na Facebook I U kontaktu s

Shema broj 1. Komplementarna kombinacija

Komplementarne ili dodatne, kontrastne su boje koje se nalaze na suprotnim stranama Ittenova kotača boja. Njihova kombinacija izgleda vrlo živo i energično, posebno s maksimalnom zasićenošću boja.

Shema broj 2. Triad - kombinacija 3 boje

Kombinacija 3 boje koje leže na istoj udaljenosti jedna od druge. Pruža visok kontrast uz održavanje harmonije. Takva kompozicija izgleda prilično živo čak i kada se koriste blijede i nezasićene boje.

Shema broj 3. Slična kombinacija

Kombinacija od 2 do 5 boja koje se nalaze jedna do druge na kotaču boja (idealno 2-3 boje). Dojam: mirno, opuštajuće. Primjer kombinacije sličnih prigušenih boja: žuto-narančasta, žuta, žuto-zelena, zelena, plavo-zelena.

Shema broj 4. Odvojeno-komplementarna kombinacija

Varijanta komplementarne kombinacije boja, samo se umjesto suprotne boje koriste susjedne boje. Kombinacija glavne boje i dvije dodatne. Ova shema izgleda gotovo jednako kontrastno, ali ne tako napeto. Ako niste sigurni da možete pravilno koristiti komplementarne kombinacije, koristite one odvojeno-komplementarne.

Shema broj 5. Tetrad - kombinacija 4 boje

Shema boja u kojoj je jedna boja glavna, dvije su komplementarne, a druga naglašava akcente. Primjer: plavo-zelena, plavo-ljubičasta, crveno-narančasta, žuto-narančasta.

Shema broj 6. Trg

Kombinacije pojedinih boja

• Bijela: ide uz sve. Najbolja kombinacija s plavom, crvenom i crnom.
• Bež: s plavom, smeđom, smaragdnom, crnom, crvenom, bijelom.
• Siva: s fuksijom, crvenom, ljubičastom, ružičastom, plavom.
• Ružičasta: sa smeđom, bijelom, menta zelenom, maslinastom, sivom, tirkiznom, bebi plavom.
• Fuksija (tamno ružičasta): sa sivom, žutosmeđom, limetom, menta zelenom, smeđom.
• Crvena: sa žutom, bijelom, smeđom, zelenom, plavom i crnom.
• Crvena rajčica: plava, menta zelena, pješčana, kremasto bijela, siva.
• Trešnja crvena: azurna, siva, svijetlo narančasta, pješčana, blijedo žuta, bež.
• Malina crvena: bijela, crna, damask ruža.
• Smeđa: svijetlo plava, krem, ružičasta, žutosmeđa, zelena, bež.
• Svijetlosmeđa: blijedo žuta, kremasto bijela, plava, zelena, ljubičasta, crvena.
• Tamno smeđa: limun žuta, nebesko plava, menta zelena, ljubičasto ružičasta, limeta.
• Crvenkasto smeđa: ružičasta, tamno smeđa, plava, zelena, ljubičasta.
• Narančasta: plava, plava, ljubičasta, ljubičasta, bijela, crna.
• Svijetlo narančasta: siva, smeđa, maslinasta.
• Tamno narančasta: blijedo žuta, maslinasta, smeđa, trešnja.
• Žuta: plava, ljubičasta, svijetloplava, ljubičasta, siva, crna.
• Limun žuta: crvena trešnja, smeđa, plava, siva.
• Blijedo žuta: fuksija, siva, smeđa, nijanse crvene, žute, plave, ljubičaste.
• Zlatno žuta: siva, smeđa, azurna, crvena, crna.
• Maslina: narančasta, svijetlosmeđa, smeđa.
• Zelena: zlatno smeđa, narančasta, zelena salata, žuta, smeđa, siva, krem, crna, kremasto bijela.
• Boja salate: smeđa, žućkastosmeđa, smeđa, siva, tamnoplava, crvena, siva.
• Tirkizna: fuksija, crvena trešnja, žuta, smeđa, krem, tamnoljubičasta.
• Električar je lijep u kombinaciji sa zlatno žutom, smeđom, svijetlo smeđom, sivom ili srebrnom.
• Plava: crvena, siva, smeđa, narančasta, ružičasta, bijela, žuta.
• Tamnoplava: svijetlo ljubičasta, nebesko plava, žućkasto zelena, smeđa, siva, blijedo žuta, narančasta, zelena, crvena, bijela.
• Lila: narančasta, ružičasta, tamnoljubičasta, maslinasta, siva, žuta, bijela.
• Tamnoljubičasta: zlatno smeđa, blijedo žuta, siva, tirkizna, menta zelena, svijetlo narančasta.
• Crna je svestrana, elegantna, stoji u svim kombinacijama, najbolje uz narančastu, ružičastu, salatastu, bijelu, crvenu, lila ili žutu.