Krug u boji. Cool kombinacija boja cheat sheet

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. Dizajneri početnici biraju nasumične boje, ali postoje načini da se boje koriste smislenije. Razmotrimo 4 takve metode, organizirane po principu od jednostavnog do složenog.

1. Koristite poznatu skalu

Više od 500 kombinacija boja poznatih brendova prikupljeno je na web stranici brandcolors.net. Yandex, Google, Burger King koriste istu paletu u svim svojim proizvodima. Ovi brendovi i njihove boje poznati su i vole mnogi. 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 postoje 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 š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 efikasnije.

• Na sajtu coolors.co u gornjem panelu sa leve strane pronađite ikonu kamere, kliknite na nju. Otvoriće se prozor za učitavanje slike.
• Možete odabrati fotografiju ili sliku sa šemom boja koju volite sa svog računara ili kopirati vezu u praznu kolonu.
• Usluga će odrediti kombinaciju boja (ispod, ispod postavljene slike).
• Možete promijeniti pojedinačne boje ove palete 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 "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 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 ikone dugmadi:

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

Boja je jedna od najvažnijih važnih elemenata u radu dizajnera. Ali kao koncept, prilično ga je teško savladati: mnoge kombinacije paleta često otežavaju odlučivanje kako najbolje stilizirati sučelje web stranica i aplikacija. Ranije smo objavili recenzije alata po izboru i. A danas želimo da proširimo temu tako što ćemo na blog objaviti prevod Nicka Babicha o osnovnim alatima za boje za UX dizajnere.

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

• odakle crpiti 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 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 biste vidjeli nove vrijedne primjere projekata, samo 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

inspiracija za dizajn

Designspiration je koristan alat prvenstveno za one koji već imaju ideje za kombinaciju 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čiti primjeri kombinacije boja

Tineye Multicolr

Uz Tineye Multicolr uslugu usklađivanja boja, možete odrediti željeni raspon 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 većine brze načine pronađite u savršenoj paleti.

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 dobijete ideju o tome kako će izgledati shema boja je da pogledate odgovarajuće slike. Većina rješenja koja nude izbor boja za dizajn web stranice uključuju ovu funkciju, ali Shutterstock Spectrum ima nevjerovatno korisničko sučelje i pregled koji zaista može biti od koristi.

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

W3Schools

Nedavno je blog pregledao izbor iz W3Schools. Postoji mnogo informacija o temi, počevši od njihovih imena/šifra nijansi, teorije kombinacija paleta i završavajući opisom 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

Alat za boje dizajna materijala

Usluga odabira boja na web lokaciji Material Design Color Tool omogućava vam da kreirate, dijelite i pregledate šeme boja 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 popravite određenu boju i pritisnite razmaknicu. Alat je dobar i po tome što ć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 (ranije Kuler) je sada prilično popularna. Dostupan je besplatno na Internetu, ali postoji i verzija deskriptora. Pomoću ove web aplikacije napravit ć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 sistem boja koji ste kreirali u InDesign, Photoshop i Illustrator.

paleta

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

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

3. Učiniti paletu dostupnom

Trenutno su poremećaji percepcije 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 su savršeno kombinovani jedni s drugima, 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 shemi

Umjesto "Normalnog" načina, odaberite vrstu problema s vidom koji želite simulirati. 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

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

Ovako izgleda CNN projekat za osobu sa deuteranopijom

Zaključak

Sve usluge podudaranja boja za web stranice i UX dizajn spomenute u članku će vam definitivno pomoći u potrazi za zanimljivim i učinkovitim asortimanom. Ali zapamtite: Najbolji način naučite kako da kreirate neverovatne palete - mnogo vežbajte i eksperimentišite.

Predstavljamo koristan alat za odabir boja - Ittenov točak boja.

Šta je to?

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

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

To je, u stvari, "živa", materijalna cheat sheet, koja prikazuje sve glavne sheme boja. "Uživo", jer se može podići, za razliku od slike na ekranu.

uređaj kotačić u boji

Dizajnerska strana Umetnička strana

Kupi

Naravno, morate biti u mogućnosti da koristite tako naizgled složen uređaj, tako da 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 kako ga koristiti, pogledati razne video zapise na ovu temu.

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

