Cum să aplicați palete de culori pe site-ul dvs. Divi (20 de exemple!)

În tutorialul Divi de astăzi, vom împărtăși câteva palete de culori uimitoare pe care le puteți folosi pe următoarele site-uri web pe care le construiți cu Divi. Folosirea culorilor potrivite pentru site-ul dvs. web este unul dintre principalele lucruri care vor determina cum va arăta și cum se va simți site-ul dvs. în general.

Pe lângă partajarea unor palete de culori uimitoare cu dvs., vă vom arăta și o modalitate solidă de a adăuga aceste palete de culori pe site-ul dvs. web. Când aveți dubii, puteți urma întotdeauna acești pași de bază care vă vor ajuta să creați rezultate frumoase.

Sfaturi generale

1. Decideți pe site-ul Dark-Colored sau Light-Colored

În paleta de culori pe care o veți folosi, veți avea, fără îndoială, culori deschise și întunecate. Contrastul este obligatoriu într-o paletă de culori, astfel încât conținutul scris să nu se piardă.

Acum, asta ne conduce imediat la prima întrebare pe care trebuie să o puneți atunci când doriți să aplicați o paletă de culori site-ului dvs. web; vrei să creezi un site web de culoare închisă sau deschisă la culoare? Doar pentru că alegeți una nu înseamnă că nu le puteți combina, dar alegerea vă ajută să vă alegeți paleta de culori mai ușor.

2. Alegerea culorii

În teorie, puteți stabili singur câte culori doriți să aibă paleta de culori. Nu există o modalitate standard de a aplica sau de a determina paletele de culori. Cu toate acestea, pentru a crea un echilibru frumos de culori cu Divi, vă recomandăm să utilizați cinci culori.

Pentru a vă ajuta să aplicați paletele de culori cu cinci culori pe site-ul dvs. web, am ales un tip de metodă pe care o vom aplica în mod constant la același aspect atunci când prezentăm diferitele palete de culori. Dar, înainte de a ne arunca cu capul în asta, să aruncăm o privire asupra diferitelor tipuri de culori pe care trebuie să le aveți în paleta de culori, dacă doriți să urmați metoda noastră.

2 culori de fundal

Asigurați-vă că culorile de fundal pe care le alegeți se potrivesc. Veți folosi aceste culori de fundal unul lângă celălalt și pentru a obține rezultate frumoase; trebuie să aibă o anumită armonie.

1 Culoare font

Următorul lucru pe care va trebui să îl alegeți este culoarea fontului. În mod logic, culoarea fontului depinde de culorile de fundal pe care le alegeți. Dacă ați ales culori de fundal de culoare deschisă, asigurați-vă că culoarea fontului este de culoare închisă și invers.

1 Hyperlink și CTA Color

Culoarea hyperlinkului pe care o alegeți este una dintre culorile care dau viață site-ului dvs. web. Asigurați-vă că această culoare se distinge de celelalte culori din paleta dvs., deoarece o veți folosi pentru îndemnurile pe care le includeți pe site-ul dvs. web.

1 culoare pentru ultimele atingeri

Nu în ultimul rând, puteți alege o altă culoare care să aducă culoare site-ului dvs. Deși această culoare nu este la fel de importantă ca culoarea hyperlinkului, aceasta vă va ajuta să completați echilibrul culorilor pe site-ul dvs. web.

3. Asigurați-vă că există suficient contrast

Așa cum sa menționat mai înainte; este esențial să oferiți contrast între unele culori din paleta de culori. Dacă utilizați o paletă de culori pentru un site web, acest contrast vă va ajuta în primul rând să faceți ca conținutul scris pe care îl partajați să fie lizibil. Pentru că; dacă conținutul dvs. nu este ușor de citit; care este scopul acesteia până la urmă?

4. Găsiți echilibrul corect de utilizare a culorii

Există diferite moduri de a determina cât de des doriți să utilizați o anumită culoare în paleta de culori. Crearea unui echilibru bun al culorilor este necesară dacă nu doriți ca aceștia să se simtă copleșiți de culorile pe care le utilizați pe site-ul dvs. web.

Asigurați-vă că utilizați culorile mai neutre din paleta de culori de cele mai multe ori și utilizați celelalte culori pentru a accentua conținutul pe care îl furnizați.

Tutorial: adăugarea paletei de culori pe site-ul dvs. web

