Generatoare de palete pentru a ajuta designerul web. Generatoare de palete pentru a ajuta un web designer Cum creează un generator culori

Una dintre componentele importante ale muncii unui designer web este crearea unei palete, selectând culori care se combină armonios între ele. Procesul este destul de complex și necesită o abordare creativă. Există o serie de resurse care pot face lucrul cu culoarea mult mai ușor.

Este posibil să fi întâlnit recent un articol detaliat despre. Puțin mai devreme am publicat o notă similară despre instrumentele de selecție cu o recenzie a Kuler și ColorBlender. Astăzi am decis să extind tema și să ofer puțin mai multe opțiuni pentru alegerea paletelor de culori pentru site.

ColoRotate

Instrumentul ColoRotate vă permite să alegeți cele mai potrivite scheme de culori dintr-un număr mare de propuneri gata făcute sau să vă creați propria. Alegând culori în diferite locuri pe o paletă 3D rotativă, puteți obține combinații bazate pe armonie sau contrast, puteți lucra cu nuanțe, luminozitate, saturație și puteți amesteca diferite culori. De asemenea, puteți extrage culori din imaginile finite. Există o versiune pentru iPad, sincronizarea cu Photoshop este disponibilă. Serviciu foarte frumos.

Adobe Color CC

Paleta Adobe Color CC și generatorul de scheme de culori vă permit să:

• experimentați cu combinații de culori pe roata interactivă de culori (sunt disponibile 7 tipuri de sisteme de culoare);
• generați teme de culoare folosind stiluri predefinite;
• creați scheme de culori folosind culori dintr-o fotografie sau orice altă imagine gata făcută;
• împărtășiți-vă munca și cunoașteți-i pe alții, inspirându-vă din ei.

Temele de culoare create pot fi salvate în aplicații pentru PC sau dispozitive mobile, precum și în secțiunea „Temele mele” de pe site.

DeGraeve

Site-ul web DeGraeve oferă o varietate de instrumente, inclusiv un generator de scheme de culori bazat pe imagini prefabricate. Tot ce trebuie să faceți este să găsiți o imagine pe Internet cu o schemă de culori interesantă, să încărcați adresa URL a acestei imagini în linia corespunzătoare de pe site și să faceți clic pe butonul de generare a paletei. După câteva secunde, programul va descompune imaginea în 10 culori primare, 5 dezactivate (terte) și 5 luminoase (vibrante), atribuindu-i fiecăruia propriul cod. Paleta generată este convenabilă de utilizat atunci când lucrați la designul site-ului, culorile se vor combina perfect între ele.

Contrast-A

Cu sloganul „Găsiți o combinație de culori accesibilă”, Contrast-A este conceput pentru a vă ajuta să creați palete personalizate în timp ce experimentați cu culori potrivite. Programul se bazează pe un ghid despre compatibilitatea culorilor conținutului web (text și fundal). Pentru a lucra cu el, sunt de dorit cunoștințe de bază pe acest subiect.

Serviciul vă permite să selectați 2 culori pe paletă și să evaluați cum vor arăta împreună atunci când sunt utilizate ca text și fundal. Mai mult, rezultatele sunt demonstrate pentru vederea normală a culorilor și diferite forme de daltonism.

ColorZilla

Aplicația ColorZilla pentru Firefox (disponibilă și pentru Google Chrome) pentru a ajuta webmasterii și designerii grafici care lucrează cu culoarea. Va fi util atât pentru începători, cât și pentru utilizatorii avansați. Programul efectuează o analiză de culoare a oricărui punct și a oricărei pagini din browser și extrage culorile necesare pentru utilizare în alte aplicații. Definirea paletei de culori a paginii, selectarea culorilor dintr-un set prestabilit, salvarea celor care sunt cel mai des folosite ca parte a paletei utilizatorului - aceasta este gama de capabilități.

Pictaculos