Krug za odabir kombinacija boja

Prethodnik ovog uređaja u svojoj modernom obliku je Ittenov prsten u boji (vidi sliku ispod).

Johannes Itten je bio taj koji je prvi izdvojio tačno dvanaest boja iz čitavog spektra i rasporedio ih po krugu na način da su parovi koji su međusobno kontrastni što je moguće više suprotni. U centar 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 osnovnih 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 tačku.

Zašto postoji dvanaest osnovnih boja?

• Kao što možete vidjeti na slici, postoji tri primarni boje (koje se još nazivaju i primarne).
• Ako ih pomiješate u parovima u jednakim omjerima, možete dobiti tri sekundarno, ukupno - šest.
• Smjesa primarni sa susednim krugom sekundarno 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 da se krećete kroz okolnu raznolikost boja i nađete željenu nijansu ili vidite šta se događa kada se miješaju ne susjedne, već potpuno proizvoljne boje. Stoga su ti krugovi koje možete pronaći u prodaji ili naručiti na ovoj stranici složeniji i nose mnogo više korisne informacije nego jednostavan "Itten prsten od dvanaest dijelova".

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 divna pomoć za crtanje, posebno za umjetnike početnike.

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

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

skalu zasićenja

Ova skala je na istoj strani kao i vodič za miješanje jer dvije funkcije rade u tandemu.

Skala zasićenja je gradacija sivih tonova od crne do bijele. Od sivih ćelija različite svjetline predstavljenih na skali, uvijek možete pronaći sivu nijansu što je moguće bližu zasićenosti potrebnoj nijansi, nakon čega će postati jasno koliko trebate potamniti ili posvijetliti boju.

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

Šeme kombinacija boja

Zadnja 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.

Šema kombinacije boja- ovo je figura, u najjednostavnijem slučaju, linija koja povezuje "prikladne" boje jedna s drugom. Formulacija je vrlo nejasna, jer je odabir kromatske ljestvice i nauka i umjetnost.

Prvo, harmonija ili nesklad boja je vrlo subjektivan koncept. Kako se kaže, "za ukus i boju nema prijatelja".

Drugo, da li su "prikladni" ili "neprikladni" - sve zavisi od konkretne situacije, raspoloženja, šta tačno umetnik ili dizajner želi da kaže, od stila u kome je ovaj rad urađen, da li je potrebno istaknuti bilo koji element, ili obrnuto - učinite ga nevidljivim.

Točak boja je alat na kojem možete vizualno prikazati sve glavne sheme boja, ali morate biti u mogućnosti koristiti ovaj alat. Morate sami znati ili barem osjetiti koja je od shema najprikladnija za vaš zadatak. Sa naše strane, pokušaćemo da na ovu stranicu stavimo najviše korisnih informacija o tome kako koristiti kotačić boja (vidi odjeljak

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

Ponekad sjedite i razmišljate o tome koju nijansu plave odabrati kao glavnu za stranicu, malo svjetliju ili malo svjetliju, ili možda tamniju ... I još uvijek trebate pokupiti dodatne za nju. Naravno, možete to učiniti na oko, ali bolje je koristiti neku 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 biranje 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 vas vidjeti sema boja osobe s daltonizmom i drugim oštećenjima vida. Možete odabrati boje sigurne na webu.

Adobe Kuler je drugi web alat koji često koristim. Izbor šeme boja je skoro isti kao na prethodnoj stranici, ali mi se ne sviđa zbog toga. Osim što možete sami da kreirate šeme boja, možete pregledati i koristiti šeme koje su kreirali drugi ljudi.

Da biste to uradili, kliknite na dugme u gornjem levom meniju "Gledanje". I vidjet ćete galeriju svih vrsta kombinacija boja.

Ovaj alat je malo sličan Colorschemeu, ali ima manje mogućnosti, ali je moguće vidjeti kako će blokovi boja izgledati.

Jedva koristim ovu stranicu, ali pošto je već imam u svojim bookmarkovima, odlučio sam da je dodam.

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

Vi odaberete bilo koju sliku čije boje volite, servis je analizira i daje vam paletu boja. Ove dvije stranice se razlikuju samo po tome kako im pružiti sliku.

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

Veoma zgodan birač boja. Zasnovan na principu "Sviđa mi se - Ne sviđa mi se".

flatcolors.net

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

materialpalette.com

Drugi modni trend- dizajn materijala. Ova stranica pomaže u odabiru kombinacija boja za UI (korisnički interfejs). Osim toga, stranica ima veliki skup ikona.

I konačno, ponovo 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 obeleživačima.

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

Trebate web stranicu s pravim bojama? uradimo to :)

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

