Ce este HSL și de ce designerii ar trebui să -l stăpânească

Culoarea este unul dintre cele mai puternice instrumente din setul de instrumente al unui designer, dar lucrul cu sisteme tradiționale precum Hex și RGB se poate simți uneori limitativ. Aceste formate funcționează, dar nu reflectă modul în care vedem sau ne gândim la culoare. Aveți nevoie de o nuanță mai ușoară sau doriți să se potrivească saturației pe diferite nuanțe? Ai rămas ghicit.

Acolo intră nuanța, saturația și lejeritatea (HSL). Face ca ajustările de culoare să fie mai vizuale și previzibile, iar Divi 5 îl susține acum nativ datorită relativării sale relative și eliberarea caracteristicilor HSL. Să explorăm cum funcționează și de ce veți dori să -l stăpâniți.

De ce majoritatea designerilor se luptă cu alegerile de culoare

Instrumentele de culoare nu se potrivesc adesea cu modul în care ne gândim în mod natural la culoare. Vedeți o nuanță de albastru pe care îl iubiți, dar singura modalitate de a o surprinde este printr -un cod hexagonat precum #4A90E2. Aceste litere și numere nu înseamnă nimic pentru creierul tău.

Culorile hexagonale sunt făcute prin amestecarea valorilor roșii, verzi și albastre. Fiecare pereche (cum ar fi 4a, 90, e2) arată cât de mult din fiecare culoare este utilizată, de la 0 la 255. Împreună, creează culoarea finală #4A90E2.

Este posibil să aveți probleme să vă dați seama ce numere să schimbați atunci când aveți nevoie de o versiune mai ușoară a mărcii dvs. albastru. Ar trebui să creșteți toate valorile RGB în mod egal? Sau reglați doar un canal RGB (roșu, verde sau albastru)? Numerele nu se potrivesc cu ceea ce se așteaptă ochii tăi, așa că te ajustați și previzualizați până nu se simte corect.

Sistemele tradiționale de culori creează probleme mai mari atunci când lucrați în diferite contexte. Crearea de variații de culoare devine ghicire pură. Vrei cinci nuanțe care funcționează împreună, dar nu există niciun sistem pentru asta. Lumina #4A90E2 la #6BA3E8 ar putea arăta corect sau s -ar putea să pară spălat. Nu veți ști până nu o veți vedea.