Pictaculous este un alt generator de palete de culori bazat pe imagini gata făcute. Trebuie doar să încărcați pe site o imagine selectată de cel mult 500 KB, iar analiza culorii acesteia va începe imediat. Sub rezultatul cu schema de culori a imaginii, sunt afișate încă o duzină de palete, dar deja create manual, de către membrii comunităților de resurse Kuler și COLOURLovers. Ele pot fi, de asemenea, folosite ca o schemă de culori pentru site-ul în curs de dezvoltare. Puteți trimite rezultatul pe e-mail și îl puteți distribui pe rețelele sociale.

Dacă cunoașteți alți generatori de palete de culori, distribuiți linkurile în comentarii.

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ă reinventăm roata de fiecare dată, deoarece combinațiile armonioase se cunosc de mult. 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 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ă).

Culorile joacă un rol important în designul web. Pentru a selecta corect o schemă de culori pentru un site web, există servicii speciale. Sunt sigur că fiecare web designer are cel puțin unul dintre acestea în marcaje.

Uneori stai și te gândești ce nuanță de albastru să alegi ca principală pentru site, puțin mai deschisă sau puțin mai strălucitoare, sau poate mai închisă... Și totuși trebuie să alegi altele suplimentare pentru el. Desigur, puteți face acest lucru cu ochiul, dar este mai bine să utilizați unul dintre serviciile speciale.

Nu voi vorbi despre teoria culorilor (aceasta este prea multă informație), ci pur și simplu voi publica aici serviciile pe care le am în marcajele mele și pe care le folosesc.

Sunt prieten cu acest instrument de mulți ani. Cel mai convenabil instrument pentru selectarea culorilor (după părerea mea). Are multe caracteristici suplimentare. De exemplu, puteți vedea un exemplu de pagină deschisă și întunecată cu culorile selectate.

Este posibil să evaluați modul în care persoanele cu daltonism și alte deficiențe de vedere vă vor vedea schema de culori. Puteți alege culori sigure pentru web.

Adobe Kuler este al doilea instrument web pe care îl folosesc destul de des. Selecția de scheme de culori este aproape aceeași ca pe site-ul anterior, dar nu de aceea îmi place. Pe lângă crearea de scheme de culori, puteți să vă uitați și să utilizați schemele pe care le-au creat alți oameni.

Pentru a face acest lucru, faceți clic pe butonul din meniul din stânga sus „Urmăriți”. Și o galerie cu tot felul de combinații de culori se va deschide în fața ta.

Acest instrument este puțin similar cu Colorscheme, dar are mai puține funcții, dar puteți vedea cum vor arăta blocurile de culoare.

Practic nu folosesc acest site, dar din moment ce îl am în marcaje, am decis să îl adaug și eu.

Următoarele două site-uri generează o paletă din imaginea pe care o selectați. este magie :)

Alegi orice poză ale cărei culori îți plac, serviciul o analizează și îți oferă o paletă de culori. Singura diferență dintre aceste două site-uri este modul în care oferă imaginea.

Acest site necesită descărcare poza de pe computer.

Un instrument foarte convenabil pentru alegerea culorilor. Bazat pe principiul „Like - Dislike”.

După cum sugerează și numele, aici puteți alege culori pentru designul plat la modă. Site-ul este interesant pentru că odată ce selectați o paletă, o puteți descărca pentru Corel și Photoshop.

O altă tendință de modă este designul materialului. Acest site vă ajută să alegeți combinații de culori pentru UI (interfață de utilizator). În plus, site-ul are un set mare de pictograme.

Și, în sfârșit, din nou interfața cu utilizatorul. Iată doar un set de culori pentru designul UI. Făcând clic pe orice culoare, puteți vedea cum va fi citit textul alb pe un anumit fundal.

Acestea sunt instrumentele pe care le am în marcajele mele.

Scrie in comentarii ce site-uri de selectie de culori pentru web design folosesti?

Culoarea este unul dintre cele mai importante elemente î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 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ă setați un procent minim al unei anumite culori în Dribbble

Inspiratie de 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 abonament, deoarece o evaluare preliminară a imaginii va fi suficientă (chiar dacă are un „filigran”).

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.

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

Coolers

Am menționat deja acest serviciu 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 de a învăța cum să creați palete uimitoare este să exersați și să experimentați mult.

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 prezentare generală a 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

Paletton

Stilizează-mă

Coolers