Alegeți o combinație de culori online. O fișă grozavă pentru combinații de culori

Băieți, ne punem suflet în site. Mulțumesc pentru asta
că descoperi această frumusețe. Mulțumesc pentru inspirație și pielea de găină.
Alăturați-vă nouă FacebookŞi VKontakte

Schema Nr. 1. Combinație complementară

Culorile complementare, sau complementare, contrastante sunt culorile care sunt situate pe părțile opuse ale roții de culoare Itten. Combinația lor arată foarte vie și energică, mai ales cu o saturație maximă a culorii.

Schema nr. 2. Triada - o combinație de 3 culori

O combinație de 3 culori situate la aceeași distanță una de cealaltă. Oferă un contrast ridicat, menținând în același timp armonia. Această compoziție arată destul de plină de viață chiar și atunci când utilizați culori palide și desaturate.

Schema nr. 3. Combinație similară

O combinație de 2 până la 5 culori situate una lângă alta pe roata de culori (ideal 2–3 culori). Impresie: calm, primitor. Un exemplu de combinație de culori dezactivate similare: galben-portocaliu, galben, galben-verde, verde, albastru-verde.

Schema nr. 4. Combinație separat-complementară

O variantă a unei combinații de culori complementare, dar în loc de culoarea opusă se folosesc culori învecinate. O combinație de culoare principală și două suplimentare. Această schemă arată aproape la fel de contrastantă, dar nu atât de intensă. Dacă nu ești sigur că poți folosi corect combinații complementare, folosește combinații separate-complementare.

Schema nr 5. Tetrad - combinație de 4 culori

O schemă de culori în care o culoare este culoarea principală, două sunt complementare, iar alta evidențiază accentele. Exemplu: albastru-verde, albastru-violet, roșu-portocaliu, galben-portocaliu.

Schema Nr 6. Pătrat

Combinații de culori individuale

• Alb: se potrivește cu orice. Cea mai bună combinație cu albastru, rosu si negru.
• Bej: cu albastru, maro, smarald, negru, rosu, alb.
• Gri: cu fucsia, roșu, violet, roz, albastru.
• Roz: cu maro, alb, verde mentă, măsline, gri, turcoaz, albastru baby.
• Fuchsia (roz intens): cu gri, cafeniu, lime, verde menta, maro.
• Roșu: cu galben, alb, maro, verde, albastru și negru.
• Roșu roșie: albastru, verde mentă, nisipos, alb crem, gri.
• Roșu vișiniu: azur, gri, portocaliu deschis, nisip, galben pal, bej.
• Roșu zmeură: culoare alb, negru, trandafir de Damasc.
• Maro: albastru strălucitor, crem, roz, căpriu, verde, bej.
• Maro deschis: galben pal, alb crem, albastru, verde, violet, roșu.
• Maro închis: galben lămâie, albastru, verde mentă, roz violet, lime.
• Tan: roz, maro închis, albastru, verde, violet.
• Portocaliu: albastru, albastru, liliac, violet, alb, negru.
• Portocaliu deschis: gri, maro, măsliniu.
• Portocaliu închis: galben pal, măsline, maro, cireș.
• Galben: albastru, liliac, albastru deschis, violet, gri, negru.
• Galben lămâie: roșu cireș, maro, albastru, gri.
• Galben pal: fucsia, gri, maro, nuanțe de roșu, cafeniu, albastru, violet.
• Galben auriu: gri, maro, azuriu, roșu, negru.
• Măsline: portocaliu, maro deschis, maro.
• Verde: maro auriu, portocaliu, verde deschis, galben, maro, gri, crem, negru, alb crem.
• Culoarea salatei: maro, cafeniu, căpriu, gri, albastru închis, roșu, gri.
• Turcoaz: fucsia, roșu vișiniu, galben, maro, crem, violet închis.
• Albastrul electric este frumos atunci când este asociat cu galben auriu, maro, maro deschis, gri sau argintiu.
• Albastru: roșu, gri, maro, portocaliu, roz, alb, galben.
• Albastru închis: violet deschis, albastru deschis, verde gălbui, maro, gri, galben pal, portocaliu, verde, roșu, alb.
• Liliac: portocaliu, roz, violet închis, măsline, gri, galben, alb.
• Mov închis: maro auriu, galben pal, gri, turcoaz, verde mentă, portocaliu deschis.
• Negrul este universal, elegant, arată în toate combinațiile, cel mai bine cu portocaliu, roz, verde deschis, alb, roșu, liliac sau galben.