În următoarea parte a acestui post, vă vom prezenta prin aplicarea paletelor de culori pe site-ul dvs. web. Ne vom ocupa de diferiții pași pe care îi parcurgem atunci când adăugăm culorile la un aspect al site-ului web. După această prezentare, veți ajunge la partea în care împărtășim paletele de culori. Nu numai că am împărtășit culorile, dar le-am folosit și pe un aspect Divi pentru a pune în practică pasajul tehnic.

Fără alte date, să aruncăm o privire asupra diferiților pași ai procesului.

1. Decideți cum veți adăuga culorile

Puteți adăuga paleta de culori în două moduri:

• Adăugarea tuturor culorilor secțiune cu secțiune
• Completați site-ul dvs. culoare cu culoare

Deși probabil veți amesteca aceste două metode una cu alta, vă recomandăm să începeți prin completarea site-ului dvs. culoare cu culoare. În acest fel, nu va trebui să copiați și să lipiți continuu diferitele coduri de culoare. Copiați fiecare culoare o dată și apoi treceți la cealaltă.

2. Adăugați culorile de fundal

După ce ați decis cum veți introduce culorile, puteți începe cu culorile de fundal. Unul dintre motivele pentru care este o idee bună să începeți cu culorile de fundal este că veți vedea imediat rezultatele. Stabiliți fundamentul culorilor pe care le utilizați pe site-ul dvs. web.

Dacă ați ales să creați un site web de culoare deschisă; începeți adăugând cea mai deschisă culoare la fundalul celei de-a doua secțiuni și urmați cu a doua cea mai deschisă culoare din a treia secțiune.

3. Adăugați culoarea textului

După ce ați adăugat culorile de fundal pentru site-ul dvs. web, puteți începe să adăugați culoarea textului pe site-ul dvs. web. Tot conținutul scris de pe site-ul dvs. web trebuie să aibă această culoare (în afară de hyperlinkuri și îndemnuri la acțiune).

4. Adăugați culoarea hyperlink și CTA pe site-ul dvs. web

Mai departe, următorul lucru pe care îl puteți face este să scoateți în evidență hyperlinkurile și îndemnurile la acțiune de pe site-ul dvs. web. Ei atrag atenția oamenilor și îi fac curioși despre ce este o legătură sau o chemare la acțiune.

Asigurați-vă că toate elementele care pot fi făcute clic pe site-ul dvs. conțin această culoare. Păstrând această consistență, vizitatorii dvs. vor recunoaște cu ușurință unde pot face clic pentru a-și continua șederea pe site-ul dvs.

5. Adăugați culoarea finală

Ultimul lucru pe care trebuie să-l faci este să adaugi culoarea finală la atingere pe site. În exemplele și paletele de culori pe care le-am realizat, folosim această culoare tactilă finală în trei locuri: culoarea cercului blurb, textul antetului modulului persoană și bara de meniu principală.

Deși culoarea tactilă finală nu este culoarea principală pe care o veți folosi pe site-ul dvs., vă va permite să aduceți acea culoare suplimentară de care avea nevoie site-ul dvs. web. Nu doriți ca site-ul dvs. să pară monoton sau deranjant de grav.

Palete de culori

Acum că am analizat pașii necesari pentru a aplica paleta de culori pe site-ul dvs. web, este timpul să începeți explorarea unor palete de culori uimitoare. Pe lângă afișarea rezultatului exemplului de aspect pe care l-am realizat, vom distribui și codurile de culoare pe care le-am folosit pentru a ajunge la acel rezultat.

1. Placi pentru zile

Prima paletă de culori pe care am selectat-o ​​conține în general tipuri de culori mai moi (și puțin pastelate). Deoarece am ales un site web ușor, culorile mai deschise din paleta de culori ocupă cea mai mare parte a site-ului web. Cu toate acestea, culorile mai întunecate din paleta noastră de culori asigură faptul că site-ul web conține echilibrul de culoare necesar.

Culorile utilizate în acest exemplu sunt următoarele (de la stânga la dreapta):

• # EBE8E2
• # 768A95
• # B98077
• # 007193
• # E2D7D7

2. Deșert

