Utilizarea Paletton pentru a vă ajuta să alegeți paleta de culori a site-ului dvs. WordPress

Publicat: 2020-07-31

În această postare, vom analiza cum să utilizați Paletton pentru a alege paleta de culori a site-ului dvs. WordPress. Paletton este un generator de palete de culori online ușor de utilizat, care vă va economisi mult timp. Nu fiecare client de design web va avea o schemă de culori a mărcii și va reveni asupra dvs. să alegeți culorile pentru site-ul lor web. De aici vine Paletton la îndemână.

Între toate opțiunile disponibile online, Paletton este una dintre favorite datorită caracteristicii de exemplu live. Aplicația nu a fost actualizată de câțiva ani, dar, din fericire, funcționează perfect pentru ceea ce aveți nevoie. Veți găsi aplicația la Paletton.com. Ignorați anunțurile Google din jur și sunteți bine să mergeți.

De ce este important să alegeți culorile potrivite pentru site-ul dvs. web

Înainte de a analiza în profunzime modul de utilizare a aplicației Paletton, haideți să analizăm rapid motivul pentru care este important să aveți paleta de culori potrivită pe un site web. După cum știți, culorile poartă mesaje subliminale care afectează emoțiile spectatorului și, în cele din urmă, deciziile lor. Culorile trebuie să reprezinte și marca companiei site-ului web.

Cel mai bun mod de a alege o paletă de culori pentru un site web este să luați în considerare starea de spirit pe care doriți să o înfățișeze. În același mod în care designerii de interior aleg culorile pentru a oferi unui spațiu o dispoziție specifică, puteți face același lucru pentru un site web. Gândiți-vă la primele impresii; atunci când cineva aterizează pe un site web cu culori strălucitoare, vibrante, se va simți mulțumit și ar putea chiar să zâmbească. Un site web cu o paletă neutră redusă poate calma o persoană și poate insufla un sentiment de confort.

Desigur, culorile pe care le alegeți trebuie să se potrivească și cu marca. În combinația și tonalitatea, în calitate de designer web, vă ocupați de centrul atenției. Alegerea celei mai bune utilizări a culorilor într-o paletă este de asemenea importantă pentru starea de spirit a unui site.

De aceea Paletton este unul dintre generatorii de palete de culori preferate. Puteți previzualiza modul în care o paletă de culori este aplicată în diferite combinații pe un site web. Acest lucru vă ajută să luați decizii mai bune cu privire la culorile pe care le alegeți. Punerea culorii întunecate ca fundal spre deosebire de culoarea deschisă va face o mare diferență în designul final.

Toate paletele de culori încep cu o culoare de bază

Pentru fiecare paletă de culori pe care o creați pe Paletton, veți avea nevoie de o culoare de bază pentru a lucra. Dar de unde știi ce culoare de bază să folosești?

Aruncați o privire asupra conținutului pe care vi l-a oferit clientul, brandingul acestuia și orice imagini vi s-au oferit.

  • Dacă clientul dvs. are un logo color, utilizați-l ca culoare de bază.
  • Utilizați un instrument de picurare pentru a extrage o culoare sau două dintr-una dintre imaginile pe care clientul vi le-a dat.
  • Întrebați-vă clientul despre starea de spirit și marca despre compania lor.
  • Dacă creați modele web pentru a le vinde sub formă de șabloane sau teme pentru copii sau pentru portofoliul dvs., alegeți o culoare în funcție de starea dorită cu designul dvs.

Când creați o paletă pe Paletton, puteți alege vizual o culoare de bază sau un cod hex în fila hexagonală a culorii de bază.

Cunoașterea UI a aplicației Paletton

Acum este timpul să începeți să creați palete. Să aruncăm o privire la modul în care este configurat totul. Aplicația are două secțiuni principale; partea stângă se referă la selectarea culorilor, iar partea dreaptă vizionează previzualizările.

Să aruncăm o privire mai întâi la instrumentul de selectare a culorilor din stânga. Orice ați schimba pe această parte schimbă rezultatele laturii drepte, dar cel mai bine este să înțelegeți de ce este capabilă fiecare parte.