Alegerea unei scheme de culori pentru un site web este una dintre ele puncte importanteîn procesul de proiectare. Selectarea unei combinații de culori este un proces destul de complex și creativ. Din fericire, există multe servicii care pot oferi un sprijin semnificativ pentru a face alegerea corectă.

Unele resurse menționate în această recenzie, oferă posibilitatea de a alege cantitate mare scheme de culori gata făcute, în timp ce altele vă permit să vă construiți interactiv propria schemă.

Mai rece

Adobe Kuler conține o bibliotecă mare de scheme de culori gata făcute. Puteți vizualiza diagrama online și o puteți descărca pentru a fi utilizată în produsele Adobe Creative Suite.

Color Lovers are în prezent aproape 2 milioane de scheme de culori create de utilizatori. Le puteți vizualiza prin sortare după dată, evaluare, număr de vizualizări.

ColoRotate are o bibliotecă de scheme de culori gata făcute. De asemenea, vă puteți crea propria diagramă folosind un instrument unic 3D. Schema de culori poate fi utilizată direct în Photoshop și Fireworks folosind pluginul ColoRotate.

Color Scheme Designer vă permite să selectați tipul de schemă de culori (mono, complementar, triad, tetrad, analog). Apoi puteți ajusta culorile și puteți vedea efectul schemei folosind un exemplu.

ColorSchemer are o bibliotecă mare de scheme de culori create de utilizator. Le puteți sorta după data postării, evaluare sau numărul de descărcări.

Pictaculous este un instrument simplu de generare a schemelor de culori online. Puteți încărca o imagine, iar serviciul va genera o diagramă de utilizat cu imaginea.

Color Spire

Color Spire este un serviciu foarte ușor de utilizat. Alegeți o culoare de bază și sugerează o schemă de culori. De asemenea, puteți vedea aspect diagrame pe un șablon simplu.

Un program mic, elegant și îngrijit de selecție a culorilor pentru proiectarea paginilor HTML și a altor sarcini care necesită selectarea culorilor potrivite.

Să vedem ce poate face acest program.

Setarea punctului de culoare

Deoarece programul nu necesită instalare, pur și simplu salvăm arhiva în hard disk, despachetați în loc convenabil, deschideți folderul și rulați fișierul cu extensia exe. În mod implicit, programul se lansează ca un buton mic:

Lucrul cu programul

Faceți clic pe această pictogramă și se deschide fereastra programului în fața noastră:

Ecran

În această filă, programul vă permite să „luați” orice culoare direct de pe ecran. Adică din orice parte a ecranului care era vizibilă la momentul lansării programului. Întregul ecran este afișat într-o dimensiune redusă în fereastra Selectare site.

Dacă faceți clic pe orice parte din această fereastră, aceasta va apărea în următoarea fereastră mai mică „Selectați culoarea”. Aici puteți viza mai precis și puteți lua culoarea dintr-un anumit punct.

De asemenea, în partea dreaptă a acestei ferestre există butoane auxiliare pentru copiere în clipboard, iar în partea de jos sunt butoanele „Actualizează” (actualizează conținutul ecranului) și „Aplica” (salvează culoarea selectată și comută fereastra la „ fila Selectie”).

Selecţie

Iată principalele instrumente pentru o selecție convenabilă a culorilor: „Tile”, „Circle”, „Web” și „Win”, care sunt comutate folosind file suplimentare.

Lucrul cu aceste instrumente nu este dificil. Doar îndreptați mouse-ul spre culoarea care vă place, reglați-o cu glisoarele RGB (sau HSV - dacă acel format este mai aproape de dvs.) și vedeți dacă vi se potrivește sau nu.

Dacă vă place culoarea selectată, puteți copia codul acesteia din linia „Reprezentare text”. Mai mult, codul poate fi selectat și în oricare dintre formatele standard făcând clic pe săgeata mică pentru a extinde lista.

De asemenea, acordați atenție celei de-a treia ferestre de culoare din dreapta colțul de sus. Pe lângă culoarea selectată (bandă verticală), arată încă trei culori care se potrivesc bine cu cea selectată.

Astfel, programul sugerează imediat mai multe culori potrivite care pot fi folosite în alte elemente ale designului proiectat.