Următoarea paletă de culori din listă se numește Desert. Echilibrul culorilor acestei palete de culori se înclină ușor spre un site web de culoare mai închisă. Culoarea care domină în acest exemplu este culoarea albastră. Dar există, de asemenea, o culoare foarte deschisă a textului, care asigură contrastul necesar.

Culorile utilizate în această paletă sunt următoarele (de la stânga la dreapta):

• # 507782
• # 7C8E93
• # D89C79
• # 443F3C
• # FFE8D8

3. Festival

Următoarea paletă de culori nu este una pe care o veți vedea deseori în jur. Culorile nu apar adesea în aceeași paletă de culori, dar sunt destul de interesante. Dacă doriți ca site-ul dvs. să arate unic, această paletă este calea de urmat.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # E6EBD1
• # A59E4C
• # 544C4D
• # AF3D4B
• # CED3BC

4. Pinky Promise

Următoarea paletă de culori din rând este o opțiune excelentă dacă doriți să creați un site web de culoare închisă. Se știe că nuanțele negre și nuanțele roz sunt o combinație bună. Acestea dau o notă jucăușă suplimentară site-ului web fără să pară prea feminin. Nuanțele negre asigură faptul că aspectul site-ului dvs. web conține în continuare acea adâncime necesară.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 33383A
• # ECC9C8
• # E2566D
• # 4F575A
• # D3D8DA

5. Santorini

În următoarea paletă, puteți observa clar că albastrul domină celelalte culori. Cu această paletă de culori, veți obține imediat un sentiment ușor și pozitiv. Albastrul este cunoscut ca fiind una dintre acele culori pe care oamenii le preferă atunci când construiesc un site web. Este o culoare standard care reflectă profesionalismul. Cu toate acestea, nuanțele de albastru care sunt folosite în această paletă de culori prezintă, de asemenea, o latură jucăușă.

Paleta de culori pe care am folosit-o în acest exemplu este (de la stânga la dreapta):

• # 1198EA
• # 0A5785
• # A85A4D
• # F1F5FA
• # C5DFF8

6. Plăcere purpurie

Culoarea dominantă în această paletă de culori este evident violet. Deși este adesea percepută ca o culoare deprimantă, această paletă de culori și utilizarea acesteia pe un site web solicită să difere. Atunci când este combinată cu culori mai strălucitoare, culoarea mov poate oferi rezultate uimitoare.

Culorile utilizate în această paletă de culori sunt următoarele:

• # D7D7ED
• # 52517B
• # 737172
• #FCFCFC
• # F0F1A

7. Subtil

Următoarea paletă de culori pe care am dori să o împărtășim este destul de neutră și în același stil cu paleta de culori Festival. Nici tu nu vezi atât de des în preajma asta, dar arată foarte curat.

Culorile utilizate în acest exemplu sunt (de la stânga la dreapta):

• # DAE2D5
• # 4B7263
• # A8A461
• # 494949
• #CCCCCC

8. Corporate

Următoarea paletă de culori pe care dorim să o împărtășim este ideală pentru toate tipurile de site-uri web de afaceri. Culorile folosite reflectă o anumită pozitivitate și tinerețe. Culorile de fundal deschise permit culorilor galben și turcoaz să aducă valoare adăugată site-ului web.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 181242
• # 4ABDAC
• #DBDBDB
• # F7B733
• #FCFCFC

9. Trandafir

Cine nu iubește culoarea trandafirului? Această următoare paletă de culori aduce un factor feminin site-ului dvs. web. Culorile deschise domină site-ul web, dar se asigură că și culorile mai închise sunt împuternicite.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 152038
• # DDA199
• # FF614C
• # F5F5F5
• # E2E2E2

10. Ciocolata

Următoarea paletă de culori pe care vrem să o punem în centrul atenției este Ciocolata. Interesantul acestei palete de culori este că culorile de fundal și culoarea textului se regăsesc în aceeași categorie de culori. Acest lucru oferă loc celorlalte două culori pentru a se distinge de aceste culori și a atrage atenția.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # FFF4E8
• # FFE2C4
• # 822317
• # 935B3B
• # 346E70

11. Sofisticat

Această următoare combinație de culori este ceva la care nu te-ai aștepta la prima vedere. Violetul și galbenul verde nu sunt atât de des utilizate împreună, dar după cum puteți vedea în rezultat; se potrivesc destul de frumos. Pentru a păstra accentul pe aceste două culori, culorile de fundal și culoarea textului sunt destul de neutre.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 88D317
• # 4F2649
• #FCFCFC
• #EFEFEF
• # 080816