Obținerea nuanțelor prin schimbarea codurilor hexagonale nu este simplă. Noile valori hexate ( #6ba3e8) sunt alese cu atenție pe stânga pentru a crea o nuanță mai ușoară de #4A90E2. În dreapta, doar a face schimbări nominale (#3B99E5) nu ușurează culoarea, ci o schimbă complet.

Acest flux de lucru lent, manual, durează ore întregi. Reglați valorile, verificați previzualizarea și modificați din nou, luptând cu instrumentele în loc să proiectați. Atenția ta este aspirată în detalii tehnice atunci când ar trebui să se concentreze asupra modului în care culorile îi fac pe oameni să se simtă.

Mulți designeri ajung să evite experimentarea culorilor, deoarece procesul se simte atât de stângace. Vă lipiți cu alegeri sigure sau copiați palete de pe alte site -uri. Instrumentele care ar trebui să vă ajute să explorați creativitatea culorilor îl limitează de fapt.

Problema cu valorile statice RGB

Valorile RGB nu se comportă întotdeauna cum vă așteptați. Green pare mult mai luminos decât albastru la același cadru, dar sistemul îi tratează în mod egal. RGB (128, 128, 128) este un gri mediu perfect, dar modul în care arată poate varia în funcție de ecran, iluminare sau profil de culoare utilizat.

Vrei o versiune mai ușoară a culorii mărcii tale? Puteți încerca să creșteți valorile RGB și, uneori, obțineți ceea ce vă așteptați. Alteori, obțineți ceva care pare spălat și ciudat. În prealabil nu există nicio modalitate de a spune.

Culoarea albastră a mărcii cu valorile RGB a crescut în mod egal cu +50, rezultând o nuanță spălată, care nu este tonul preconizat mai ușor. Acest lucru arată că adăugarea aceleiași sume la fiecare canal RGB nu produce întotdeauna nuanțe de culori previzibile sau echilibrate.

Culorile RGB se schimbă, de asemenea, între diferite programe. Acest lucru se întâmplă din cauza diferențelor de profiluri de culori, a motoarelor de redare și a modului în care browserele interpretează aceste valori. Alegeți o nuanță perfectă în Photoshop, copiați codul hex pe site -ul dvs. web și s -ar putea să pară totuși ușor diferit. Ghidurile mărcii devin mai greu de aplicat atunci când același cod de culoare arată ușor diferit între browsere și instrumente de proiectare.

Fiecare culoare se schimbă în felul său atunci când încercați să o luminați sau să o întunecați. Deoarece RGB nu reglează culorile uniform, unele nuanțe se estompează mai repede sau se schimbă în moduri neașteptate. Unele nuanțe se desaturat mai repede decât altele pe măsură ce ușurința crește. Albastrul tău devine gri în timp ce roșul tău rămâne vibrant. Purpuriul tău devine noroios în timp ce portocalul tău rămâne curat.

Munca color se transformă în încercare și eroare în loc de design intenționat.

Care este sistemul Hue, Saturație și Lumină (HSL)?

Nuanța, saturația și lejeritatea (HSL) sparg culoarea în trei părți care se potrivesc cu modul în care creierul tău se gândește de fapt la culoare. Hue alege culoarea de bază de la o roată de 360 ​​de opțiuni. Saturația controlează cât de vibrant sau gri arată acea culoare. Lumina de decide dacă este întuneric, luminos sau undeva între.

Când vă gândiți, „Vreau un verde închis”, vă gândiți deja la termenii HSL. Știi că vrei verde (nuanță), probabil destul de bogat (saturație), și pe partea mai întunecată (lejeritate).

Cum funcționează împreună cele trei componente

Nuanța funcționează ca o roată de culoare tăiată din spectrul de lumină vizibilă. Capetele conectează roșu la magenta, creând o buclă lină de fiecare culoare posibilă. Vrei portocaliu perfect? Începeți de la roșu (0 grade) și mergeți spre galben în jurul a 30 de grade.

Saturația măsoară puritatea culorii ca procent. Zero la sută elimină toată culoarea, lăsând gri. O sută la sută oferă cea mai vie versiune posibilă. Gândiți -vă la saturație ca la diferența dintre un semn de neon și o acuarelă dezactivată.

Cum funcționează culorile HSL, inspirate de graficul de pe Wikipedia despre același subiect

Lumina de ușurință variază de la 0% (negru pur) până la 50% (neutru) la 100% (alb pur). Majoritatea culorilor utilizabile trăiesc între 20% și 80% ușurință. Acest lucru se potrivește cu modul în care vă gândiți în mod natural să faceți culorile mai ușoare sau mai întunecate.

De ce constructorii de pagini evită de obicei HSL

Majoritatea constructorilor de pagini rămân cu coduri Hex și RGB din motive practice, nu pentru că aceste sisteme funcționează mai bine. Dezvoltatorii de constructor se confruntă cu obstacole tehnice reale. Utilizatorii știu deja coduri Hex de la Photoshop și alte instrumente de proiectare. Convertirea între sistemele de culori necesită o prelucrare suplimentară.

Susținerea HSL înseamnă construirea de noi interfețe și educarea utilizatorilor despre concepte necunoscute, cu excepția cazului în care HSL Color Picker este încadrat perfect. Această abordare conservatoare are sens dintr -o perspectivă de afaceri, chiar dacă limitează posibilitățile creative.

Creați variații de culoare perfecte cu noile controale HSL ale Divi 5

HSL sună grozav în teorie, dar teoria nu construiește site -uri web. Aveți nevoie de instrumente care susțin această abordare. Majoritatea constructorilor de pagini vă obligă să reveniți la coduri hexagonale și RGB Guesswork. Divi 5 schimbă totul despre modul în care lucrezi cu culoarea. Dar mai întâi:

Ce este Divi?

Divi este un constructor de pagini care funcționează diferit de alți constructori de pagini WordPress. Obțineți instrumente de design vizual amestecate cu controale serioase de tipografie. Editorul live îți arată schimbările instantaneu. Reglați dimensiunile fontului, modificați distanța liniei și urmăriți actualizarea paginii dvs. chiar acolo.

Puteți arunca peste 200 de module oriunde doriți. Blocurile de text, titlurile și piesele de conținut special se joacă frumos împreună.

Iată ce face Divi special: 2000+ Layout-uri gata construite pentru întreprinderile reale. Vorbim despre modele reale, nu șabloane de început de bază. Ai nevoie de ceva pentru restaurantul tău? Există un aspect pentru asta. Continuați un studio de fotografie? Te -am acoperit. Consultanții și startup -urile tehnologice primesc propriile modele.

Fiecare aspect îți cunoaște industria. Culorile, distanța și conținutul fluxului au sens pentru modul în care clienții dvs. gândesc și navighează.

Luați controlul complet al site -ului

Constructorul de teme îți pune fiecare piesă din textul site -ului tău în mâinile tale. Construiți anteturi personalizate care vorbesc limba mărcii dvs. Pagini de blog de proiectare care fac ca articolele lungi să fie ușor de citit. Paginile dvs. de eroare 404 pot păstra aceleași fonturi și stil ca și restul site -ului dvs.

Divi Ai aduce inteligență artificială direct în fluxul tău de lucru. Generați titluri care sună ca și cum le -ați scris. Creați o copie a produsului care se potrivește exact cu vocea dvs. de marcă.

Construiește secțiuni de pagini întregi care îți înțeleg afacerea.

Scrie fragmente de cod atunci când ai nevoie de ele.

Divi AI funcționează și cu imaginile dvs. chiar în interiorul constructorului. Descrieți ce trebuie să remediați în orice imagine și cum face aceste schimbări.

Chiar generează imagini complet noi la cerere.

Săriți problema paginii goale cu site -urile rapide Divi

Site -urile rapide Divi rezolvă problema paginii goale care oprește multe proiecte înainte de a începe. Site -urile profesionale de pornire vin cu tipografia deja înființată. Echipa noastră de proiectare construiește aceste șabloane cu imagini unice și lucrări de artă pe care nu le veți vedea nicăieri în altă parte.

Site -urile rapide Divi cu Divi AI pot construi, de asemenea, machete personalizate pe baza descrierii afacerii dvs. Povestiți -o despre practica dvs. de consultanță sau restaurant și creează pagini relevante cu o copie adecvată pentru industria dvs.

Acest lucru depășește doar un fir de fir. Obțineți titluri reale, copie corporală și imagini care au sens pentru afacerea dvs. Puteți seta fonturile și culorile de marcă în avans sau puteți lăsa AI să aleagă pentru dvs.

După aceea, totul rămâne pe deplin editabil, astfel încât să puteți rafina tipografia pentru a se potrivi cu viziunea dvs.

Ce este nou în Divi 5?

Divi 5 este următoarea versiune a constructorului de pagini, în prezent în testarea alfa și este gata pentru proiecte de site -uri noi. Ne -am concentrat pe îmbunătățiri practice care vă grăbesc munca zilnică și fac ca șantierele să fie mai plăcute.

Cele mai bune părți ale lui Divi actuale au rămas puse în timp ce reconstruim orice altceva. Proiectarea proaspătă a interfeței îndeplinește performanțe îmbunătățite sub capotă. Practicile moderne de codare alimentează întregul sistem acum.
Paginile se încarcă mai repede decât înainte. Controalele răspund mai repede când faceți clic pe ele. Tipografia rămâne consecventă pe întregul site fără muncă manuală suplimentară.

Iată câteva aspecte importante:

• Framework complet reconstruiește se aruncă sistemul vechi de coduri scurte. Totul funcționează pe arhitectura modernă bazată pe bloc, pe care browserele se descurcă mult mai bine.
• Sistemul FlexBox al Divi 5 vă oferă un control direct pentru a construi machete moderne, receptive, gestionarea cu ușurință a alinierii, distanțarea și ambalarea fără cod personalizat.
• Sistemul de culori HSL aduce controale de culoare care se potrivesc cu modul în care cred designerii. Reglați nuanța, saturația și ușurința în loc să ghiciți cu coduri hexagonale.
• Șapte puncte de întrerupere personalizate înlocuiesc limita veche cu trei dimensiuni. Tipografia dvs. arată perfect pe fiecare dispozitiv pe care îl folosesc vizitatorii.
• Funcții CSS încorporate mijloace Calc (), Clamp (), Min () și Max () funcționează chiar în editorul vizual. Construiți un text receptiv care se scalează în mod natural fără cod.
• Variabilele de design global stochează fonturi, culori și distanțare într -un singur loc. Schimbați -vă fontul principal o dată. Fiecare H1 de pe site -ul dvs. se actualizează automat.
• Sistemul de proiectare bazat pe presetare include presetări de elemente pentru module individuale, plus presetări de grupuri de opțiuni pentru stiluri complete de tipografie. Pentru a menține lucrurile consecvente, folosiți -le pe diferite module.
• O nouă interfață Visual Builder primește panouri andocate, ferestre cu file, comenzi rapide de la tastatură și o vizualizare mai bună a straturilor cu pesmet. Navigarea devine mult mai ușoară.
• Rândurile cuibărite pun rânduri în alte rânduri pentru machete complexe. Construiți aranjamente avansate de aspect fără tipuri de secțiuni speciale.
• Grupurile de module combină diferite elemente în unități unice. Acest lucru face mai ușor gestionarea machetei de text complexe și puteți construi și module personalizate.
• Spațiul de lucru cu mai multe panouri mută panourile oriunde funcționează cel mai bine. Mențineți comenzile tipografice deschise în timp ce reglați alte lucruri de design.
• Copii de gestionare a atributelor , paste și resetează stilurile de tipografie între elemente. Alegeți atribute specifice de transfer în loc să copiați totul.
• Modurile de interfață ușoară/întunecată reduc încordarea ochilor în timpul sesiunilor de proiectare lungă.
• Scalarea pânzei arată cum arată tipografia pe diferite dimensiuni ale ecranului, fără a părăsi editorul.

Descoperiți toate versiunile de caracteristici DIVI 5

Cum se creează culori HSL cu Divi 5

După cum am menționat, Divi 5 reconstruiește culoarul de la zero. Noua interfață scade coduri hexagonale pentru controalele HSL care funcționează ca și cum creierul tău se gândește la culoare. Trei glisoare se ocupă de muncă:

• Hue acceptă 0–360 grade, iar valorile negative se înfășoară (de exemplu, -60 devine 300). Roata de culoare se conectează la ambele capete. Zero, 360 și negativ 360 vă oferă același roșu. Aveți nevoie de o culoare complementară? Setați nuanța la 180 de grade din punctul dvs. de plecare.
• Saturația rulează de la 0% la 100% și controlează cât de vie arată culoarea ta. Zero la sută elimină toată intensitatea culorii, lăsând gri. O sută la sută dă o culoare completă.
• Lumina funcționează în același interval procentual. Zero face negru, 100% creează alb, iar 50% arată forma pură a oricărei nuanțe pe care ai ales -o.

Controalele se actualizează în direct în timp ce trageți. Aplicați butoane sau întârzierile de actualizare nu vă vor întrerupe fluxul de lucru.

1. Construiți culori relative din culori globale

Culorile relative vă permit să creați culori noi bazate pe culori globale existente prin modificarea componentelor individuale HSL. Începeți în managerul variabil de design adăugând o nouă culoare.

Folosind culoarea culorilor, setați culoarea de bază (aceasta ar putea fi culoarea mărcii) pentru a se potrivi cu culoarea globală primară existentă.

Să configuram culorile secundare folosind schimbarea principală a nuanței pentru a crea culori complementare. Luați -vă culoarea primară, cu lejeritate setată la 25%.

Puteți chiar să vă jucați cu nuanța sau saturația pentru a crea o culoare nouă ca culoare secundară.

Swatches de culori vă arată informații importante dintr -o privire. Puteți spune dacă ceva folosește o variabilă de design și vedeți cum modifică filtrele HSL culoarea de bază. Acest feedback vizual vă ajută să înțelegeți ce se întâmplă cu relațiile dvs. de culoare.

De asemenea, creați nuanțe mai închise pentru culoarea textului și culoarea culorilor textului corpului, folosind culoarea primară ca bază.

Puteți, desigur, să creați mai multe culori decorative aici și puteți să introduceți manual Hex, RGB sau valori de culoare numite manual.

2. Gestionați relații variabile de proiectare multi-straturi

Variabilele de proiectare se pot stiva una peste alta pentru sisteme de culori complexe. Pe baza primară, puteți crea culori decorative suplimentare, cum ar fi mușchiul ars. Apoi, reduceți opacitatea arsului mușchiului de a construi o culoare de umbră.

Aceste relații cuibărite arată modul în care Divi 5 gestionează ierarhiile complexe de culori. Când ajustați culoarea primară, culoarea arsă se actualizează mai întâi, declanșând culoarea umbrei pentru a se actualiza. Întregul lanț rămâne conectat.

Această abordare schimbă gestionarea culorii de la ghicirea aleatorie într -un sistem previzibil. Paleta de culori a site -ului dvs. web rămâne armonioasă fără ajustări manuale pe fiecare element.

3. Aplicați culorile HSL pe site -ul dvs.

Apăsați orice modul de text și deschideți culema de culori. Variabilele dvs. salvate apar cu indicatori. Faceți clic pe „Culoare secundară” și va completa fundalul unei secțiuni. Aceeași culoare funcționează pentru butoane, fundaluri și granițe.

Tipografia funcționează atunci când rămâneți la o nuanță, dar schimbați ușurința. Titlurile ar putea folosi culoarea primară la -25% lejeritate. Textul corpului este puțin mai ușor la -15%. Link -urile stau la -45%. Totul se referă, dar rămâne clar.

Fundalul au nevoie de culorile mărcii dvs. tonifiate. Împingeți ușurința de până la 95%. Saturația scade la 15%. Acum aveți fundaluri de marcă care nu combate conținutul. Butoanele funcționează cu saturație completă. Hover afirmă că aruncă o ușurință pe o crestătură. Aceeași culoare, intensitate diferită.

Textul ușor are nevoie de fundaluri întunecate. Numerele de ușurință vă spun ce funcționează. Text la 50% lejemetrice pereche cu fundaluri sub -30% din ușurință.

Secțiunile cu text întunecat pe fundaluri ușoare inversează valorile. Aceleași nuanțe, aceeași saturație. Schimbă valorile ușurinței și ai terminat. Și, desigur, toate aceste culori își mențin legăturile chiar și după ce au fost aplicate. Schimbați o variabilă și totul se adaptează. Ușor ca asta!

4. Salvați -vă culorile HSL ca presetări reutilizabile

După ce ați creat modulele și ați aplicat variabilele de design de culoare, prestați aceste culori în stiluri reutilizabile. Divi 5 oferă două tipuri prestabilite care lucrează împreună:

Presetări de grupuri de opțiuni controlează aspecte specifice de proiectare pe toate modulele. Stilul -vă rubricile cu variabila de design a culorilor textului de rubrică. Adăugați umbre în coloana dvs. folosind mușchi ars și 50% opacitate. Treceți peste pictograma Modulului Grup de opțiuni în orice modul, etichetați în mod corespunzător și salvați.

Aceleași funcționează pentru fundaluri, distanțare, animații și text. Adăugați o rază de frontieră printr -o variabilă de proiectare a numărului și configurați presetarea care face referire la această variabilă de număr. Fiecare grup de opțiuni se ocupă de propriul său teritoriu de design și poate fi aplicat încrucișat, adică raza de frontieră a unei coloane poate fi aplicată la apel la acțiune.

Pentru a aplica, accesați opțiunea corespunzătoare și selectați presetarea.

Presetări de elemente Salvați stiluri complete de modul. Stil un modul buton cu culoarea secundară la 80% lejeritate. Faceți clic pe selectorul presetat din partea dreaptă sus a setărilor modulului. Creați o nouă presetare numită „Button Color Color”. Acest lucru salvează toate setările butonului, inclusiv culorile HSL.

Acum, când adăugați un buton nou, aplicați această presetare și moștenește întregul stil. Pentru a vă reduce munca pentru dvs., luați orice presetare personalizată (grup de opțiuni sau element) pe care l -ați creat și faceți clic pe pictograma Star de lângă ea. Această presetare devine implicită pentru toate instanțele noi ale acelui element sau grup de opțiuni.

Relațiile dvs. HSL rămân intacte în presetări. Când actualizați o culoare, fiecare modul și presetați folosind și actualizările de culoare. Construiți biblioteci presetate pentru secțiuni ușoare, secțiuni întunecate și momente speciale de marcă. Valorile HSL călătoresc cu fiecare presetare, păstrând sistemul dvs. de culori în mod consecvent în proiecte.

Construiți sisteme de culori pentru site -urile dvs. web cu Divi 5

Munca color obișnuiau să dureze zile. Ai fi înrădăcinat cu coduri hexagonale, ai copia valorile între programe și te -ai ruga ceva să pară decent.

HSL face din nou să se distreze culoarea. Vedeți o nuanță pe care o iubești și știi exact cum să o recreezi. Hue alege culoarea, saturația controlează cât de viu este, iar lejeritatea o face mai strălucitoare sau mai întunecată. Acum, reîmprospătarea mărcii durează minute în loc de ore.

Acesta este un control real al proiectării. Divi 5 face să se întâmple astăzi.