Programul are destul de multe butoane auxiliare diferite. Pentru a afla scopul lor, treceți mouse-ul peste ele și citiți sfaturile care apar în partea de jos a ferestrei programului.

Setări

Aici puteți ajusta câțiva parametri, cum ar fi tipul și dimensiunea fontului și unele proprietăți cosmetice ale programului. Va fi mai convenabil să lucrați cu programul dacă debifați casetele „Deschideți în fila „Ecran”” și „Rulați în modul mini-fereastră”.

Despre program

În această ultimă filă puteți găsi contactele dezvoltatorului și puteți vedea dacă noua versiune programului accesând site-ul său web.

Avantajele și dezavantajele programului

• multe disponibile diferite instrumente pentru selectarea culorilor (cerc, țiglă etc.);
• vă permite să comparați în mod convenabil culorile prin mutarea ferestrei programului aproape de alte elemente ale ecranului;
• Există sfaturi pentru toate butoanele.

• interfață puțin complicată;
• lansarea în formă redusă și pe fila „Ecran” nu este foarte convenabilă (deși puteți dezactiva acest lucru în setări);
• Nu toată lumea va plăcea culoarea ferestrei programului.

Concluzii

Programul este destul de puternic pentru unul gratuit, oferă aproape tot ce aveți nevoie pentru a selecta în mod convenabil culorile atunci când creați un design de site web. Există câteva dezavantaje minore, cum ar fi culoarea ferestrei programului (liliac este un gust dobândit), dar nu interferează cu lucrul cu acesta.

P.S. Permisiune acordată pentru copiere și citare liberă. acest articol cu condiția să se indice un link activ deschis către sursă și să se păstreze paternitatea lui Ruslan Bogdanov.

P.P.S. Dacă programul vi se pare complicat, există opțiuni mai simple:

Culoarea este una dintre cele mai multe elemente importanteîn munca unui designer. Dar ca concept, poate fi destul de dificil de stăpânit: din cauza numeroaselor combinații de palete, este adesea dificil să decideți cum să proiectați cel mai bine interfața paginilor web și a aplicațiilor. Am publicat anterior recenzii ale instrumentelor preferate și . Iar astăzi vrem să extindem subiectul postând pe blog o traducere a articolului Essential Color Tools for UX Designers de Nick Babich.

Nota conține o listă cele mai bune servicii selecția de culori pentru site-uri web și design UX, ceea ce vă va ajuta să economisiți mult timp. Prin aceste proiecte veți învăța:

• de unde să te inspiri;
• cum să-ți creezi propria paletă;
• cum să faci designul accesibil persoanelor cu deficiențe de vedere a culorilor.

1. În căutarea inspirației

Culorile naturii

Desenează din lumea din jurul tău. Tot ce trebuie să faci este să te uiți în jur. Haine la modă, coperți de cărți, design interior... sunt atât de multe lucruri uimitoare în jurul tău. Dar cel mai bun combinatii de culori– acestea sunt culorile naturii. Surprindeți un moment frumos și încercați să vă creați propria selecție pe baza unei anumite imagini.

Cele mai bune combinații de culori se găsesc în natură. Puteți obține o schemă de culori din orice fotografie

Behance

Într-un serviciu popular veți găsi lucrări interesante, incluse în cele mai bune portofolii online de adevărați profesioniști din domeniul lor. Acest site este, de asemenea, o mare sursă de inspirație. Pentru a vedea noi exemple demne de proiecte, pur și simplu selectați culoarea dorită.

Dribbble Culori

Dribbble este unul dintre cele mai bune care vă va fi la îndemână atunci când creați o interfață de utilizator. Dacă doriți să înțelegeți vizual cum au folosit alții o anumită culoare, accesați dribbble.com/colors și introduceți valoarea dorită.

Atunci când alegeți o culoare pentru un site, aici puteți seta procentajul minim al acesteia - experimentați, de exemplu, încercați să setați 30% albastru.

Încercați să specificați procent minim o culoare specifică pe Dribbble

Inspirație pentru design

Inspirație pentru design instrument utilîn primul rând pentru cei care au deja idei combinatii de culoriși cine vrea să vadă exemple de astfel de combinații. Selectați de la 1 la 5 opțiuni și veți găsi imagini care se potrivesc cu parametrii specificați.

În Designspiration veți găsi exemple diferite combinatii de culori

Tineye Multicolr

