Generatoare de palete pentru a ajuta designerul web. Generatoare de palete pentru a ajuta designerii web Programul de selectare a culorilor roata de culori

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ă cu cele mai bune servicii de selecție a culorilor pentru site-uri web și design UX, care vă vor 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 cele mai bune combinații de culori 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

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

Dribbble Culori

Dribbble este unul dintre cele mai bune care va fi la îndemână atunci când creați o interfață cu utilizatorul. 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ă setați un procent minim al unei anumite culori în Dribbble

Inspirație pentru design

Designspiration este un instrument util în primul rând pentru cei care au deja idei pentru combinații de culori și doresc 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 diferite exemple de combinații 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. Aceasta este cu siguranță una dintre cele mai rapide moduri de a găsi paleta perfectă.

Colorzilla

ColorZilla este o extensie pentru instalare în browserele 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 urmărit.

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.

Coolers

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. Este disponibil 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 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 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.

Coolers

Am menționat deja acest serviciu mai sus. Printre altele, Coolors vă va ajuta 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ță să găsiți o paletă interesantă și eficientă. Dar amintește-ți: Cel mai bun modînvață cum să creezi palete uimitoare - exersează și experimentează mult.

Un program mic, elegant și îngrijit de selecție a culorilor pentru proiectarea paginilor HTML și a altor sarcini care necesită alegerea 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 HDD, despachetați-l într-un 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 Selectare”).

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ă acest 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, observați a treia casetă de culoare din colțul din dreapta 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ă o nouă versiune a programului a fost lansată accesând site-ul său.

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. Se acordă permisiunea de a copia și cita în mod 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 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 mărcilor 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ă reinventăm roata de fiecare dată, deoarece combinațiile armonioase sunt cunoscute de mult timp. 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 o selecție gata făcută de 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 a lucra în continuare cu paleta.

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

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

Încărcând o fotografie pe același site web 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 corectă).

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 dintre resursele menționate în această recenzie oferă posibilitatea de a alege dintr-un număr mare de 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.

Orice web designer înțelege cât de important este. Cu ajutorul culorii, se pun accentele - sunt subliniate detaliile importante, iar cele auxiliare sunt ascunse. Culoarea creează o stare de spirit. Culoarea este primul lucru pe care îl vede un vizitator al site-ului web, chiar înainte de a citi o singură scrisoare sau de a realiza ceea ce este arătat într-o anumită fotografie. Paleta de culori Site-ul dvs. poate întârzia vizitatorul sau îl poate speria.

Alegerea corectă a paletei de culori- primul pas spre construirea unui site web ideal și fără cusur. Culoarea fiecărui element de pagină ar trebui să fie în armonie nu numai cu elementele legate vizual, ci și cu schema generală de culori a paginii și a site-ului în ansamblu.

Pentru a nu greși la începutul călătoriei, am pregătit un mic revizuirea generatoarelor de scheme de culori, permițându-vă să alegeți numărul și combinația potrivite de culori primare pe care le veți folosi atunci când vă dezvoltați site-ul. Unele dintre ele sunt destul de simple și au funcționalitate standard, în timp ce altele au o serie de funcții unice. Dar toate vor oferi, fără îndoială, asistență neprețuită în dezvoltarea unui design unic de site web.

Adobe Color CC

Adobe Color CC- un fel de standard pentru astfel de aplicații care permite creați diferite scheme de culori folosind pentru asta cerc de culoare. Designerul va avea și acces direct la comunitate. Adobe Cooler, unde puteți alege mii de culori diferite.

Paletton

Una dintre cele mai vechi (în funcțiune din 2002) din recenzia noastră instrumente pentru crearea de combinații de culori și soluții de culoare.

Stilizează-mă

Explorează site-ul specificat în bara de căutare și oferă un raport cu privire la combinațiile de culori utilizate în acesta, fonturi, dimensiuni de imagini etc. Acest lucru va permite designerului să-și construiască propriile soluții, folosind ca bază site-ul care îi place.

Coolers

Permite generați o combinație de culori de bază, apoi reglați paleta rezultată după bunul plac și salvați-o în diferite formate - SVG, PDF sau SCSS.