Ljudi, uložili smo dušu u stranicu. Hvala na tome
za otkrivanje ove lepote. Hvala na inspiraciji i naježim se.
Pridružite nam se na Facebook I U kontaktu sa

Šema br. 1. Komplementarna kombinacija

Komplementarne, ili dodatne, kontrastne, su boje koje se nalaze na suprotnim stranama Itten kola boja. Njihova kombinacija izgleda vrlo živahno i energično, posebno uz maksimalnu zasićenost boja.

Šema broj 2. Trijada - 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 živahno čak i kada se koriste blijede i nezasićene boje.

Shema br. 3. Slična kombinacija

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

Šema br. 4. Zasebno-komplementarna kombinacija

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

Šema broj 5. Tetrad - kombinacija 4 boje

Šema boja u kojoj je jedna boja glavna, dvije komplementarne, a druga ističe akcente. Primjer: plavo-zelena, plavo-ljubičasta, crveno-narandžasta, žuto-narandžasta.

Šema broj 6. Kvadrat

Kombinacije pojedinačnih boja

• Bijela: ide uz sve. Najbolja kombinacija sa plavom, crvenom i crnom.
• Bež: sa plavom, smeđom, smaragdnom, crnom, crvenom, bijelom.
• Siva: sa fuksijom, crvena, ljubičasta, roze, plava.
• Ružičasta: sa smeđom, bijelom, mint zelenom, maslinastom, sivom, tirkiznom, bebi plavom.
• Fuksija (tamno ružičasta): sa sivom, smeđom, limetom, menta zelenom, smeđom.
• Crvena: sa žutom, bijelom, smeđom, zelenom, plavom i crnom.
• Paradajz crvena: plava, menta zelena, peskovita, kremasto bijela, siva.
• Trešnja crvena: azurna, siva, svijetlonarandžasta, pješčana, blijedožuta, bež.
• Malina crvena: bijela, crna, damast ruža.
• Smeđa: svijetlo plava, krem, roza, smeđa, zelena, bež.
• Svijetlo smeđ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.
• Narandžasta: plava, plava, ljubičasta, ljubičasta, bijela, crna.
• Svetlo narandžasta: siva, smeđa, maslinasta.
• Tamno narandžasta: blijedožuta, maslinasta, smeđa, trešnja.
• Žuta: plava, ljubičasta, svijetloplava, ljubičasta, siva, crna.
• Limun žuta: trešnja crvena, 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: narandžasta, svijetlosmeđa, smeđa.
• Zelena: zlatno smeđa, narandžasta, zelena salata, žuta, smeđa, siva, krem, crna, kremasto bijela.
• Boja salate: smeđa, žućkastosmeđa, smeđa, siva, tamno plava, crvena, siva.
• Tirkizna: fuksija, trešnja crvena, žuta, smeđa, krem, tamno ljubičasta.
• Električar je lijep u kombinaciji sa zlatno žutom, smeđom, svijetlo smeđom, sivom ili srebrnom.
• Plava: crvena, siva, smeđa, narandžasta, ružičasta, bijela, žuta.
• Tamnoplava: svijetloljubičasta, nebeskoplava, žućkasto zelena, smeđa, siva, blijedožuta, narandžasta, zelena, crvena, bijela.
• Lila: narandžasta, ružičasta, tamno ljubičasta, maslinasta, siva, žuta, bijela.
• Tamno ljubičasta: zlatno smeđa, blijedo žuta, siva, tirkizna, menta zelena, svijetlo narandžasta.
• Crna je raznovrsna, elegantna, izgleda u svim kombinacijama, najbolje uz narandžastu, roze, salatu, bijelu, crvenu, lila ili žutu.