Folosind serviciul de potrivire a culorilor Tineye Multicolr, puteți determina gama dorită a imaginii și chiar setați procentul fiecăreia dintre ele (raport). Site-ul este integrat cu o bază de date de 20 de milioane de fotografii Creative Commons de pe Flickr. Acesta este cu siguranță unul dintre cele mai multe moduri rapide găsiți în paleta perfectă.

Colorzilla

ColorZilla este o extensie pentru instalare în Chrome și Mozilla Firefox. Include instrumente precum pipeta pentru ochi, răsfoirea paletelor, crearea și multe altele.

Extensia ColorZilla disponibilă în Chrome și Firefox

Spectrul Shutterstock

Una dintre cele mai bune moduri de a vă imagina cum va arăta o schemă de culori este să vă uitați la imaginile corespunzătoare. Cele mai multe soluții care oferă opțiuni de culoare pentru designul site-urilor web includ această caracteristică, dar Shutterstock Spectrum are o interfață și o previzualizare incredibil de ușor de utilizat, care pot fi cu adevărat utile.

Mai mult, nu veți avea nevoie de un abonament, deoarece o evaluare preliminară a imaginii va fi suficientă (chiar în ciuda faptului că există un „filigran” pe ea).

W3Schools

Recent, blogul a revizuit o selecție de la W3Schools. Există o mulțime de informații colectate acolo pe tema, pornind de la numele/codurile lor de nuanțe, teoria combinării paletelor și terminând cu o descriere a diferitelor formate: HEX, RGB, CMYK, HWB, etc. Veți găsi, de asemenea, simple generatoare, convertoare și „mini-servicii” similare. Per total, interesant de vizionat.

2. Creați o paletă de culori

Instrumentul de culoare pentru designul materialului

Instrumentul de culoare pentru design material vă permite să creați, să partajați scheme de culori și să vizualizați o interfață de utilizator brută pentru selecțiile dvs. Una dintre funcțiile sale utile este măsurarea nivelului de accesibilitate al oricărei combinații de culori.

Coolere

Coolors este un site pentru crearea unei palete multicolore. Fixați o anumită culoare și apăsați pe bara de spațiu. Instrumentul este, de asemenea, bun pentru că veți obține mai mult de un rezultat, dar puteți genera mai multe opțiuni modificând doar datele inițiale.

Schema de culori în Coolors bazată pe fotografie

Adobe Color CC

Serviciul de potrivire a culorilor Adobe Color CC (fostul Kuler) este acum destul de popular. El este în acces gratuit pe Internet, dar există și o versiune desector. Cu această aplicație web vă veți crea propria paletă folosind roata de culori:

Sau puteți obține un anumit rezultat din imaginea finală:

Selectarea culorilor pentru un site web pe baza unei imagini

Există sute de combinații gata făcute aici, căutați-le în secțiunea „Urmăriți”:

Dacă utilizați versiunea pentru desktop, puteți exporta sistemul de culori pe care l-ați creat în InDesign, Photoshop și Illustrator cu un singur clic.

Paletton

Este adesea comparat cu Adobe Color CC anterior, deoarece modelele sunt foarte asemănătoare. Singura diferență este că în Paletton nu ești limitat la cinci parametri, ci poți experimenta cu tonuri suplimentare de interfață.

În plus, puteți privi. Impreuna cu altii, aplicatia iti permite sa lucrezi oriunde, pur si simplu folosind smartphone-ul. Pe lângă sarcinile directe de creare/exportare a paletelor de culori, aici puteți selecta anumite culori din imagini sau puteți utiliza opțiuni de bază.

3. Facerea paletei accesibilă

În zilele noastre, tulburările de vedere a culorilor sunt mult mai frecvente decât ne dăm seama. Aproximativ 285 de milioane de oameni din lume se confruntă cu probleme de vedere. Ar trebui să verificați întotdeauna dacă cel pe care îl alegeți este disponibil pentru astfel de utilizatori.

WebAIM Color Contrast Checker

Unele tonuri merg bine unele cu altele, în timp ce altele sunt exact invers. Un număr foarte mare de proiecte pică testul A/A și acesta este un fapt. Este foarte important să verificați designul vizual al interfeței și contrastul tonurilor, mai ales dacă există mult text pe pagină. În aceste scopuri, utilizați atunci când selectați culorile site-ului web.

WebAIM Color Contrast Checker este un instrument bazat pe web care verifică codurile de culoare în valori hexazecimale.

Coolere