Partea stângă - Selectoarele de culoare

Primul lucru pe care îl observați când intrați în aplicația Paletton este roata de culori. Vizualizarea implicită are culoarea de bază ca un roșu neutru într-o paletă monocromatică (1 culoare).

Veți vedea un set de 5 puncte într-o linie în interiorul cercului de culoare. Punctul din centru este culoarea de bază, două puncte adaugă luminozitate și desaturare, în timp ce celelalte două adaugă contrast și saturație.

Combinații de culori

Deasupra cercului de culoare sunt cinci butoane combinate. Opțiunile sunt de la stânga la dreapta:

  • Monocromatic - 1 culoare + opțional complementar
  • Adiacent - 3 culori + opțional complementar
  • Triadic - 3 culori + opțional complementar
  • Tetrad - 4 culori
  • Stil liber - 4 culori

Culoare de bază

Pentru a schimba culoarea de bază, puteți face oricare dintre următoarele:

  1. Trageți punctul principal de culoare oriunde în cercul exterior.
  2. Trageți punctul din mijloc în interiorul cercului pentru a alege o nuanță diferită a culorii principale alese în cercul exterior
  3. Introduceți un cod hexagonal în fila din stânga jos.
  4. Pentru a transforma o culoare secundară în culoarea de bază, va trebui să faceți acest lucru în partea de previzualizare a ecranului. Mai multe despre asta mai târziu.

Când trageți punctul de culoare de bază în interiorul cercului, toate celelalte puncte se deplasează împreună cu acesta, prezentând variantele de nuanță.

De asemenea, puteți selecta culori individuale făcând clic pe Shift înainte de a trage.

Reglaj fin

Butonul din colțul din stânga sus al cercului vă permite să introduceți manual nuanțele pentru o reglare fină. Există mai multe funcții de reglare fină cu butonul din dreapta jos. Aici puteți regla totul despre culorile pe care le-ați ales:

  • Nuanţă
  • Saturare
  • Luminozitate
  • Contrast

Pur și simplu faceți clic pe butoane pentru a adăuga sau micșora fiecare efect cu 1, 5 sau 10 grade.

Presetări în funcție de culoarea de bază

Zona de selecție a culorilor are două opțiuni principale de selecție; Culori și presetări. Ne-am uitat la secțiunea de culori de mai sus. Acum, să vizităm fila presetări. În funcție de culoarea de bază și combinația pe care ați selectat-o, presetările vor afișa o varietate de variabile. Acestea sunt utile dacă nu doriți să vă deranjați cu nuanța, saturația, luminozitatea și contrastul pe cont propriu.

Aceste presetări vă pot oferi o idee bună despre ceea ce este posibil cu culorile pe care le-ați ales și dacă există posibile palete secundare care să completeze prima.

Partea dreaptă - Previzualizări ale paletei

În partea dreaptă a Palettonului puteți vedea toate previzualizările live. Zona principală este separată în patru secțiuni pentru a putea vizualiza palete monocromatice sau altele cu două, trei sau patru culori. Fiecare secțiune de culoare arată culoarea de bază în zona mai mare și patru variații în jurul acesteia.

În imaginea de mai jos veți vedea cum funcționează împreună selectorul de culori și previzualizarea.

Sub pătratul de previzualizare este o filă în care puteți schimba aspectul previzualizărilor. Vizualizarea implicită este cu siguranță cea mai bună, dar în cazul în care doriți să schimbați aspectul lucrurilor, butonul respectiv este acolo pentru dvs.

Comutarea culorii de bază

În secțiunea de previzualizare, puteți face clic pe una dintre culorile secundare sau complementare și le puteți transforma în culoarea de bază. Plasați cursorul peste orice culoare și faceți clic pe „mai multe informații”. În afară de a vedea toate informațiile pentru acea culoare, veți vedea un buton care spune „Aplicați ca culoare de bază”. Când faceți clic pe aceasta, toate culorile din paletă se vor schimba.

Utilizarea funcției de simulare a viziunii Paletton