12. Olivia

Olivia este o paletă de culori care nu are nevoie de prea multe explicații. Tipurile de culoare măslin și galben se combină foarte frumos. Păstrarea culorilor mai deschise mai neutre permite acestor culori să fure spectacolul.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 778E3B
• # FFD902
• # 132819
• #EFEFEF
• #FCFCFC

13. Poarta de Aur

Culorile bej fine permit site-ului dvs. web să reflecte un fel de exclusivitate. În timp ce paleta de culori arată destul de sobră, culoarea violet turcoaz din această paletă de culori reușește să aducă căldura de care are nevoie site-ul web.

Culorile utilizate în această paletă de culori sunt (de la stânga la dreapta):

• # 373737
• # F3F4E8
• # ADA075
• # EDE4C9
• # A685BC

14. Căpitan

Această paletă este probabil cea mai profesională paletă din listă. Cele două culori albastre închise din această paletă sunt principalul motiv pentru aceasta. Culoarea roșie, cu toate acestea, face o treabă excelentă la spargerea gheții și la adăugarea unei anumite diversități site-ului web.

Culorile folosite în acest post sunt (de la stânga la dreapta):

• # 3B578E
• # DB2323
• # D7DEED
• # F7F9FF
• # 201C44

15. Mediu

Următoarea paletă de culori pe care am dori să o împărtășim este de mediu. Numele arată că verdele domină această paletă de culori. Aceste culori verzi moi se potrivesc perfect cu culoarea turcoaz moale oferită în această paletă.

Culorile din această paletă sunt (de la stânga la dreapta):

• # C2D3DO
• # 56776A
• # 42B7A7
• # EDEFF4
• # 26423E

16. Foarte bogat

În următoarea paletă, putem vedea clar ce sunt o combinație bună de bej și roșu. Acestea dau un sentiment de maturitate oricărui tip de site web. Adăugând o altă culoare verde vizibilă, aspectul și senzația site-ului dvs. web va avea și o tinerețe.

Culorile din această paletă sunt (de la stânga la dreapta):

• # 984B43
• # 233237
• # B7A97C
• # F9F0D4
• # 527C40

17. Fascinant

Următoarea paletă din rând este un alt site web de culoare închisă. Culorile dominante sunt violet închis și gri. Cu toate acestea, culorile mai deschise reușesc să aducă o anumită căldură site-ului web.

Culorile din această paletă sunt (de la stânga la dreapta):

• # D0B6D6
• # 3CC203D
• # 898989
• # F2F2F2
• # F9AEBD

18. Monetărie

Paleta de culori Mint aduce un sentiment de prospețime site-ului dvs. web. Deși sunt foarte sobre la prima vedere, culoarea portocalie și violetă reușesc să ofere un sentiment proaspăt și renăscut site-ului web.

Culorile utilizate în această paletă sunt (de la stânga la dreapta):

• # 31190A
• # B4BCA7
• # F99A53
• # 54468E
• # E3EDE5

19. Galben moale

Această paletă de culori unică conține în principal culori calde. Deși avem atât culori întunecate, cât și luminoase ca culori de fundal, senzația generală se apleacă mai aproape de un site web deschis la culoare.

Culorile din această paletă sunt (de la stânga la dreapta):

• # DDCF30
• # 437468
• # F1FFD1
• # 4A4C49
• # FCFAD9

20. Mister

Ultima paletă de culori din rând este încă o altă paletă de culoare închisă pe care o puteți utiliza pentru site-ul dvs. web. Culorile de fundal utilizate în această paletă sunt sobre și permit celorlalte culori mai luminoase din paletă să iasă.

Culorile din această paletă sunt:

• # 131517
• # 13828A
• # 35363A
• # EEF5F7
• # AF8300

Gânduri finale

În această postare, v-am împărtășit câteva sfaturi despre cum să aplicați paleta de culori pe care o alegeți site-ului dvs. web. În afară de asta, v-am arătat și 20 de palete de culori frumoase care vă pot ajuta să aduceți eleganță site-ului dvs. web. Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Și cât timp sunteți acolo, anunțați-ne; care dintre aceste palete de culori este preferata ta?

Imagine prezentată de EDGOR_21 / shutterstock.com