DESPRE acest serviciu am menționat deja mai sus. Printre altele, Coolors vă va ajuta și să verificați paleta inventată pentru daltonism.

Tipul de daltonism din diagramă

În loc de modul Normal, selectați tipul de problemă de vedere pe care doriți să o simulați. Drept urmare, veți înțelege exact cum vă va vedea designul o persoană care nu poate distinge anumite culori.

Acesta este modul în care o persoană cu protanomalie vede o paletă

NoCoffee Vision Simulator pentru Chrome

Folosind site-ul web NoCoffee Vision Simulator, puteți vedea cum persoanele cu daltonism sau cu vedere slabă vor percepe anumite pagini web. De exemplu, dacă specificați parametrul „Acromatopsie” în secțiunea „Deficiență de culoare”, veți vedea pagina web cu gri.

Așa arată un proiect CNN pentru o persoană cu deuteranopie.

Concluzie

Toate serviciile de potrivire a culorilor site-ului și design UX menționate în articol vă vor ajuta cu siguranță în căutarea unei palete interesante și eficiente. Dar amintiți-vă: cel mai bun modînvață cum să creezi palete uimitoare - exersează și experimentează mult.

Culoarea este utilizată pe scară largă în design - vă permite să „reînvie” conținutul - să creați o conexiune semantică între elemente, să umpleți lucrarea cu emoții și dispoziție. Designerii începători aleg culori aleatorii, dar există modalități de a folosi culoarea în moduri mai semnificative. Să luăm în considerare 4 astfel de metode, organizate după principiul de la simplu la complex.

1. Folosiți o scară cunoscută

Site-ul web brandcolors.net conține peste 500 de combinații de culori ale unor mărci celebre. Yandex, Google, Burger King folosesc aceeași paletă în toate produsele lor. Aceste mărci și culorile lor sunt familiare și iubite de mulți. Introduceți numele în bara de căutare sau derulați prin pagină, faceți clic pe marca și culoarea dorite: codul acestuia va fi copiat în clipboard.

2. Alegeți o paletă profesională gata făcută

Cel mai simplu mod este să luați o combinație de culori gata făcută. Nu este necesar să reinventezi roata de fiecare dată, pentru că combinatii armonioase sunt cunoscute de multă vreme. Accesați colordrop.io și alegeți. Există sute de palete profesionale în 4 culori pe site. După ce l-ați selectat pe cel dorit, faceți clic și copiați codurile de culoare din panoul care se deschide în dreapta.

În plus, serviciul conține selecție gata din 24 de culori de design plat. Faceți clic în stânga sub numele „Flat Colors” și luați codul pentru nuanța care vă place.

3. Determinați paleta de culori a fotografiei sau imaginii care vă place

Această metodă este puțin mai complicată. Dar și mai eficient.

• Pe site-ul web coolors.co, în panoul din stânga sus, găsiți pictograma camerei și faceți clic pe ea. Se va deschide o fereastră de încărcare a imaginii.
• Puteți selecta o fotografie sau o imagine cu schema de culori care vă place de pe computer sau puteți copia linkul într-o coloană goală.
• Serviciul va determina combinația de culori (mai jos sub imaginea încărcată).
• Puteți schimba culorile individuale ale acestei palete, marcându-le și selectând un punct din fotografie din care doriți să luați culoarea.
• Butonul „Colaj” salvează paleta rezultată cu coduri de culoare pe computer.
• Butonul „Automat” generează noi combinații bazate pe aceeași fotografie.
• Faceți clic pe „Ok” și accesați pagina principală a site-ului pentru munca in continuare cu o paletă.

Pagina principală a site-ului nu este mai puțin funcțională. Aici puteți selecta nuanțe de culori individuale sau puteți crea o nouă paletă prin înlocuirea culorilor individuale.

4. Creează-ți propria schemă de culori online

Încărcând o fotografie pe același site coolors.co, nu numai că puteți determina codul de culoare, ci și puteți crea propriile combinații. Pentru a face acest lucru, apăsați bara de spațiu - serviciul creează automat o combinație de 5 culori.

Pe fiecare culoare 4 butoane pictograme:

• Nuanțe alternative - Nuanțe de culoare (mai închise și mai deschise),
• Trageți (Mutați o culoare la dreapta sau la stânga în paletă),
• Ajustați (Ajustați nuanța, saturația, luminozitatea etc.),
• Blocare (culoare fixă).