Una dintre cele mai mari caracteristici ale Paletton este capacitatea de a evalua cum vor arăta culorile dvs. în cazuri neașteptate. Funcția se numește „Simulare vizuală” și o veți găsi sub pătratul de previzualizare. Acestea sunt simulările disponibile:

  • Simulare Color Blind
  • Desaturat
  • Simulare Gamma
  • Culori web (vechea paletă de 216 culori)

Acesta este un instrument excelent dacă creați o paletă pentru un site web. Puteți vedea dacă paleta dvs. va arăta bine în toate aceste cazuri. Cea mai utilă este simularea daltonismului. Este bine să vă asigurați că toate culorile sunt diferențiate între ele!

Vezi exemple live ale paletei tale de culori

Un alt instrument practic în Paletton este fila care vă arată cum va arăta paleta pe un exemplu de site web și alte stiluri de design. Veți găsi aceste simulări în fila „EXEMPLE…”. Prima alegere este un aspect de pagină și aceasta are câteva opțiuni:

  • Pagina albă
  • Pagina întunecată
  • Design pozitiv
  • Design negativ

Aplicația vă poate arăta alte simulări de modele artistice cu paleta de culori aleasă. Există câteva exemple statice și animate. Acestea sunt practice pentru a vă face o idee bună despre cât de mult potențial are paleta de culori.

Mai mult, în această etapă, puteți să vă randomizați paleta în câteva moduri diferite:

  • Culori similare, spre deosebire de stil
  • Spre deosebire de
  • Similar
  • Spre deosebire de culori, stil similar

Asigurați-vă că obțineți o copie a paletei înainte de ao randomiza! Nu e cale de întoarcere.

Exportul și copierea unei palete de culori

Acum că v-ați ajustat și previzualizat paleta de culori, este timpul să o exportați din Paletton și să o pregătiți pentru site-ul dvs. web.

Există câteva moduri diferite de a copia sau exporta paleta. În partea dreaptă sus a ferestrei este un buton care spune „partajează paleta”, dar se pare că s-a rupt cu ceva timp în urmă. Ignorați butonul, deoarece nu face nimic.

Copiați paleta în oricare dintre aceste alte moduri:

  • Copiați codurile hexagonale pentru culori individuale, plasați cursorul pentru ao vedea și faceți clic pentru a deschide fereastra de informații.
  • Faceți clic pe „TABLES / EXPORT” pentru a vedea paletele în diferite formate.
  • În fila TABLE / EXPORT ', exportați în oricare dintre aceste formate:
    • Liste de culori
      • HTML
      • MAI PUȚIN
      • CSS
      • SASS
      • XML
      • text
    • Specimenele de culoare
      • Imagine PNG
      • ACO (Photoshop)
      • GPL (Gimp)
  • De asemenea, puteți vizualiza combinații de culori în paleta aleasă.

Adăugarea culorilor pe site-ul dvs. WordPress

Acum este timpul să adăugați culorile pe site-ul dvs.!

Deoarece aplicația Paletton nu a fost actualizată de peste 6 ani, este mai bine să descărcați versiunea text simplă și să introduceți manual culorile în foaia de stil. Este posibil ca funcțiile de export să nu funcționeze cu foaia de stil HTML sau CSS a site-ului dvs. web.

Pentru a adăuga culori la tema Divi, navigați la Opțiunile temei și introduceți fiecare culoare cu codul hexagonal corespunzător.

Acesta este un color wrap!

Am terminat de revizuit pașii pentru a crea o paletă de culori cu Paletton. Funcțiile de bază ale aplicației sunt similare cu alte aplicații pentru paleta de culori, dar ceea ce o face să iasă în evidență de restul este capacitatea de a vedea culorile pe exemple live atât pentru designul web, cât și pentru alte modele artistice. Păcat că aplicația nu a fost actualizată de peste 6 ani. Din fericire, se pare că rămâne în viață prin acele anunțuri Google !.

Care este aplicația dvs. preferată pentru generatorul de palete de culori? Ați încercat deja Paletton? Spuneți-ne în comentarii!

Imagine prezentată prin DaGaAl / shutterstock.com